Skip to content

Commit

Permalink
fix(storefront): BCTHEME-1941 Cornerstone changes to support inc/ex t…
Browse files Browse the repository at this point in the history 
…ax price lists on PDP
  • Loading branch information
@bc-yevhenii-buliuk
bc-yevhenii-buliuk committed Sep 24, 2024
1 parent 3eb0cd2 commit f7626bc
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 88 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
- 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)
- Adding mobile nav dropdown focusTrap [#2465](https://github.com/bigcommerce/cornerstone/pull/2465)
Expand Down
24 changes: 18 additions & 6 deletions assets/js/theme/common/product-details-base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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();
}

/**
Expand All @@ -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) {
Expand Down Expand Up @@ -292,15 +302,17 @@ 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) {
const updatedPrice = price.price_range ?
`${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) {
Expand Down
8 changes: 4 additions & 4 deletions templates/components/products/price-range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@
{{price.non_sale_price_with_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withTax">
<div class="price-section price-section--withTax price--withTax">
<span class="price-label">{{theme_settings.pdp-price-label}}</span>
<span class="price-now-label" style="display: none;">
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-with-tax class="price price--withTax">{{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}}</span>
<span data-product-price-with-tax class="price">{{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}}</span>
{{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
<abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.price_range.min.tax_label}}</abbr>
{{/and}}
Expand Down Expand Up @@ -88,15 +88,15 @@
{{price.non_sale_price_without_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withoutTax{{#and price_range.min.with_tax price_range.max.with_tax}} price-section--minor{{/and}}">
<div class="price-section price-section--withoutTax price--withoutTax{{#and price_range.min.with_tax price_range.max.with_tax}} price-section--minor{{/and}}">
<span class="price-label">{{theme_settings.pdp-price-label}}</span>
<span class="price-now-label" style="display: none;">
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-without-tax class="price price--withoutTax">{{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}}</span>
<span data-product-price-without-tax class="price">{{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}}</span>
{{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
<abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.price_range.min.tax_label}}</abbr>
{{/and}}
Expand Down
152 changes: 74 additions & 78 deletions templates/components/products/price.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
<div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-retail-price-label
fallback=(lang "page_builder.pdp-retail-price-label")
}}
</span>
<span data-product-rrp-with-tax class="price price--rrp">
{{price.rrp_with_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-non-sale-price-label
fallback=(lang "page_builder.pdp-non-sale-price-label")
}}
</span>
<span data-product-non-sale-price-with-tax class="price price--non-sale">
{{price.non_sale_price_with_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withTax">
<span class="price-label" {{#if price.non_sale_price_with_tax}}style="display: none;"{{/if}}>
{{theme_settings.pdp-price-label}}
</span>
<span class="price-now-label" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-with-tax class="price price--withTax">{{price.with_tax.formatted}}</span>
{{#if price.without_tax}}
<abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.tax_label}}</abbr>
{{/if}}
</div>
{{/if}}
{{#if price.without_tax}}
<div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.rrp_without_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-retail-price-label
fallback=(lang "page_builder.pdp-retail-price-label")
}}
</span>
<span data-product-rrp-price-without-tax class="price price--rrp">
{{price.rrp_without_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-non-sale-price-label
fallback=(lang "page_builder.pdp-non-sale-price-label")
}}
</span>
<span data-product-non-sale-price-without-tax class="price price--non-sale">
{{price.non_sale_price_without_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withoutTax">
<span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
{{theme_settings.pdp-price-label}}
</span>
<span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>
{{#if price.with_tax}}
<abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.tax_label}}</abbr>
{{/if}}
</div>
{{/if}}
<div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-retail-price-label
fallback=(lang "page_builder.pdp-retail-price-label")
}}
</span>
<span data-product-rrp-with-tax class="price price--rrp">
{{price.rrp_with_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-non-sale-price-label
fallback=(lang "page_builder.pdp-non-sale-price-label")
}}
</span>
<span data-product-non-sale-price-with-tax class="price price--non-sale">
{{price.non_sale_price_with_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withTax price--withTax" {{#unless price.with_tax}}style="display: none;{{/unless}}>
<span class="price-label" {{#if price.non_sale_price_with_tax}}style="display: none;"{{/if}}>
{{theme_settings.pdp-price-label}}
</span>
<span class="price-now-label" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-with-tax class="price">{{price.with_tax.formatted}}</span>
{{#if price.without_tax}}
<abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.tax_label}}</abbr>
{{/if}}
</div>
<div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.rrp_without_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-retail-price-label
fallback=(lang "page_builder.pdp-retail-price-label")
}}
</span>
<span data-product-rrp-price-without-tax class="price price--rrp">
{{price.rrp_without_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
<span>
{{> components/products/price-label
label_value=theme_settings.pdp-non-sale-price-label
fallback=(lang "page_builder.pdp-non-sale-price-label")
}}
</span>
<span data-product-non-sale-price-without-tax class="price price--non-sale">
{{price.non_sale_price_without_tax.formatted}}
</span>
</div>
<div class="price-section price-section--withoutTax price--withoutTax" {{#unless price.without_tax}}style="display: none;"{{/unless}}>
<span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
{{theme_settings.pdp-price-label}}
</span>
<span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
{{> components/products/price-label
label_value=theme_settings.pdp-sale-price-label
fallback=(lang "page_builder.pdp-sale-price-label")
}}
</span>
<span data-product-price-without-tax class="price{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>
{{#if price.with_tax}}
<abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.tax_label}}</abbr>
{{/if}}
</div>
{{#if page_type '===' 'product'}}
<div class="price-section price-section--saving price" {{#unless price.saved}}style="display: none;"{{/unless}}>
<span class="price">{{lang 'products.you_save_opening_text'}}</span>
Expand Down

0 comments on commit f7626bc

Please sign in to comment.