FEATURE Handling Reset all artisans buttons

resources/css/pages/repertoire-metiers.css

@@ -20,6 +20,9 @@
       p {
         @apply text-neutral-900 tracking-wide;
       }
+      #reset-all-artisans-button {
+        @apply mt-4 mx-auto;
+      }
     }
   }
   .card-artisans {

resources/js/dynamicSearch.js

@@ -36,6 +36,24 @@ function observeSearchResetButton() {
     }
   });
 }
+function observeResetAllArtisansButton() {
+  const resetAllArtisansButton = document.querySelector('#reset-all-artisans-button');
+  resetAllArtisansButton.addEventListener('click', () => {
+    resetSearchfield();
+    hydrateWithAllArtisans({});
+  });
+}
+function observeNoResultsApparition() {
+  const grid = document.querySelector('.artisans-posts__grid');
+
+  const observer = new MutationObserver(() => {
+    const noResults = grid.querySelector('.no-results');
+    if (!noResults) return;
+
+    observeResetAllArtisansButton();
+  });
+  observer.observe(grid, { childList: true, subtree: true });
+}
 function clearAllCheckboxes() {
   const filtersCheckboxes = document.querySelectorAll('.taxonomy-checkbox');
 
@@ -219,7 +237,7 @@ export default function dynamicSearch() {
   });
 
   const searchForm = document.querySelector('.artisan-search-bar');
-
   searchForm.addEventListener('submit', handleSearchSubmit);
   observeSearchResetButton();
+  observeNoResultsApparition(); // Si la div no-results apparait, on observe le bouton reset all artisans pour gérer son comortement
 }

template-components/artisans/artisan-search-no-results.php

@@ -5,4 +5,7 @@
 	<img class='no-results__cover' src="<?php echo get_stylesheet_directory_uri() . "/resources/img/illustrations/Homegrade_resultats-filtres-cactus.svg"  ?>" alt='' />
 	<h3><?php echo __("Aucun artisan correspondant actuellement", "metiers-patrimoine-theme") ?> </h3>
 	<p> <?php echo  __("Sélectionnez un ou plusieurs <span class='highlighted-purple'>métiers</span> ou <span class='highlighted-purple'>critères</span> pour lancer votre recherche", "metiers-patrimoine-theme") ?></p>
+	<button class="cta cta--primary cta--rounded" id="reset-all-artisans-button">
+		<?php echo __("Voir tous les artisans", "metiers-patrimoine-theme") ?>
+	</button>
 </div>