introducing page news features

includes/api.php

@@ -1,12 +1,14 @@
 <?php
 
-/* --------------------------------------
-	SHIP QUESTIONS POSTS PER THEMATIQUE
- --------------------------------------*/
 
-// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
+
 add_action('rest_api_init', function () {
-	register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<id>\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<thematiqueId>\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<typeId>\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<typeId>\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
 			)
 		)
 	);

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();
 });

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');
+}

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;

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;
 	<div class="card-news__inner">
 		<div class="card-news__heading">
 			<h3 class="card-news__title"><?php echo $post_title ?></h3>
-			<?php if ($post_tags) : ?>
+			<?php if ($news_type) : ?>
-				<p class="card-news__tag"><?php echo $post_tags[0]->name ?></p>
+				<p class="card-news__tag"><?php echo $news_type[0]->name ?></p>
 			<?php endif; ?>
 		</div>
 
-		<a href="#" class="cta cta--read-more cta--with-arrow-button cta--streched  ">
+		<a href="<?php echo get_the_permalink($post_ID) ?>" class="cta cta--read-more cta--with-arrow-button cta--streched  ">
 			<!-- cta-read-more -->
 			<span><?php echo __("Lire l'article", 'homegrade-theme__texte-fonctionnel') ?></span>
 			<span class="sr-only"><?php echo $post_title ?></span>

template-news.php

@@ -19,35 +19,53 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 		</ol>
 	</nav>
 </div>
-<div class="heading-box">
+
+<div class="heading-box ">
 	<img class="heading-box__page-icon" src="<?php echo $pageIcon['url']  ?>" alt="" />
 	<h1 class="heading-box__title"><?php echo get_the_title(get_queried_object_id()) ?></h1>
 	<p class="heading-box__description"> <?php echo __("Qu'y a-t-il de nouveau 
 chez Homegrade ?", "homegrade-theme__texte-fonctionnel")  ?></p>
 </div>
 
-<div class="filters-toolbar">
+<ul class="filters-toolbar filters-toolbar--archive-news">
+	<?php
+	$news_types = get_terms(array(
+		'taxonomy' => 'news-type',
+		'hide_empty' => true,
+	));
 
-</div>
+	?>
+	<li>
+		<button class="filter__action-button" data-term-id="all">Tous</button>
+	</li>
+	<?php foreach ($news_types as $typeTerm) : ?>
+		<li>
+			<button class="filter__action-button" data-term-id="<?php echo $typeTerm->term_id ?>"><?php echo $typeTerm->name ?></button>
+		</li>
+	<?php endforeach; ?>
+</ul>
 
 <?php
+$post_per_page = 12;
 $args = array(
 	"post_type" => "post",
-	"status" => "publish"
+	"status" => "publish",
+	"posts_per_page" => $post_per_page,
+
 );
 $posts = new WP_Query($args);
 
-?>
-<div class="card-container">
 
+?>
+<section class="news-container">
+
+	<div class="card-grid-container">
 
 		<?php
-
-
 		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;
+			$news_type = get_the_terms($post->ID, "news-type") ?? null;
+
 			get_template_part(
 				'template-components/cards/card-news',
 				null,
@@ -56,12 +74,18 @@ $posts = new WP_Query($args);
 					'post_ID' => $post->ID,
 					'post_title' => $post->post_title,
 					'post_thumbnail' => $post_thumbnail,
-				'post_tags' => $post_tags,
+					'news_type' => $news_type,
 				)
 			);
 		}
-
 		?>
-</div>
+	</div>
+
+
+	<?php if ($posts->max_num_pages > 1) : ?>
+		<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
+	<?php endif; ?>
+</section>
+
 <?php
 get_footer();