From 3cb2a7ded7162ae3d8781a9f0ba616130490d4c3 Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Fri, 27 Sep 2024 11:48:55 +0300 Subject: [PATCH] fix(storefront): BCTHEME-1941 Cornerstone changes to support inc/ex tax price lists on PDP (#2486) --- CHANGELOG.md | 1 + .../js/theme/common/product-details-base.js | 24 ++- .../components/products/price-range.html | 8 +- templates/components/products/price.html | 152 +++++++++--------- 4 files changed, 97 insertions(+), 88 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e757ce2ec..2dc13c4f65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Cornerstone changes to support inc/ex tax price lists on PDP [#2486](https://github.com/bigcommerce/cornerstone/pull/2486) - Viewing Orders after logging into customer account displays incorrect quantity of products ordered compared to Order details page. [#2482](https://github.com/bigcommerce/cornerstone/pull/2482) - High severity security issue [#2477](https://github.com/bigcommerce/cornerstone/pull/2477) - Date Field Modifier - February showing 30th and 31st [#2473](https://github.com/bigcommerce/cornerstone/pull/2473) diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js index 6927d48046..547a0a8bb5 100644 --- a/assets/js/theme/common/product-details-base.js +++ b/assets/js/theme/common/product-details-base.js @@ -15,13 +15,13 @@ const optionsTypesMap = { PRODUCT_LIST: 'product-list', }; -export function optionChangeDecorator(areDefaultOtionsSet) { +export function optionChangeDecorator(areDefaultOptionsSet) { return (err, response) => { const attributesData = response.data || {}; const attributesContent = response.content || {}; this.updateProductAttributes(attributesData); - if (areDefaultOtionsSet) { + if (areDefaultOptionsSet) { this.updateView(attributesData, attributesContent); } else { this.updateDefaultAttributesForOOS(attributesData); @@ -145,8 +145,14 @@ export default class ProductDetailsBase { */ getViewModel($scope) { return { - $priceWithTax: $('[data-product-price-with-tax]', $scope), - $priceWithoutTax: $('[data-product-price-without-tax]', $scope), + priceWithTax: { + $div: $('.price--withTax', $scope), + $span: $('[data-product-price-with-tax]', $scope), + }, + priceWithoutTax: { + $div: $('.price--withoutTax', $scope), + $span: $('[data-product-price-without-tax]', $scope), + }, rrpWithTax: { $div: $('.rrp-price--withTax', $scope), $span: $('[data-product-rrp-with-tax]', $scope), @@ -210,6 +216,8 @@ export default class ProductDetailsBase { viewModel.priceSaved.$div.hide(); viewModel.priceNowLabel.$span.hide(); viewModel.priceLabel.$span.hide(); + viewModel.priceWithTax.$div.hide(); + viewModel.priceWithoutTax.$div.hide(); } /** @@ -223,6 +231,8 @@ export default class ProductDetailsBase { if (data.price instanceof Object) { this.updatePriceView(viewModel, data.price); + } else { + this.clearPricingNotFound(viewModel); } if (data.weight instanceof Object) { @@ -292,7 +302,8 @@ export default class ProductDetailsBase { `${price.price_range.min.with_tax.formatted} - ${price.price_range.max.with_tax.formatted}` : price.with_tax.formatted; viewModel.priceLabel.$span.show(); - viewModel.$priceWithTax.html(updatedPrice); + viewModel.priceWithTax.$div.show(); + viewModel.priceWithTax.$span.html(updatedPrice); } if (price.without_tax) { @@ -300,7 +311,8 @@ export default class ProductDetailsBase { `${price.price_range.min.without_tax.formatted} - ${price.price_range.max.without_tax.formatted}` : price.without_tax.formatted; viewModel.priceLabel.$span.show(); - viewModel.$priceWithoutTax.html(updatedPrice); + viewModel.priceWithoutTax.$div.show(); + viewModel.priceWithoutTax.$span.html(updatedPrice); } if (price.rrp_with_tax) { diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html index cdd6fc4636..9ff2a12c26 100644 --- a/templates/components/products/price-range.html +++ b/templates/components/products/price-range.html @@ -36,7 +36,7 @@ {{price.non_sale_price_with_tax.formatted}} -
+
{{theme_settings.pdp-price-label}} - {{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}} + {{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}} {{#and price.price_range.min.without_tax price.price_range.max.without_tax}} {{lang 'products.price_with_tax' tax_label=price.price_range.min.tax_label}} {{/and}} @@ -88,7 +88,7 @@ {{price.non_sale_price_without_tax.formatted}}
-
+
{{theme_settings.pdp-price-label}} - {{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}} + {{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}} {{#and price.price_range.min.with_tax price.price_range.max.with_tax}} {{lang 'products.price_without_tax' tax_label=price.price_range.min.tax_label}} {{/and}} diff --git a/templates/components/products/price.html b/templates/components/products/price.html index d5e6126325..507b6468e5 100644 --- a/templates/components/products/price.html +++ b/templates/components/products/price.html @@ -7,84 +7,80 @@ {{#and price.price_range (if theme_settings.price_ranges '==' true)}} {{> components/products/price-range price=price}} {{else}} - {{#if price.with_tax}} -
- - {{> components/products/price-label - label_value=theme_settings.pdp-retail-price-label - fallback=(lang "page_builder.pdp-retail-price-label") - }} - - - {{price.rrp_with_tax.formatted}} - -
-
- - {{> components/products/price-label - label_value=theme_settings.pdp-non-sale-price-label - fallback=(lang "page_builder.pdp-non-sale-price-label") - }} - - - {{price.non_sale_price_with_tax.formatted}} - -
-
- - {{theme_settings.pdp-price-label}} - - - {{> components/products/price-label - label_value=theme_settings.pdp-sale-price-label - fallback=(lang "page_builder.pdp-sale-price-label") - }} - - {{price.with_tax.formatted}} - {{#if price.without_tax}} - {{lang 'products.price_with_tax' tax_label=price.tax_label}} - {{/if}} -
- {{/if}} - {{#if price.without_tax}} -
- - {{> components/products/price-label - label_value=theme_settings.pdp-retail-price-label - fallback=(lang "page_builder.pdp-retail-price-label") - }} - - - {{price.rrp_without_tax.formatted}} - -
-
- - {{> components/products/price-label - label_value=theme_settings.pdp-non-sale-price-label - fallback=(lang "page_builder.pdp-non-sale-price-label") - }} - - - {{price.non_sale_price_without_tax.formatted}} - -
-
- - {{theme_settings.pdp-price-label}} - - - {{> components/products/price-label - label_value=theme_settings.pdp-sale-price-label - fallback=(lang "page_builder.pdp-sale-price-label") - }} - - {{price.without_tax.formatted}} - {{#if price.with_tax}} - {{lang 'products.price_without_tax' tax_label=price.tax_label}} - {{/if}} -
- {{/if}} +
+ + {{> components/products/price-label + label_value=theme_settings.pdp-retail-price-label + fallback=(lang "page_builder.pdp-retail-price-label") + }} + + + {{price.rrp_with_tax.formatted}} + +
+
+ + {{> components/products/price-label + label_value=theme_settings.pdp-non-sale-price-label + fallback=(lang "page_builder.pdp-non-sale-price-label") + }} + + + {{price.non_sale_price_with_tax.formatted}} + +
+
+ {{theme_settings.pdp-price-label}} + + + {{> components/products/price-label + label_value=theme_settings.pdp-sale-price-label + fallback=(lang "page_builder.pdp-sale-price-label") + }} + + {{price.with_tax.formatted}} + {{#if price.without_tax}} + {{lang 'products.price_with_tax' tax_label=price.tax_label}} + {{/if}} +
+
+ + {{> components/products/price-label + label_value=theme_settings.pdp-retail-price-label + fallback=(lang "page_builder.pdp-retail-price-label") + }} + + + {{price.rrp_without_tax.formatted}} + +
+
+ + {{> components/products/price-label + label_value=theme_settings.pdp-non-sale-price-label + fallback=(lang "page_builder.pdp-non-sale-price-label") + }} + + + {{price.non_sale_price_without_tax.formatted}} + +
+
+ + {{theme_settings.pdp-price-label}} + + + {{> components/products/price-label + label_value=theme_settings.pdp-sale-price-label + fallback=(lang "page_builder.pdp-sale-price-label") + }} + + {{price.without_tax.formatted}} + {{#if price.with_tax}} + {{lang 'products.price_without_tax' tax_label=price.tax_label}} + {{/if}} +
{{#if page_type '===' 'product'}}
{{lang 'products.you_save_opening_text'}}