Fix collection filtering UX (Shopify#268)

* Add setting to enable filtering drawer on larger devices. Adjust button styling * Update styling. Tighten spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update styles and spacing for filters * Adjust font sizes for filters * Adjust alignment and spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update link style for clear * Update from Shopify for theme dawn/fix-collection-filtering-ux * Address design feedback * Update locales * Update locales/cs.schema.json * Update locales/da.schema.json * Update locales/de.schema.json * Update locales/es.schema.json * Update locales/fi.schema.json * Update locales/fr.schema.json * Update locales/it.schema.json * Update locales/ja.schema.json * Update locales/ko.schema.json * Update locales/nb.schema.json * Update locales/nl.schema.json * Update locales/pl.schema.json * Update locales/pt-BR.schema.json * Update locales/pt-PT.schema.json * Update locales/sv.schema.json * Update locales/th.schema.json * Update locales/tr.schema.json * Update locales/vi.schema.json * Update locales/zh-CN.schema.json * Update locales/zh-TW.schema.json * Remove bubble for price filtering Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <35075727+translation-platform@users.noreply.github.com>
hyttefeber · Aug 5, 2021 · 3984d5f · 3984d5f
1 parent 5e2ddba
commit 3984d5f
Show file tree

Hide file tree

Showing 28 changed files with 632 additions and 349 deletions.
diff --git a/assets/collection-filters-form.js b/assets/collection-filters-form.js
@@ -60,21 +60,28 @@ class CollectionFiltersForm extends HTMLElement {
         this.filterData = [...this.filterData, { html, url }];
         this.renderFilters(html, event);
         this.renderProductGrid(html);
+        this.renderProductCount(html);
       });
   }
 
   renderSectionFromCache(filterDataUrl, event) {
     const html = this.filterData.find(filterDataUrl).html;
     this.renderFilters(html, event);
     this.renderProductGrid(html);
+    this.renderProductCount(html);
   }
 
   renderProductGrid(html) {
-    const innerHTML = new DOMParser()
-      .parseFromString(html, 'text/html')
-      .getElementById('CollectionProductGrid').innerHTML;
+    document.getElementById('CollectionProductGrid').innerHTML = new DOMParser().parseFromString(html, 'text/html').getElementById('CollectionProductGrid').innerHTML;
+  }
 
-    document.getElementById('CollectionProductGrid').innerHTML = innerHTML;
+  renderProductCount(html) {
+    const count = new DOMParser().parseFromString(html, 'text/html').getElementById('CollectionProductCount').innerHTML
+    const containerDesktop = document.getElementById('CollectionProductCountDesktop');
+    document.getElementById('CollectionProductCount').innerHTML = count;
+    if (containerDesktop) {
+      containerDesktop.innerHTML = count;
+    }
   }
 
   renderFilters(html, event) {
@@ -112,6 +119,7 @@ class CollectionFiltersForm extends HTMLElement {
     const mobileElementSelectors = ['.mobile-facets__open', '.mobile-facets__count', '.sorting'];
 
     mobileElementSelectors.forEach((selector) => {
+      if (!html.querySelector(selector)) return;
       document.querySelector(selector).innerHTML = html.querySelector(selector).innerHTML;
     });