[Facets] support dynamic facet lists

Shopify · Nov 28, 2023 · 35b72c5 · 35b72c5
1 parent 2c84724
commit 35b72c5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 21 deletions.
diff --git a/assets/facets.js b/assets/facets.js
@@ -34,7 +34,9 @@ class FacetFiltersForm extends HTMLElement {
     const sections = FacetFiltersForm.getSections();
     const countContainer = document.getElementById('ProductCount');
     const countContainerDesktop = document.getElementById('ProductCountDesktop');
-    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
     loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
     document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
     if (countContainer) {
@@ -100,25 +102,54 @@ class FacetFiltersForm extends HTMLElement {
       containerDesktop.innerHTML = count;
       containerDesktop.classList.remove('loading');
     }
-    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
     loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
   }
 
   static renderFilters(html, event) {
     const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
-
-    const facetDetailsElements = parsedHTML.querySelectorAll(
+    const sfrFacetDetailsElements = parsedHTML.querySelectorAll(
       '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
     );
-    const matchesIndex = (element) => {
+    const currentFacetDetailsElements = document.querySelectorAll(
+      '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
+    );
+
+    // Remove facets that are no longer returned from the server
+    Array.from(currentFacetDetailsElements).forEach((currElement) => {
+      if (Array.from(sfrFacetDetailsElements).some(({ id }) => currElement.id === id) === false) {
+        currElement.remove();
+      }
+    });
+
+    const matchesId = (element) => {
       const jsFilter = event ? event.target.closest('.js-filter') : undefined;
-      return jsFilter ? element.dataset.index === jsFilter.dataset.index : false;
+      return jsFilter ? element.id === jsFilter.id : false;
     };
-    const facetsToRender = Array.from(facetDetailsElements).filter((element) => !matchesIndex(element));
-    const countsToRender = Array.from(facetDetailsElements).find(matchesIndex);
+    const facetsToRender = Array.from(sfrFacetDetailsElements).filter((element) => !matchesId(element));
+    const countsToRender = Array.from(sfrFacetDetailsElements).find(matchesId);
+
+    facetsToRender.forEach((element, index) => {
+      const currentEl = document.getElementById(element.id);
+      // Element already rendered in the DOM so just update the innerHTML
+      if (currentEl) {
+        document.getElementById(element.id).innerHTML = element.innerHTML;
+      } else {
+        if (index > 0) {
+          const { className: previousElClassName, id: previouesElId } = facetsToRender[index - 1];
+          // Same facet type (eg horizontal/vertical or drawer/mobile)
+          if (element.className === previousElClassName) {
+            document.getElementById(previouesElId).after(element);
+            return;
+          }
+        }
 
-    facetsToRender.forEach((element) => {
-      document.querySelector(`.js-filter[data-index="${element.dataset.index}"]`).innerHTML = element.innerHTML;
+        if (element.parentElement) {
+          document.querySelector(`#${element.parentElement.id} .js-filter`).before(element);
+        }
+      }
     });
 
     FacetFiltersForm.renderActiveFacets(parsedHTML);
@@ -131,12 +162,11 @@ class FacetFiltersForm extends HTMLElement {
         FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
         FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
 
-        const newElementSelector = document
-          .getElementById(closestJSFilterID)
-          .classList.contains('mobile-facets__details')
-          ? `#${closestJSFilterID} .mobile-facets__close-button`
-          : `#${closestJSFilterID} .facets__summary`;
-        const newElementToActivate = document.querySelector(newElementSelector);
+        const newFacetDetailsEl = document.getElementById(closestJSFilterID);
+        const newElementSelector = newFacetDetailsEl.classList.contains('mobile-facets__details')
+          ? `.mobile-facets__close-button`
+          : `.facets__summary`;
+        const newElementToActivate = newFacetDetailsEl.querySelector(newElementSelector);
         if (newElementToActivate) newElementToActivate.focus();
       }
     }

diff --git a/snippets/facets.liquid b/snippets/facets.liquid
@@ -129,7 +129,7 @@
               {% case filter.type %}
                 {% when 'boolean', 'list' %}
                   <details
-                    id="Details-{{ forloop.index }}-{{ section.id }}"
+                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                     class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                     data-index="{{ forloop.index }}"
                     {% if filter_type == 'vertical' and forloop.index == 1 %}
@@ -365,7 +365,7 @@
                     endif
                   %}
                   <details
-                    id="Details-{{ forloop.index }}-{{ section.id }}"
+                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                     class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                     data-index="{{ forloop.index }}"
                     {% if filter_type == 'vertical' and forloop.index == 1 %}
@@ -682,7 +682,10 @@
                 </p>
               </div>
             </div>
-            <div class="mobile-facets__main has-submenu gradient">
+            <div
+              id="FacetsWrapperMobile"
+              class="mobile-facets__main has-submenu gradient"
+            >
               {%- if enable_filtering -%}
                 {%- for filter in results.filters -%}
                   {% liquid
@@ -699,7 +702,7 @@
                   {% case filter.type %}
                     {% when 'boolean', 'list' %}
                       <details
-                        id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
+                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                         class="mobile-facets__details js-filter"
                         data-index="mobile-{{ forloop.index }}"
                       >
@@ -845,7 +848,7 @@
                         endif
                       %}
                       <details
-                        id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
+                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                         class="mobile-facets__details js-filter"
                         data-index="mobile-{{ forloop.index }}"
                       >
@@ -959,6 +962,7 @@
 
               {%- if enable_sorting -%}
                 <div
+                  id="Details-Mobile-SortBy-{{ section.id }}"
                   class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}"
                   data-index="mobile-{{ forloop.index }}"
                 >