Vertical filter UX follow ups (#1568)

* Vertical filter follow ups * Fix button alignment * Fix search sort * Fix sort * Fix wrapping * Fix overflow * Fix empty space * Fix button no js * Fix button style * Fix filter column * Apply secondary style * Apply button * Fix search * Fix no-js layout for drawer and product count position (#1572) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Update margin formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Update padding formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Add hidden inputs to preserve search queries (#1585) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Add hidden inputs to preserve search queries Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com>
Shopify · Apr 6, 2022 · d37c2e0 · d37c2e0
1 parent c60f8ce
commit d37c2e0
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 155 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -9,6 +9,10 @@
   margin-bottom: 0.5rem;
 }
 
+.mobile-facets__list {
+  overflow-y: auto;
+}
+
 @media screen and (min-width: 750px) {
   .facets-container > * + * {
     margin-top: 0;
@@ -988,6 +992,14 @@ input.mobile-facets__checkbox {
     padding-right: 3rem;
   }
 
+  .facets-vertical .facets-wrapper--no-filters {
+    display: none;
+  }
+
+  .no-js .facets-vertical .facets-wrapper--no-filters {
+    display: block;
+  }
+
   .facets-vertical .product-grid-container {
     width: 100%;
   }
@@ -1007,6 +1019,7 @@ input.mobile-facets__checkbox {
 
   .facets-vertical .no-js .facets__button-no-js {
     transform: none;
+    margin-left: 0;
   }
 
   .facets-vertical .no-js .facet-filters__field {
@@ -1027,8 +1040,9 @@ input.mobile-facets__checkbox {
     margin-bottom: 1.5rem;
   }
 
-  .facets-vertical .facet-filters.sorting.no-js {
+  .no-js .facets-vertical .facet-filters.sorting {
     padding-left: 0;
+    flex-direction: column;
   }
 
   .facets-vertical .facet-checkbox input[type='checkbox'] {
@@ -1056,44 +1070,27 @@ input.mobile-facets__checkbox {
   .facets-container-drawer {
     display: flex;;
     flex-flow: row wrap;
+    align-items: center;
     column-gap: 0;
   }
 
   .facets-container-drawer .mobile-facets__wrapper  {
     margin-right: 2rem;
+    flex-grow: 1;
   }
 
   .facets-container-drawer .product-count {
-    align-self: flex-start;
-  }
-
-  .facets-container-drawer .mobile-facets__wrapper {
-    width: calc(40% - 2rem);
+    margin: 0 0 0.5rem 3.5rem;
   }
 
-  .facets-container-drawer .facets {
-    width: 40%;
+  .facets-container-drawer .facets-pill {
+    width: 100%;
   }
 
-  .facets-container-drawer .product-count {
-    width: 20%;
-  }
 
   .facets-container-drawer .facets__form {
     display: block;
   }
-
-  .no-js .facets-container-drawer .mobile-facets__wrapper  {
-    width: calc(20% - 2rem);
-  }
-
-  .no-js  .facets-container-drawer .facets {
-    width: 60%;
-  }
-
-  .no-js .facets-container-drawer .product-count {
-    width: 20%;
-  }
 }
 
 @media screen and (min-width: 750px) and (max-width: 989px) {
@@ -1104,6 +1101,6 @@ input.mobile-facets__checkbox {
   }
 
   .facets-vertical .active-facets__button-remove {
-    padding: 1rem;
+    padding: 0 1rem 1rem;
   }
 }
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -47,7 +47,7 @@
             </div>
           </div>
           <noscript>
-            <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+            <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
           </noscript>
         </div>
 
@@ -76,8 +76,8 @@
   <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
     {{ 'component-facets.css' | asset_url | stylesheet_tag }}
     <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
-    {%- if section.settings.enable_filtering -%}
-      <aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
+    {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
+      <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
         {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
       </aside>
     {%- endif -%}

diff --git a/sections/main-search.liquid b/sections/main-search.liquid
@@ -151,7 +151,7 @@
               </div>
             </div>
             <noscript>
-              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+              <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
             </noscript>
           </div>
 
@@ -179,7 +179,7 @@
     <div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
       {%- if search.filters != empty -%}
         {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
-          <aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
+          <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
             {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
           </aside>
         {%- endif -%}