feat(storefront): BCTHEME-1750 Update Shop By Price Widget

bigcommerce · Dec 18, 2023 · ebad942 · ebad942
1 parent 9229a0c
commit ebad942
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Display fees on cart page [#2376](https://github.com/bigcommerce/cornerstone/pull/2376)
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
 - Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
-- Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392) 
+- Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392)
+- Update Shop By Price Widget [#2408](https://github.com/bigcommerce/cornerstone/pull/2408)
 
 ## 6.12.0 (07-06-2023)
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)

diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -1,3 +1,4 @@
+import urlUtils from './common/utils/url-utils';
 import { hooks } from '@bigcommerce/stencil-utils';
 import CatalogPage from './catalog';
 import compareProducts from './global/compare-products';
@@ -36,18 +37,50 @@ export default class Category extends CatalogPage {
 
         compareProducts(this.context);
 
-        if ($('#facetedSearch').length > 0) {
-            this.initFacetedSearch();
-        } else {
+        this.initFacetedSearch();
+
+        if (!$('#facetedSearch').length) {
             this.onSortBySubmit = this.onSortBySubmit.bind(this);
             hooks.on('sortBy-submitted', this.onSortBySubmit);
+
+            const currUrl = urlUtils.getUrl();
+
+            if (currUrl.includes('search_query')) {
+                // Show reset button after sort submit
+                $('.reset-filters').show();
+
+                // Сlear shop-by-price range keys from the Local storage
+                $('.reset-filters a').on('click', () => {
+                    localStorage.removeItem('price_min');
+                    localStorage.removeItem('price_max');
+                });
+            }
+
+            $('input[name="price_min"]').on('change', event => this.saveValue(event));
+            $('input[name="price_max"]').on('change', event => this.saveValue(event));
+
+            $('input[name="price_min"]').attr('value', this.getSavedValue('price_min'));
+            $('input[name="price_max"]').attr('value', this.getSavedValue('price_max'));
         }
 
         $('a.reset-btn').on('click', () => this.setLiveRegionsAttributes($('span.reset-message'), 'status', 'polite'));
 
         this.ariaNotifyNoProducts();
     }
 
+    saveValue(event) {
+        const name = event.target.name;
+        const value = event.target.value;
+        localStorage.setItem(name, value);
+    }
+
+    getSavedValue(value) {
+        if (!localStorage.getItem(value)) {
+            return '';
+        }
+        return localStorage.getItem(value);
+    }
+
     ariaNotifyNoProducts() {
         const $noProductsMessage = $('[data-no-products-notification]');
         if ($noProductsMessage.length) {

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -17,8 +17,8 @@ const defaultOptions = {
     priceRangeErrorSelector: '#facet-range-form .form-inlineMessage',
     priceRangeFieldsetSelector: '#facet-range-form .form-fieldset',
     priceRangeFormSelector: '#facet-range-form',
-    priceRangeMaxPriceSelector: '#facet-range-form [name=max_price]',
-    priceRangeMinPriceSelector: '#facet-range-form [name=min_price]',
+    priceRangeMaxPriceSelector: $('#facetedSearch').length ? '#facet-range-form [name=max_price]' : '#facet-range-form [name=price_max]',
+    priceRangeMinPriceSelector: $('#facetedSearch').length ? '#facet-range-form [name=min_price]' : '#facet-range-form [name=price_min]',
     showMoreToggleSelector: '#facetedSearch .accordion-content .toggleLink',
     facetedSearchFilterItems: '#facetedSearch-filterItems .form-input',
     modal: modalFactory('#modal')[0],
@@ -131,9 +131,42 @@ class FacetedSearch {
 
             // Refresh view with new content
             this.refreshView(content);
+
+            // update view when shop-by-price enabled
+            const currUrl = urlUtils.getUrl();
+
+            if (currUrl.includes('search_query')) {
+                // Show reset button after shop-by-price submit
+                $('.reset-filters').show();
+
+                // Сlear shop-by-price range keys from the Local storage
+                $('.reset-filters a').on('click', () => {
+                    localStorage.removeItem('price_min');
+                    localStorage.removeItem('price_max');
+                });
+            }
+
+            $('input[name="price_min"]').on('change', event => this.saveValue(event));
+            $('input[name="price_max"]').on('change', event => this.saveValue(event));
+
+            $('input[name="price_min"]').attr('value', this.getSavedValue('price_min'));
+            $('input[name="price_max"]').attr('value', this.getSavedValue('price_max'));
         });
     }
 
+    saveValue(event) {
+        const name = event.target.name;
+        const value = event.target.value;
+        localStorage.setItem(name, value);
+    }
+
+    getSavedValue(value) {
+        if (!localStorage.getItem(value)) {
+            return '';
+        }
+        return localStorage.getItem(value);
+    }
+
     expandFacetItems($navList) {
         const id = $navList.attr('id');
 

diff --git a/assets/scss/components/stencil/facetedSearch/_facetedSearch.scss b/assets/scss/components/stencil/facetedSearch/_facetedSearch.scss
@@ -122,3 +122,7 @@
         font-weight: bold;
     }
 }
+
+.reset-filters {
+    display: none;
+}
diff --git a/assets/scss/layouts/sidebar/_block.scss b/assets/scss/layouts/sidebar/_block.scss
@@ -18,4 +18,10 @@
     font-size: remCalc(15px);
     margin-top: 0;
     text-transform: inherit;
+
+    &.heading-price {
+        @media (min-width: $screen-medium) {
+            margin-top: -(remCalc(12px));
+        }
+    }
 }
diff --git a/templates/components/category/shop-by-price.html b/templates/components/category/shop-by-price.html
@@ -1,33 +1,12 @@
-{{#and theme_settings.shop_by_price_visibility shop_by_price}}
+{{#and theme_settings.shop_by_price_visibility category.shop_by_price}}
     <div class="sidebarBlock">
-        <h2 class="sidebarBlock-heading" data-shop-by-price>{{lang 'category.shop_by_price'}}</h2>
-        <ul class="navList">
-            {{#each shop_by_price}}
-            <li class="navList-item">
-                <a 
-                    {{#if selected }} 
-                        class="navList-action is-active"
-                        role="status"
-                        aria-live="assertive"
-                   {{else}}
-                        class="navList-action"
-                   {{/if}}
-                   href="{{url}}"
-                >
-                   {{lang 'category.filter_price_range'}} {{low.formatted}} - {{high.formatted}}
-                </a>
-                <span class="price-filter-message aria-description--hidden">{{lang 'category.filter_select_announcement'}}</span>
-            </li>
-            {{/each}}
+        <h2 class="sidebarBlock-heading heading-price" data-shop-by-price>{{lang 'category.shop_by_price'}}</h2>
 
-            {{#any shop_by_price selected=true}}
-                <li class="navList-item">
-                    <a href="{{category_url}}" class="navList-action reset-btn">
-                        {{lang 'category.reset'}}
-                    </a>
-                    <span class="reset-message aria-description--hidden">{{lang 'category.filter_reset_announcement'}}</span>
-                </li>
-            {{/any}}
-        </ul>
+        {{> components/faceted-search/range-form shop_by_price=theme_settings.shop_by_price_visibility}}
+
+        <div class="reset-filters">
+            <a href="{{category.url}}" class="navList-action reset-btn">{{lang 'category.reset'}}</a>
+            <span class="reset-message aria-description--hidden">{{lang 'category.filter_reset_announcement'}}</span>
+        </div>
     </div>
 {{/and}}
diff --git a/templates/components/category/sidebar.html b/templates/components/category/sidebar.html
@@ -15,6 +15,6 @@ <h2 class="sidebarBlock-heading">{{category.name}}</h2>
     {{#if category.faceted_search_enabled}}
         {{> components/faceted-search/index category}}
     {{else}}
-        {{> components/category/shop-by-price shop_by_price=category.shop_by_price category_url=category.url}}
+        {{> components/category/shop-by-price}}
     {{/if}}
 </nav>
diff --git a/templates/components/faceted-search/facets/range.html b/templates/components/faceted-search/facets/range.html
@@ -2,46 +2,6 @@
     {{> components/faceted-search/faceted-search-navigation}}
 
     <div id="facetedSearch-content--{{dashcase facet}}" class="accordion-content{{#unless start_collapsed}} is-open{{/unless}}">
-        <form id="facet-range-form" class="form" method="get" data-faceted-search-range novalidate>
-            <input type="hidden" name="search_query" value="{{search_query}}">
-            {{#if this.sort}}
-                <input type="hidden" name="sort" value="{{this.sort}}">
-            {{/if}}
-            <fieldset class="form-fieldset">
-                <div class="form-minMaxRow">
-                    <div class="form-field">
-                        <input
-                            name="min_price"
-                            placeholder="{{lang 'search.faceted.range.min-placeholder'}}"
-                            min="0"
-                            class="form-input form-input--small"
-                            required
-                            type="number"
-                            value="{{min_price}}"
-                        />
-                    </div>
-
-                    <div class="form-field">
-                        <input
-                            name="max_price"
-                            placeholder="{{lang 'search.faceted.range.max-placeholder'}}"
-                            min="0"
-                            class="form-input form-input--small"
-                            required
-                            type="number"
-                            value="{{max_price}}"
-                        />
-                    </div>
-
-                    <div class="form-field">
-                        <button class="button button--small" type="submit">
-                            {{lang 'search.faceted.range.update'}}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="form-inlineMessage"></div>
-            </fieldset>
-        </form>
+        {{> components/faceted-search/range-form}}
     </div>
 </div>
diff --git a/templates/components/faceted-search/range-form.html b/templates/components/faceted-search/range-form.html
@@ -0,0 +1,41 @@
+<form id="facet-range-form" class="form" method="get" data-faceted-search-range novalidate>
+    <input type="hidden" name="search_query" value="{{search_query}}">
+    {{#if this.sort}}
+        <input type="hidden" name="sort" value="{{this.sort}}">
+    {{/if}}
+    <fieldset class="form-fieldset">
+        <div class="form-minMaxRow">
+            <div class="form-field">
+                <input
+                    name="{{#if shop_by_price}}price_min{{else}}min_price{{/if}}"
+                    placeholder="{{lang 'search.faceted.range.min-placeholder'}}"
+                    min="0"
+                    class="form-input form-input--small"
+                    required
+                    type="number"
+                    value="{{min_price}}"
+                />
+            </div>
+
+            <div class="form-field">
+                <input
+                    name="{{#if shop_by_price}}price_max{{else}}max_price{{/if}}"
+                    placeholder="{{lang 'search.faceted.range.max-placeholder'}}"
+                    min="0"
+                    class="form-input form-input--small"
+                    required
+                    type="number"
+                    value="{{max_price}}"
+                />
+            </div>
+
+            <div class="form-field">
+                <button class="button button--small" type="submit">
+                    {{lang 'search.faceted.range.update'}}
+                </button>
+            </div>
+        </div>
+
+        <div class="form-inlineMessage"></div>
+    </fieldset>
+</form>