working V1 for publications page

includes/api.php

@@ -51,34 +51,31 @@ add_action('rest_api_init', function () {
 		'permission_callback' => '__return_true',
 
 	));
+	// * BUILD BROCHURES ARCHIVE ROWS
+	register_rest_route('homegrade-datas/v1/build', '/brochures-archive-rows', array(
+		'methods' => 'GET',
+		'callback' => 'build_brochure_archive_rows',
+		'permission_callback' => '__return_true',
+
+	));
+	// * BUILD FICHE INFOS ARCHIVE ROWS
+	register_rest_route('homegrade-datas/v1/build', '/fiche-info-archive-rows', array(
+		'methods' => 'GET',
+		'callback' => 'build_fiches_info_archive_rows',
+		'permission_callback' => '__return_true',
+
+	));
+	// * BUILD WEBINAIRE ARCHIVE ROWS
+	// register_rest_route('homegrade-datas/v1/build', '/webinaire-archive-rows', array(
+	// 	'methods' => 'GET',
+	// 	'callback' => 'build_webinaire_archive_rows',
+	// 	'permission_callback' => '__return_true',
+
+	// ));
 });
 
 
 
-
-// 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(
@@ -92,12 +89,6 @@ function get_news($request)
 
 	return $response;
 }
-
-
-/* ----------------
-	NEWS BY TYPE ID
------------------*/
-
 function get_news_posts_per_type_id($request)
 {
 
@@ -119,6 +110,31 @@ function get_news_posts_per_type_id($request)
 
 	return $response;
 }
+function get_questions_posts_per_thematique_id($request)
+{
+	$excluded_ids = $request->get_param('excluded_ids');
+	$excludedArray = explode(',', $excluded_ids);
+
+	$thematiqueId = $request['thematiqueId'];
+	$args = array(
+		"post_type" => "questions",
+		"posts_per_page" => -1,
+		"post__not_in" => $excludedArray,
+		'tax_query' => array(
+			array(
+				'taxonomy' => 'thematiques',
+				'field' => 'term_id',
+				'terms' => $thematiqueId
+			)
+		)
+	);
+	$postDatas = get_posts($args);
+	$response = new WP_REST_Response($postDatas);
+	$response->set_status(200);
+
+	return $response;
+}
+
 function build_news_posts_feed_all($request)
 {
 
@@ -212,26 +228,77 @@ function build_news_posts_feed_per_type_id($request)
 	return $response;
 }
 
-function get_questions_posts_per_thematique_id($request)
+function build_brochure_archive_rows()
 {
-	$excluded_ids = $request->get_param('excluded_ids');
-	$excludedArray = explode(',', $excluded_ids);
-
-	$thematiqueId = $request['thematiqueId'];
 	$args = array(
-		"post_type" => "questions",
-		"posts_per_page" => -1,
-		"post__not_in" => $excludedArray,
-		'tax_query' => array(
+		'post_type' => 'brochures',
+		'posts_per_page' => -1,
+		'post_status' => 'publish',
+		'order' => 'DESC',
+		'orderby' => 'date',
+		'meta_key'      => 'brochure_pdf',
+		'meta_value' => '',
+		'meta_compare' => '!=',
+		// ICI METAQUERY FOR LE PDF
+	);
+	$brochuresPosts = new WP_Query($args);
+
+	ob_start();
+	get_template_part(
+		'template-components/archives/brochure-rows',
+		null,
 		array(
-				'taxonomy' => 'thematiques',
-				'field' => 'term_id',
-				'terms' => $thematiqueId
-			)
+			'brochuresPosts' => $brochuresPosts,
 		)
 	);
-	$postDatas = get_posts($args);
-	$response = new WP_REST_Response($postDatas);
+	$html_template = ob_get_clean();
+
+
+
+	$response_data = array(
+		'posts' => $brochuresPosts->posts,
+		'html_template' => $html_template,
+		'total_posts_found' => count($brochuresPosts->posts),
+	);
+
+	$response = new WP_REST_Response($response_data);
+	$response->set_status(200);
+
+	return $response;
+}
+function build_fiches_info_archive_rows()
+{
+	$args = array(
+		'post_type' => 'fiches-infos',
+		'posts_per_page' => -1,
+		'post_status' => 'publish',
+		'order' => 'DESC',
+		'orderby' => 'date',
+		'meta_key'      => 'brochure_pdf',
+		'meta_value' => '',
+		'meta_compare' => '!=',
+
+	);
+	$ficheInfoPosts = new WP_Query($args);
+
+	ob_start();
+	get_template_part(
+		'template-components/archives/fiche-info-rows',
+		null,
+		array(
+			'fichesInfosPosts' => $ficheInfoPosts,
+		)
+	);
+	$html_template = ob_get_clean();
+
+
+	$response_data = array(
+		'posts' => $ficheInfoPosts->posts,
+		'html_template' => $html_template,
+		'total_posts_found' => count($ficheInfoPosts->posts),
+	);
+
+	$response = new WP_REST_Response($response_data);
 	$response->set_status(200);
 
 	return $response;

resources/css/components/filters-toolbar.css

@@ -15,6 +15,10 @@
   li {
     @apply h-auto;
   }
+
+  &__posts-results-indications {
+    @apply flex justify-between items-center;
+  }
   &__posts-results-amount {
     @apply pb-4;
 
@@ -49,6 +53,10 @@
       @apply block;
     }
   }
+
+  &__action-button--load-all {
+    @apply underline;
+  }
   &__action-button--active {
     @apply text-secondary;
     outline: transparent;

resources/css/pages/template-archive-publications.css

@@ -1,4 +1,7 @@
 .template-archives--publications {
+  section[isLoading] {
+    @apply opacity-30;
+  }
   .archives-publications-header {
     @apply bg-primary max-w-screen-xl text-white text-center mx-auto;
   }

resources/js/app.js

@@ -4,6 +4,7 @@ import singleConseil from './single-conseil';
 import SchemaBulletPointsInit from './schema-bullet-points';
 import taxonomyThematiqueFaqInit from './taxonomy-thematique-(faq)';
 import archiveNewsInit from './archive-template-news';
+import filterPublicationsInit from './archive-template-publications';
 // window.addEventListener('load', function () {});
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -11,6 +12,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
   SchemaBulletPointsInit();
   singleConseil();
   editorInit();
+
   taxonomyThematiqueFaqInit();
+  // NEWS
   archiveNewsInit();
+  // PUBLICATIONS
+  filterPublicationsInit();
 });

resources/js/archive-template-publications.js

@@ -0,0 +1,161 @@
+function updateSearchResultsIndications(publicationType, e) {
+  if (!publicationType) return;
+
+  const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount');
+  const currentActiveButton = e.target;
+  let returnedElementsAmount;
+
+  switch (publicationType) {
+    case 'brochures':
+      returnedElementsAmount = document.querySelectorAll(
+        '.brochures-archives .publications-grid__row'
+      ).length;
+      searchResultsComponent.classList.add('filter-active');
+      searchResultsComponent.classList.remove('filter-disable');
+      searchResultsComponent.querySelector('.results-filter-name').innerHTML =
+        'Brochures Thématiques';
+
+      break;
+
+    case 'fiches-infos':
+      returnedElementsAmount = document.querySelectorAll(
+        '.fiches-infos-archives .publications-grid__row'
+      ).length;
+      searchResultsComponent.classList.add('filter-active');
+      searchResultsComponent.classList.remove('filter-disable');
+      searchResultsComponent.querySelector('.results-filter-name').innerHTML = 'Fiches infos';
+      break;
+
+    case 'webinaires':
+      returnedElementsAmount = document.querySelectorAll(
+        '.videos-webinaires-archives .publications-grid__row'
+      ).length;
+      searchResultsComponent.classList.add('filter-active');
+      searchResultsComponent.classList.remove('filter-disable');
+      searchResultsComponent.querySelector('.results-filter-name').innerHTML =
+        'Vidéos et Webinaires';
+      break;
+    case 'all':
+      const brochureElementsAmount = document.querySelectorAll(
+        '.fiches-infos-archives .publications-grid__row'
+      ).length;
+      const webinairesElementsAmount = document.querySelectorAll(
+        '.videos-webinaires-archives .publications-grid__row'
+      ).length;
+      const fichesInfosElementsAmount = document.querySelectorAll(
+        '.fiches-infos-archives .publications-grid__row'
+      ).length;
+      returnedElementsAmount =
+        fichesInfosElementsAmount + webinairesElementsAmount + brochureElementsAmount;
+
+      searchResultsComponent.classList.add('filter-disable');
+      searchResultsComponent.classList.remove('filter-active');
+      break;
+    default:
+      searchResultsComponent.classList.add('filter-disable');
+      searchResultsComponent.classList.remove('filter-active');
+      return;
+  }
+
+  const postAmountSpan = searchResultsComponent.querySelector('.results-amount');
+  postAmountSpan.innerHTML = returnedElementsAmount;
+}
+function toggleActiveFilterButton(e) {
+  const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
+
+  filterButtons.forEach((button) => {
+    button.classList.remove('filters-toolbar__action-button--active');
+  });
+
+  const activeFilterButton = e.target.getAttribute('data-publication-type')
+    ? e.target
+    : e.target.parentElement.getAttribute('data-publication-type')
+    ? e.target.parentElement
+    : null;
+  activeFilterButton.classList.add('filters-toolbar__action-button--active');
+}
+
+async function hydrateBrochureArchiveGrid() {
+  const response = await fetch(`/wp-json/homegrade-datas/v1/build/brochures-archive-rows`);
+  brochuresDatas = await response.json();
+
+  const brochureRows = document.querySelector('.brochures-archives #brochures-rows');
+  brochureRows.innerHTML = brochuresDatas.html_template;
+}
+
+async function hydrateFicheInfoArchiveGrid() {
+  const response = await fetch(`/wp-json/homegrade-datas/v1/build/fiche-info-archive-rows`);
+  ficheInfosDatas = await response.json();
+
+  const ficheInfoRows = document.querySelector('.fiches-infos-archives #fiche-infos-rows');
+  ficheInfoRows.innerHTML = ficheInfosDatas.html_template;
+}
+async function hydrateAll() {
+  await hydrateBrochureArchiveGrid();
+  await hydrateFicheInfoArchiveGrid();
+}
+async function filterPublications(publicationType, e) {
+  const sectionFichesInfos = document.querySelector('.fiches-infos-archives');
+  const sectionBrochures = document.querySelector('.brochures-archives');
+  const sectionWebinaires = document.querySelector('.videos-webinaires-archives');
+
+  sectionFichesInfos.removeAttribute('hidden');
+  sectionWebinaires.removeAttribute('hidden');
+  sectionBrochures.removeAttribute('hidden');
+
+  switch (publicationType) {
+    case 'all':
+      sectionBrochures.setAttribute('isLoading', true);
+      sectionFichesInfos.setAttribute('isLoading', true);
+      await hydrateAll();
+      sectionBrochures.removeAttribute('isLoading');
+      sectionFichesInfos.removeAttribute('isLoading');
+      break;
+
+    case 'brochures':
+      sectionFichesInfos.setAttribute('hidden', true);
+      sectionWebinaires.setAttribute('hidden', true);
+
+      sectionBrochures.setAttribute('isLoading', true);
+      await hydrateBrochureArchiveGrid();
+      sectionBrochures.removeAttribute('isLoading');
+      break;
+
+    case 'fiches-infos':
+      sectionBrochures.setAttribute('hidden', true);
+      sectionWebinaires.setAttribute('hidden', true);
+
+      sectionFichesInfos.setAttribute('isLoading', true);
+      await hydrateFicheInfoArchiveGrid();
+      sectionFichesInfos.removeAttribute('isLoading');
+      break;
+
+    case 'webinaires':
+      sectionFichesInfos.setAttribute('hidden', true);
+      sectionBrochures.setAttribute('hidden', true);
+      sectionWebinaires.setAttribute('isLoading', true);
+      setTimeout(() => {
+        sectionWebinaires.removeAttribute('isLoading');
+      }, 300);
+      break;
+  }
+
+  updateSearchResultsIndications(publicationType, e);
+  toggleActiveFilterButton(e);
+}
+
+export default function filterPublicationsInit() {
+  const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
+  const loadAllbutton = document.querySelector('.filters-toolbar__action-button--load-all');
+
+  filterButtons.forEach((button) => {
+    const publicationType = button.getAttribute('data-publication-type');
+    button.addEventListener('click', (e) => {
+      filterPublications(publicationType, e);
+    });
+  });
+  loadAllbutton.addEventListener('click', (e) => {
+    const publicationType = loadAllbutton.getAttribute('data-publication-type');
+    filterPublications(publicationType, e);
+  });
+}

template-components/archives/brochure-rows.php

@@ -0,0 +1,31 @@
+<?php
+// NEEDS TO BE A QUERY POST OBJECT
+$brochuresPosts = $args['brochuresPosts'];
+?>
+
+<?php if ($brochuresPosts->have_posts()) : while ($brochuresPosts->have_posts()) : $brochuresPosts->the_post(); ?>
+		<?php
+		$brochurePdf = get_field('brochure_pdf', $args['ID']);
+		$brochureCover = get_field('brochure_cover_image', $brochurePdf['ID']);
+		$brochureEdition = get_field('brochure_edition', $args['ID']);
+		$thematique = get_the_terms($args['ID'], 'thematiques')[0];
+		$rootThematic = getParentThematique($thematique);
+		?>
+
+		<li class="publications-grid__row">
+			<?php if ($brochureCover) : ?>
+				<img class="publications-grid__cover" src="<?php echo $brochureCover['sizes']['medium'] ?>" />
+			<?php endif; ?>
+			<h2 class="publications-grid__title"><?php echo $brochurePdf['title'] ?></h2>
+			<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $rootThematic->slug ?>"><?php echo $rootThematic->name ?></p>
+
+			<?php if ($brochureEdition) : ?>
+				<p class="publications-grid__edition"><?php echo $brochureEdition ?></p>
+			<?php endif; ?>
+			<div class="publications-grid__button">
+				<a href="<?php echo $brochurePdf['url'] ?>" class=" cta cta--secondary cta--button" href="#" target="_blank"><?php echo __("Consulter le pdf", "homegrade-theme__texte-fonctionnel__publications-archive") ?></a>
+			</div>
+		</li>
+
+	<?php endwhile ?>
+<?php endif; ?>

template-components/archives/fiche-info-rows.php

@@ -0,0 +1,33 @@
+<?php
+$fichesInfosPosts = $args['fichesInfosPosts'];
+?>
+
+<?php if ($fichesInfosPosts->have_posts()) : while ($fichesInfosPosts->have_posts()) : $fichesInfosPosts->the_post(); ?>
+
+		<?php
+		$ficheInfoPdf = get_field('brochure_pdf', get_the_ID());
+		// $ficheInfoCover = get_field('brochure_cover', get_the_ID());
+		// $ficheInfoCover = get_field('brochure_cover_image', $ficheInfoPdf['ID']);
+
+		$ficheInfoEdition = get_field('brochure_edition', get_the_ID());
+		$thematique = get_the_terms(get_the_ID(), 'thematiques')[0];
+		$rootThematic = getParentThematique($thematique);
+		$rootThematicIcon = get_field('taxonomy_pictures', "thematiques_" . $rootThematic->term_id)['icon'] ?? null;
+		?>
+		<li class="publications-grid__row">
+
+			<?php if ($rootThematicIcon) : ?>
+				<img class="publications-grid__icon" src="<?php echo $rootThematicIcon['url'] ?>" />
+			<?php endif; ?>
+			<h2 class="publications-grid__title"><?php echo get_the_title() ?></h2>
+			<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $rootThematic->slug ?>"><?php echo $rootThematic->name ?></p>
+			<?php if ($ficheInfoEdition) : ?>
+				<p class="publications-grid__edition"><?php echo $ficheInfoEdition ?></p>
+			<?php endif; ?>
+
+			<div class="publications-grid__button">
+				<a href="<?php echo $brochurePdf['url'] ?>" class=" cta cta--secondary cta--button" href="#" target="_blank"><?php echo __("Consulter le pdf", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></a>
+			</div>
+		</li>
+	<?php endwhile ?>
+<?php endif; ?>

template-components/archives/webinaire-rows.php

@@ -0,0 +1,26 @@
+<?php
+
+$videosWebinairesDatas = $args['videosWebinairesDatas'];
+?>
+<?php foreach ($videosWebinairesDatas as $videoData) : ?>
+
+	<li class="publications-grid__row publications-grid--webinaires__row">
+
+		<img class="publications-grid__video-thumbnail" src="<?php echo $videoData['thumbnail']['url'] ?>" />
+
+		<h2 class="publications-grid__title"><?php echo $videoData['title'] ?></h2>
+		<?php if ($videoData['thematique']) : ?>
+			<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $videoData['thematique']->slug ?>"><?php echo $videoData['thematique']->name ?></p>
+		<?php endif; ?>
+		<?php if (!$videoData['thematique']) : ?>
+			<p class="publications-grid__thematique thematique-tag thematique-tag--general"><?php echo __("Général", "homegrade-theme_texte-fonctionnel") ?></p>
+		<?php endif; ?>
+		<p class="publications-grid__edition"><?php echo $videoData['date'] ?></p>
+
+
+		<div class="publications-grid__button">
+			<a href="<?php echo $videoData['url'] ?>" class=" cta cta--secondary cta--button" target="_blank"><?php echo __("Voir la vidéo", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></a>
+		</div>
+	</li>
+
+<?php endforeach; ?>

template-publications.php

@@ -66,7 +66,8 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 	<?php /* -------
 		FILTERS
  ---------------*/ ?>
-	<div class="filters-toolbar filters-toolbar--archive-news">
+	<div class="filters-toolbar filters-toolbar--archive-publications">
+		<div class="filters-toolbar__posts-results-indications">
 			<p class="filters-toolbar__posts-results-amount filter-disable" role="status">
 				<span class="results-amount">
 					<?php echo $total_posts_found ?>
@@ -82,26 +83,29 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 					<?php echo __("categorie", "homegrade-theme__texte-fonctionnel"); ?>
 				</span>
 			</p>
+			<button class="filters-toolbar__action-button--load-all" data-term-id="all" data-publication-type="all"><?php echo __("Afficher toutes les publications", "homegra-theme_texte-fonctionnel") ?></button>
+
+		</div>
+
 
 		<ul>
 			<li>
-				<button class="filters-toolbar__action-button" data-term-id="all" data-term-name="all">Tous</button>
+				<button class="filters-toolbar__action-button" data-term-id="all" data-publication-type="all">Tous</button>
 			</li>
 			<li>
-				<button class="filters-toolbar__action-button" data-term-id="brochure-thématique" data-term-name="all">
+				<button class="filters-toolbar__action-button" data-publication-type="brochures">
 					<img class="icon" src="<?php echo get_template_directory_uri() . '/resources/img/pictogrammes/pictogramme-brochures.svg' ?>" alt='' />
-
 					<?php echo __("Brochures thématiques", "homegrade-theme__texte-fonctionnel") ?>
 				</button>
 			</li>
 			<li>
-				<button class="filters-toolbar__action-button" data-term-id="fiches-infos" data-term-name="fiches-infos">
+				<button class="filters-toolbar__action-button" data-publication-type="fiches-infos">
 					<img class="icon" src="<?php echo get_template_directory_uri() . '/resources/img/pictogrammes/pictogramme-fiches.svg' ?>" alt='' />
 					<?php echo __("Fiches Infos", "homegrade-theme__texte-fonctionnel") ?>
 				</button>
 			</li>
 			<li>
-				<button class="filters-toolbar__action-button" data-term-id="all" data-term-name="all">
+				<button class="filters-toolbar__action-button" data-publication-type="webinaires">
 					<img class="icon" src="<?php echo get_template_directory_uri() . '/resources/img/pictogrammes/pictogramme-videos.svg' ?>" alt='' />
 					<?php echo __("Vidéos & Webinaires", "homegrade-theme__texte-fonctionnel") ?>
 				</button>
@@ -115,9 +119,13 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
  -----------------*/ ?>
 	<section class="brochures-archives">
 		<div class="section_titling section_titling--left">
+
 			<h2 class="section_titling__title"><?php echo __("Nos Brochures thématiques", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></h2>
 			<p class="section_titling__subtitle">Curabitur eleifend neque eu erat lacinia tincidunt</p>
 		</div>
+		<!-- HIGHLIGHTED BROCHURE -->
+		<div class="highlighted-publication">
+
 			<?php
 			$highlightedBrochure = get_field('highlighted_brochure', $current_page_id) ?? null;
 			$highlightedBrochurePdf = get_field('brochure_pdf', $highlightedBrochure['post']) ?? null;
@@ -125,7 +133,6 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 			$highlightedBrochureComment = get_field('highlighted_brochure_comment', $current_page_id) ?? null;
 			?>
 			<?php if ($highlightedBrochurePdf) : ?>
-			<div class="highlighted-publication">
 				<div class="highlighted-publication__infos">
 
 					<div class="highlighted-publication__titling">
@@ -146,39 +153,24 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 					<img class="highlighted-publication__cover" src='<?php echo $highlightedBrochureCover['sizes']['large'] ?>' />
 				<?php endif; ?>
 
-			</div>
+
 			<?php endif; ?>
+		</div>
 
-
-
-		<ul class="brochures-grid">
-			<?php if ($brochuresPosts->have_posts()) : while ($brochuresPosts->have_posts()) : $brochuresPosts->the_post(); ?>
+		<!-- BROCHURES GRID -->
+		<ul id="brochures-rows" class="publications-grid">
 			<?php
-					$brochurePdf = get_field('brochure_pdf', $args['ID']);
-					$brochureCover = get_field('brochure_cover_image', $brochurePdf['ID']);
-					$brochureEdition = get_field('brochure_edition', $args['ID']);
-					$thematique = get_the_terms($args['ID'], 'thematiques')[0];
-					$rootThematic = getParentThematique($thematique);
+			get_template_part(
+				'template-components/archives/brochure-rows',
+				null,
+				array(
+					'brochuresPosts' => $brochuresPosts,
+				)
+			)
 			?>
-
-					<li class="publications-grid__row">
-						<?php if ($brochureCover) : ?>
-							<img class="publications-grid__cover" src="<?php echo $brochureCover['sizes']['medium'] ?>" />
-						<?php endif; ?>
-						<h2 class="publications-grid__title"><?php echo $brochurePdf['title'] ?></h2>
-						<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $rootThematic->slug ?>"><?php echo $rootThematic->name ?></p>
-
-						<?php if ($brochureEdition) : ?>
-							<p class="publications-grid__edition"><?php echo $brochureEdition ?></p>
-						<?php endif; ?>
-						<div class="publications-grid__button">
-							<a href="<?php echo $brochurePdf['url'] ?>" class=" cta cta--secondary cta--button" href="#" target="_blank"><?php echo __("Consulter le pdf", "homegrade-theme__texte-fonctionnel__publications-archive") ?></a>
-						</div>
-					</li>
-
-				<?php endwhile ?>
-			<?php endif; ?>
 		</ul>
+
+		<!-- LOAD MORE -->
 		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de brochures", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
 		<?php wp_reset_postdata(); ?>
 
@@ -195,37 +187,16 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 		</div>
 
 
-		<ul class="publications-grid">
-			<?php if ($fichesInfosPosts->have_posts()) : while ($fichesInfosPosts->have_posts()) : $fichesInfosPosts->the_post(); ?>
-
+		<ul id="fiche-infos-rows" class="publications-grid">
 			<?php
-					$ficheInfoPdf = get_field('brochure_pdf', get_the_ID());
-					// $ficheInfoCover = get_field('brochure_cover', get_the_ID());
-					// $ficheInfoCover = get_field('brochure_cover_image', $ficheInfoPdf['ID']);
-
-					$ficheInfoEdition = get_field('brochure_edition', get_the_ID());
-					$thematique = get_the_terms(get_the_ID(), 'thematiques')[0];
-					$rootThematic = getParentThematique($thematique);
-					$rootThematicIcon = get_field('taxonomy_pictures', "thematiques_" . $rootThematic->term_id)['icon'] ?? null;
+			get_template_part(
+				'template-components/archives/fiche-info-rows',
+				null,
+				array(
+					'fichesInfosPosts' => $fichesInfosPosts,
+				)
+			)
 			?>
-					<li class="publications-grid__row">
-
-						<?php if ($rootThematicIcon) : ?>
-							<img class="publications-grid__icon" src="<?php echo $rootThematicIcon['url'] ?>" />
-						<?php endif; ?>
-						<h2 class="publications-grid__title"><?php echo get_the_title() ?></h2>
-						<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $rootThematic->slug ?>"><?php echo $rootThematic->name ?></p>
-						<?php if ($ficheInfoEdition) : ?>
-							<p class="publications-grid__edition"><?php echo $ficheInfoEdition ?></p>
-						<?php endif; ?>
-
-						<div class="publications-grid__button">
-							<a href="<?php echo $brochurePdf['url'] ?>" class=" cta cta--secondary cta--button" href="#" target="_blank"><?php echo __("Consulter le pdf", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></a>
-						</div>
-					</li>
-				<?php endwhile ?>
-			<?php endif; ?>
-
 		</ul>
 		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
 		<?php wp_reset_postdata(); ?>
@@ -243,8 +214,9 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 		$highlightedWebinaire = get_field('highlighted_webinaire', $current_page_id) ?? null;
 
 		?>
-		<?php if ($highlightedBrochurePdf) : ?>
+		<!-- HIGHLIGHTED WEBINAIRE -->
 		<div class="highlighted-publication">
+			<?php if ($highlightedWebinaire) : ?>
 				<div class="highlighted-publication__infos">
 					<div class="highlighted-publication__titling">
 						<div class="highlighted-publication__titling__icon">
@@ -272,35 +244,20 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 
 				<?php endif; ?>
 
+			<?php endif; ?>
 		</div>
-		<?php endif; ?>
 
 
-		<ul class="publications-grid publications-grid--webinaires">
-
-			<?php foreach ($videosWebinairesDatas as $videoData) : ?>
-
-				<li class="publications-grid__row publications-grid--webinaires__row">
-
-					<img class="publications-grid__video-thumbnail" src="<?php echo $videoData['thumbnail']['url'] ?>" />
-
-					<h2 class="publications-grid__title"><?php echo $videoData['title'] ?></h2>
-					<?php if ($videoData['thematique']) : ?>
-						<p class="publications-grid__thematique thematique-tag thematique-tag--<?php echo $videoData['thematique']->slug ?>"><?php echo $videoData['thematique']->name ?></p>
-					<?php endif; ?>
-					<?php if (!$videoData['thematique']) : ?>
-						<p class="publications-grid__thematique thematique-tag thematique-tag--general"><?php echo __("Général", "homegrade-theme_texte-fonctionnel") ?></p>
-					<?php endif; ?>
-					<p class="publications-grid__edition"><?php echo $videoData['date'] ?></p>
-
-
-					<div class="publications-grid__button">
-						<a href="<?php echo $videoData['url'] ?>" class=" cta cta--secondary cta--button" target="_blank"><?php echo __("Voir la vidéo", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></a>
-					</div>
-				</li>
-
-			<?php endforeach; ?>
-
+		<ul id="webinaires-rows" class="publications-grid publications-grid--webinaires">
+			<?php
+			get_template_part(
+				'template-components/archives/webinaire-rows',
+				null,
+				array(
+					'videosWebinairesDatas' => $videosWebinairesDatas,
+				)
+			)
+			?>
 		</ul>
 		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
 		<?php wp_reset_postdata(); ?>