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

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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)
+- Update Shop By Price Widget [#2408](https://github.com/bigcommerce/cornerstone/pull/2408)
 - 'Please Select a file' popup forces shopper to re-upload file if the option type is 'File Upload' and is set to required [#2409](https://github.com/bigcommerce/cornerstone/pull/2409)
 - Top Global Region Image Widget overlaps the mobile menu [#2402](https://github.com/bigcommerce/cornerstone/pull/2402)
 - Changed default PayPal checkout button color [#2405](https://github.com/bigcommerce/cornerstone/pull/2405)

assets/js/theme/category.js

@@ -36,11 +36,21 @@ 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);
+
+            // Refresh range view when shop-by-price enabled
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (urlParams.has('search_query')) {
+                $('.reset-filters').show();
+            }
+
+            $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+            $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
         }
 
         $('a.reset-btn').on('click', () => this.setLiveRegionsAttributes($('span.reset-message'), 'status', 'polite'));

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,6 +131,16 @@ class FacetedSearch {
 
             // Refresh view with new content
             this.refreshView(content);
+
+            // Refresh range view when shop-by-price enabled
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (urlParams.has('search_query')) {
+                $('.reset-filters').show();
+            }
+
+            $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+            $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
         });
     }
 

assets/scss/components/stencil/facetedSearch/_facetedSearch.scss

@@ -122,3 +122,7 @@
         font-weight: bold;
     }
 }
+
+.reset-filters {
+    display: none;
+}

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));
+        }
+    }
 }

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}}

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>

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>

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>