Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Catalog 2406 #1195

Merged
merged 1 commit into from
Apr 9, 2018
Merged

Catalog 2406 #1195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Changelog

## Draft
- Add representation for products and variants with retail price that has sale price. [#1195](https://github.com/bigcommerce/cornerstone/pull/1195)

## 1.15.0 (2018-04-04)
- Fix image dimensions on AMP pages. [#1192](https://github.com/bigcommerce/cornerstone/pull/1192)
Expand Down
63 changes: 59 additions & 4 deletions assets/js/theme/common/product-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,30 @@ export default class ProductDetails {
getViewModel($scope) {
return {
$priceWithTax: $('[data-product-price-with-tax]', $scope),
$rrpWithTax: $('[data-product-rrp-with-tax]', $scope),
$priceWithoutTax: $('[data-product-price-without-tax]', $scope),
$rrpWithoutTax: $('[data-product-rrp-without-tax]', $scope),
rrpWithTax: {
$div: $('.rrp-price--withTax', $scope),
$span: $('[data-product-rrp-with-tax]', $scope),
},
rrpWithoutTax: {
$div: $('.rrp-price--withoutTax', $scope),
$span: $('[data-product-rrp-price-without-tax]', $scope),
},
nonSaleWithPrice: {
$div: $('.non-sale-price---withTax', $scope),
$span: $('[data-product-non-sale-price-with-tax]', $scope),
},
nonSaleWithoutPrice: {
$div: $('.non-sale-price---withoutTax', $scope),
$span: $('[data-product-non-sale-price-without-tax]', $scope),
},
priceSaved: {
$div: $('.price-section--saving', $scope),
$span: $('[data-product-price-saved]', $scope),
},
priceNowLabel: {
$span: $('.price-now-label', $scope),
},
$weight: $('.productView-info [data-product-weight]', $scope),
$increments: $('.form-field--increments :input', $scope),
$addToCart: $('#form-action-addToCart', $scope),
Expand Down Expand Up @@ -326,11 +347,26 @@ export default class ProductDetails {
}
}

/**
* Hide the pricing elements that will show up only when the price exists in API
* @param viewModel
*/
clearPricingNotFound(viewModel) {
viewModel.rrpWithTax.$div.hide();
viewModel.rrpWithoutTax.$div.hide();
viewModel.nonSaleWithPrice.$div.hide();
viewModel.nonSaleWithoutPrice.$div.hide();
viewModel.priceSaved.$div.hide();
viewModel.priceNowLabel.$span.hide();
}

/**
* Update the view of price, messages, SKU and stock options when a product option changes
* @param {Object} data Product attribute data
*/
updatePriceView(viewModel, price) {
this.clearPricingNotFound(viewModel);

if (price.with_tax) {
viewModel.$priceWithTax.html(price.with_tax.formatted);
}
Expand All @@ -340,11 +376,30 @@ export default class ProductDetails {
}

if (price.rrp_with_tax) {
viewModel.$rrpWithTax.html(price.rrp_with_tax.formatted);
viewModel.rrpWithTax.$div.show();
viewModel.rrpWithTax.$span.html(price.rrp_with_tax.formatted);
}

if (price.rrp_without_tax) {
viewModel.$rrpWithoutTax.html(price.rrp_without_tax.formatted);
viewModel.rrpWithoutTax.$div.show();
viewModel.rrpWithoutTax.$span.html(price.rrp_without_tax.formatted);
}

if (price.saved) {
viewModel.priceSaved.$div.show();
viewModel.priceSaved.$span.html(price.saved.formatted);
}

if (price.non_sale_price_with_tax) {
viewModel.nonSaleWithPrice.$div.show();
viewModel.priceNowLabel.$span.show();
viewModel.nonSaleWithPrice.$span.html(price.non_sale_price_with_tax.formatted);
}

if (price.non_sale_price_without_tax) {
viewModel.nonSaleWithoutPrice.$div.show();
viewModel.priceNowLabel.$span.show();
viewModel.nonSaleWithoutPrice.$span.html(price.non_sale_price_without_tax.formatted);
}
}

Expand Down
7 changes: 5 additions & 2 deletions lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,9 @@
"choose_an_option": "Please choose an option",
"select_one": "Please select one",
"description": "Description",
"retail_price": "MSRP",
"retail_price": "MSRP:",
"price_was": "Was:",
"price_now": "Now:",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🍹 in my opinion we would leave the : out of the lang file and in the template directly, @junedkazi do you have an opinion?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think you could argue the colon is part of the language. we also have it in MSRP: above so i think think it's fine to stay

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you

"price_with_tax": "(Inc. {tax_label})",
"price_without_tax": "(Ex. {tax_label})",
"including_tax": "Including Tax",
Expand All @@ -687,7 +689,8 @@
"metric": "cm",
"imperial": "in"
},
"you_save": "(You save {amount})",
"you_save_opening_text": "(You save",
"you_save_closing_bracket": ")",
"gift_wrapping": "Gift wrapping:",
"gift_wrapping_available": "Options available",
"quantity_min": "The minimum purchasable quantity is {quantity}",
Expand Down
52 changes: 41 additions & 11 deletions templates/components/products/price.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,25 @@
{{> components/products/price-range price_range=price.price_range schema_org=schema_org}}
{{else}}
{{#if price.with_tax}}
<div class="price-section price-section--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
<div class="price-section price-section--withTax rrp-price--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
{{#if price.rrp_with_tax}}
<span data-product-rrp-with-tax class="price price--rrp">{{price.rrp_with_tax.formatted}}</span>
{{lang 'products.retail_price'}}
<span data-product-rrp-with-tax class="price price--rrp"> {{price.rrp_with_tax.formatted}}</span>
{{/if}}
<span data-product-price-with-tax class="price">{{price.with_tax.formatted}}</span>
</div>
<div class="price-section price-section--withTax non-sale-price---withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
{{#if price.non_sale_price_with_tax}}
{{lang 'products.price_was'}}
<span data-product-non-sale-price-with-tax class="price price--rrp"> {{price.non_sale_price_with_tax.formatted}}</span>
{{/if}}
</div>
<div>
<span class="price-now-label">
{{#if price.non_sale_price_with_tax}}
{{lang 'products.price_now'}}
{{/if}}
</span>
<span data-product-price-with-tax class="price"> {{price.with_tax.formatted}}</span>
{{#if schema_org}}
<meta itemprop="availability" content="{{product.availability}}">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/{{product.condition}}Condition">
Expand All @@ -22,11 +36,25 @@
</div>
{{/if}}
{{#if price.without_tax}}
<div class="price-section price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
<div class="price-section rrp-price--withoutTax price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
{{#if price.rrp_without_tax}}
<span data-product-rrp-without-tax class="price price--rrp">{{price.rrp_without_tax.formatted}}</span>
{{lang 'products.retail_price'}}
<span data-product-rrp-price-without-tax class="price price--rrp"> {{price.rrp_without_tax.formatted}}</span>
{{/if}}
<span data-product-price-without-tax class="price price--withoutTax">{{price.without_tax.formatted}}</span>
</div>
<div class="price-section non-sale-price---withoutTax price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
{{#if price.non_sale_price_without_tax}}
{{lang 'products.price_was'}}
<span data-product-non-sale-price-without-tax class="price price--rrp"> {{price.non_sale_price_without_tax.formatted}}</span>
{{/if}}
</div>
<div>
<span class="price-now-label">
{{#if price.non_sale_price_without_tax}}
{{lang 'products.price_now'}}
{{/if}}
</span>
<span data-product-price-without-tax class="price price--withoutTax"> {{price.without_tax.formatted}}</span>
{{#if schema_org}}
<meta itemprop="availability" itemtype="http://schema.org/ItemAvailability"
content="http://schema.org/{{#if product.pre_order}}PreOrder{{else if product.out_of_stock}}OutOfStock{{else if product.can_purchase '===' false}}OutOfStock{{else}}InStock{{/if}}">
Expand All @@ -44,11 +72,13 @@
{{/if}}
{{#if page_type '===' 'product'}}
{{#if price.saved}}
<div class="price-section price-section--saving">
<span class="price">
{{lang 'products.you_save' amount=price.saved.formatted}}
</span>
</div>
<div class="price-section price-section--saving price">
<span class="price">{{lang 'products.you_save_opening_text'}}</span>
<span data-product-price-saved class="price">
{{price.saved.formatted}}
</span>
<span class="price">{{lang 'products.you_save_closing_bracket'}}</span>
</div>
{{/if}}
{{/if}}
{{/and}}