diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e60c73fa6..82b4fe243d 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js index aa3e5fcbd9..b3b30cb69c 100644 --- a/assets/js/theme/category.js +++ b/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')); diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js index 48b51505db..a94adda37f 100644 --- 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,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')); }); } diff --git a/assets/scss/components/stencil/facetedSearch/_facetedSearch.scss b/assets/scss/components/stencil/facetedSearch/_facetedSearch.scss index 3ed11b24c4..8b1d32969c 100644 --- 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 index dfe601e22c..62e1352b8a 100644 --- 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 index d1122b67f4..b913072680 100644 --- 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}}
-

{{lang 'category.shop_by_price'}}

- + {{> components/faceted-search/range-form shop_by_price=theme_settings.shop_by_price_visibility}} + +
+ {{lang 'category.reset'}} + {{lang 'category.filter_reset_announcement'}} +
{{/and}} diff --git a/templates/components/category/sidebar.html b/templates/components/category/sidebar.html index 17b01fcc45..7f7d9d803b 100644 --- a/templates/components/category/sidebar.html +++ b/templates/components/category/sidebar.html @@ -15,6 +15,6 @@

{{category.name}}

{{#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}} diff --git a/templates/components/faceted-search/facets/range.html b/templates/components/faceted-search/facets/range.html index 6fd95bc3d6..4603de546e 100644 --- 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}}
-
- - {{#if this.sort}} - - {{/if}} -
-
-
- -
- -
- -
- -
- -
-
- -
-
-
+ {{> components/faceted-search/range-form}}
diff --git a/templates/components/faceted-search/range-form.html b/templates/components/faceted-search/range-form.html new file mode 100644 index 0000000000..a522ac1b2a --- /dev/null +++ b/templates/components/faceted-search/range-form.html @@ -0,0 +1,41 @@ +
+ + {{#if this.sort}} + + {{/if}} +
+
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+