From 5ef154d7469900eb95b3d67d8bc2697a1e2c13e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cbc-yevhenii-buliuk=E2=80=9D?= <“yevhenii.buliuk@bigcommerce.com”> Date: Mon, 11 Dec 2023 16:08:03 +0200 Subject: [PATCH] feat(storefront): BCTHEME-1750 Update Shop By Price Widget --- CHANGELOG.md | 3 +- assets/js/theme/category.js | 16 +++++-- assets/js/theme/common/faceted-search.js | 14 ++++++- .../stencil/facetedSearch/_facetedSearch.scss | 4 ++ assets/scss/layouts/sidebar/_block.scss | 6 +++ .../components/category/shop-by-price.html | 37 ++++------------ templates/components/category/sidebar.html | 2 +- .../faceted-search/facets/range.html | 42 +------------------ .../components/faceted-search/range-form.html | 41 ++++++++++++++++++ 9 files changed, 88 insertions(+), 77 deletions(-) create mode 100644 templates/components/faceted-search/range-form.html diff --git a/CHANGELOG.md b/CHANGELOG.md index f2ea897af6..e8ead37ee9 100644 --- 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 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}} +
+
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+