Add support for boolean filters

Shopify · Mar 7, 2022 · e9bb4cc · e9bb4cc
1 parent 622e859
commit e9bb4cc
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
@@ -16,7 +16,7 @@
   assign total_active_values = 0
   if results.url
     assign results_url = results.url
-  else 
+  else
     assign terms = results.terms | escape
     assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
   endif
@@ -41,7 +41,7 @@
             {%- for filter in results.filters -%}
               {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
               {% case filter.type %}
-              {% when 'list' %}
+              {% when 'boolean' or 'list' %}
                 <details id="Details-{{ forloop.index }}-{{ section.id }}" class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
                   <summary class="facets__summary caption-large focus-offset">
                     <div>
@@ -172,7 +172,7 @@
                 <facet-remove>
                   <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                     <span class="active-facets__button-inner button button--tertiary">
-                      {{ value.label | escape }}
+                      {{ filter.label }}: {{ value.label | escape }}
                       {% render 'icon-close-small' %}
                       <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                     </span>
@@ -245,7 +245,7 @@
               <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
             </svg>
           </div>
-        </div>          
+        </div>
       </form>
     </facet-filters-form>
   {%- endunless -%}
@@ -295,11 +295,11 @@
             <div class="mobile-facets__main gradient">
               {%- for filter in results.filters -%}
                 {% case filter.type %}
-                {% when 'list' %}
+                {% when 'boolean' or 'list' %}
                   <details id="Details-Mobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                     <summary class="mobile-facets__summary focus-inset">
                       <div>
-                        <span>{{ filter.label | escape }}</span>                        
+                        <span>{{ filter.label | escape }}</span>
                         <span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
                         <noscript>{% render 'icon-caret' %}</noscript>
                       </div>
@@ -446,7 +446,7 @@
             {%- if results.terms -%}
               <input type="hidden" name="q" value="{{ results.terms | escape }}">
               <input name="options[prefix]" type="hidden" value="last">
-            {%- endif -%}            
+            {%- endif -%}
           </div>
         </form>
       </facet-filters-form>
@@ -459,7 +459,7 @@
         <facet-remove>
           <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
             <span class="active-facets__button-inner button button--tertiary">
-              {{ value.label | escape }}
+              {{ filter.label }}: {{ value.label | escape }}
               {% render 'icon-close-small' %}
               <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
             </span>
@@ -505,4 +505,4 @@
       </svg>
     </div>
   </div>
-</div>
+</div>