From b51c3da78d6b1638119c73801b1e6fb0131f521c Mon Sep 17 00:00:00 2001 From: Antoine M Date: Thu, 26 Oct 2023 09:50:51 +0200 Subject: [PATCH] introducing page news features --- includes/api.php | 187 +++++++++++++++++++++++- resources/js/app.js | 2 + resources/js/archive-template-news.js | 45 ++++++ template-components/cards/card-news.css | 15 +- template-components/cards/card-news.php | 9 +- template-news.php | 76 ++++++---- 6 files changed, 295 insertions(+), 39 deletions(-) create mode 100644 resources/js/archive-template-news.js diff --git a/includes/api.php b/includes/api.php index 583b4c4..282ffff 100644 --- a/includes/api.php +++ b/includes/api.php @@ -1,12 +1,14 @@ \d+)', array( + + /* --------------------------- + SHIPPING ROUTES + ---------------------------*/ + // Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301 + register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P\d+)', array( 'methods' => 'GET', 'callback' => 'get_questions_posts_per_thematique_id', 'args' => array( @@ -15,17 +17,186 @@ add_action('rest_api_init', function () { ), ), )); + // * SHIP ALL NEWS + register_rest_route('homegrade-datas/v1', '/news', array( + 'methods' => 'GET', + 'callback' => 'get_news', + )); + // * SHIP NEWS BY TYPE + register_rest_route('homegrade-datas/v1', '/news/type/(?P\d+)', array( + 'methods' => 'GET', + 'callback' => 'get_news_posts_per_type_id', + )); + + + /* ---------------- + BUILDING ROUTES + -----------------*/ + + register_rest_route('homegrade-datas/v1/build', '/news', array( + 'methods' => 'GET', + 'callback' => 'build_news_posts_feed_all', + )); + // * BUILD NEWS CARDS BY NEWS TYPE + register_rest_route('homegrade-datas/v1/build', '/news/type/(?P\d+)', array( + 'methods' => 'GET', + 'callback' => 'build_news_posts_feed_per_type_id', + )); }); + + +function build_card($request) +{ + $cardId = $request['cardId']; + + + $test = get_template_part( + 'template-components/cards/card-news', + null, + array( + 'card_variant' => 'activite', + 'post_ID' => $cardId, + 'post_title' => get_the_title($cardId), + // 'post_thumbnail' => $post_thumbnail, + // 'news_type' => $news_type, + ) + ); + $response = new WP_REST_Response($test); + $response->set_status(200); + + return $response; +} + + +function get_news($request) +{ + $args = array( + "status" => "publish", + "post_type" => "questions", + "posts_per_page" => -1, + ); + $newsPosts = get_posts($args); + $response = new WP_REST_Response($newsPosts); + $response->set_status(200); + + return $response; +} + + +/* ---------------- + NEWS BY TYPE ID +-----------------*/ + +function get_news_posts_per_type_id($request) +{ + + $typeId = $request['typeId']; + $args = array( + "post_type" => "post", + "posts_per_page" => -1, + "tax_query" => array( + array( + 'taxonomy' => 'news-type', + 'field' => 'term_id', + 'terms' => $typeId + ) + ) + ); + $newsPostsDatas = get_posts($args); + $response = new WP_REST_Response($newsPostsDatas); + $response->set_status(200); + + return $response; +} +function build_news_posts_feed_all($request) +{ + + + $args = array( + "post_type" => "post", + "posts_per_page" => -1, + ); + $newsPostsDatas = get_posts($args); + + + ob_start(); + foreach ($newsPostsDatas as $key => $post) { + $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null; + $news_type = get_the_terms($post->ID, "news-type") ?? null; + write_log($news_type); + get_template_part( + 'template-components/cards/card-news', + null, + array( + 'card_variant' => 'activite', + 'post_ID' => $post->ID, + 'post_title' => get_the_title($post->ID), + 'post_thumbnail' => $post_thumbnail, + 'news_type' => $news_type, + ) + ); + } + + $html_template = ob_get_clean(); + + $response = new WP_REST_Response($html_template); + $response->set_status(200); + + return $response; +} +function build_news_posts_feed_per_type_id($request) +{ + $typeId = esc_html($request['typeId']); + if (!$typeId || (!is_numeric($typeId))) return; + + $args = array( + "post_type" => "post", + "posts_per_page" => -1, + "tax_query" => array( + array( + 'taxonomy' => 'news-type', + 'field' => 'term_id', + 'terms' => $typeId + ) + ) + ); + $newsPostsDatas = get_posts($args); + + + ob_start(); + foreach ($newsPostsDatas as $key => $post) { + $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null; + $news_type = get_the_terms($post->ID, "news-type") ?? null; + get_template_part( + 'template-components/cards/card-news', + null, + array( + 'card_variant' => 'activite', + 'post_ID' => $post->ID, + 'post_title' => get_the_title($post->ID), + 'post_thumbnail' => $post_thumbnail, + 'news_type' => $news_type, + ) + ); + } + + $html_template = ob_get_clean(); + + $response = new WP_REST_Response($html_template); + $response->set_status(200); + + return $response; +} + function get_questions_posts_per_thematique_id($request) { $excluded_ids = $request->get_param('excluded_ids'); $excludedArray = explode(',', $excluded_ids); - $id = $request['id']; + $thematiqueId = $request['thematiqueId']; $args = array( - // "exclude" => array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10), "post_type" => "questions", "posts_per_page" => -1, "post__not_in" => $excludedArray, @@ -33,7 +204,7 @@ function get_questions_posts_per_thematique_id($request) array( 'taxonomy' => 'thematiques', 'field' => 'term_id', - 'terms' => $id + 'terms' => $thematiqueId ) ) ); diff --git a/resources/js/app.js b/resources/js/app.js index f419aa8..0be0cff 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -3,6 +3,7 @@ import menuInit from './menus'; import singleConseil from './single-conseil'; import SchemaBulletPointsInit from './schema-bullet-points'; import taxonomyThematiqueFaqInit from './taxonomy-thematique-(faq)'; +import archiveNewsInit from './archive-template-news'; // window.addEventListener('load', function () {}); window.addEventListener('DOMContentLoaded', (event) => { @@ -11,4 +12,5 @@ window.addEventListener('DOMContentLoaded', (event) => { singleConseil(); editorInit(); taxonomyThematiqueFaqInit(); + archiveNewsInit(); }); diff --git a/resources/js/archive-template-news.js b/resources/js/archive-template-news.js new file mode 100644 index 0000000..895e570 --- /dev/null +++ b/resources/js/archive-template-news.js @@ -0,0 +1,45 @@ +function loadMoreNewsInit() { + const loadMoreButton = document.querySelector('#load-more-news'); + if (!loadMoreButton) return; + + function loadMoreNews() { + console.log('loadMoreNews'); + } + + loadMoreButton.addEventListener('click', loadMoreNews); +} + +function filterNewsInit() { + const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news'); + if (!filterNewsToolbar) return; + + const filterButtons = filterNewsToolbar.querySelectorAll('.filter__action-button'); + if (!filterButtons) return; + + filterButtons.forEach((button) => { + const termId = button.getAttribute('data-term-id'); + button.addEventListener('click', hydrateNewsFeedByTypeId); + }); +} + +async function hydrateNewsFeedByTypeId(e) { + const filterID = e.target.getAttribute('data-term-id'); + let newCardsContent; + if (filterID === 'all') { + const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`); + newCardsContent = await response.json(); + } else { + const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`); + newCardsContent = await response.json(); + } + + let container = document.querySelector('.card-grid-container'); + container.innerHTML = newCardsContent; +} + +export default function archiveNewsInit() { + loadMoreNewsInit(); + filterNewsInit(); + + const cardNewsElements = document.querySelectorAll('.card-news'); +} diff --git a/template-components/cards/card-news.css b/template-components/cards/card-news.css index f247697..0e14567 100644 --- a/template-components/cards/card-news.css +++ b/template-components/cards/card-news.css @@ -1,5 +1,17 @@ .card-news { + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0px); + } + } + @apply bg-white shadow-lg rounded-3xl relative; + animation: fadeIn 0.6s ease-in-out; &__thumbnail { @apply rounded-t-3xl @@ -7,7 +19,8 @@ object-cover; } &__inner { - @apply p-8 h-full; + @apply p-8; + /* @apply h-full ; */ } &__heading { @apply flex flex-col-reverse; diff --git a/template-components/cards/card-news.php b/template-components/cards/card-news.php index ff1e063..342ebfe 100644 --- a/template-components/cards/card-news.php +++ b/template-components/cards/card-news.php @@ -3,7 +3,8 @@ $post_ID = $args['post_ID']; $card_variant = $args['card_variant']; $post_thumbnail = $args['post_thumbnail']; $post_title = $args['post_title']; -$post_tags = $args['post_tags'] ?? null; +$news_type = $args['news_type'] ?? null; + ?> @@ -14,12 +15,12 @@ $post_tags = $args['post_tags'] ?? null;

- -

name ?>

+ +

name ?>

- + diff --git a/template-news.php b/template-news.php index 56d8cce..bebeafb 100644 --- a/template-news.php +++ b/template-news.php @@ -19,49 +19,73 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
-
+ +

-
+
    + 'news-type', + 'hide_empty' => true, + )); -
+ ?> +
  • + +
    • + +
  • + +
    • + + "post", - "status" => "publish" + "status" => "publish", + "posts_per_page" => $post_per_page, + ); $posts = new WP_Query($args); + ?> -
    +
    + +
    + + posts as $key => $post) { + $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null; + $news_type = get_the_terms($post->ID, "news-type") ?? null; + + get_template_part( + 'template-components/cards/card-news', + null, + array( + 'card_variant' => 'activite', + 'post_ID' => $post->ID, + 'post_title' => $post->post_title, + 'post_thumbnail' => $post_thumbnail, + 'news_type' => $news_type, + ) + ); + } + ?> +
    - max_num_pages > 1) : ?> + + +
    - - foreach ($posts->posts as $key => $post) { - - $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null; - $post_tags = get_the_tags($post->ID) ?? null; - get_template_part( - 'template-components/cards/card-news', - null, - array( - 'card_variant' => 'activite', - 'post_ID' => $post->ID, - 'post_title' => $post->post_title, - 'post_thumbnail' => $post_thumbnail, - 'post_tags' => $post_tags, - ) - ); - } - - ?> -