From 5de8070e8ba0489329d30695a836d3049a984390 Mon Sep 17 00:00:00 2001 From: "Jason Zamora (jz)" Date: Fri, 8 Jun 2018 11:14:56 -0500 Subject: [PATCH 1/4] fix(storefront): STRF-4701 - Updated PDP price and price-range templates to always include containing elements for rrp, non-sale, and sale prices even if they are not present in the context on initial page load. This ensures the proper elements are available to be updated by Javascript when option seleections are made that do have any of the prices available. --- assets/js/theme/common/product-details.js | 4 +- .../scss/components/stencil/price/_price.scss | 1 + templates/components/amp/css/base.html | 1 + .../components/products/price-range.html | 74 +++++++++++++++++-- templates/components/products/price.html | 60 ++++++++------- 5 files changed, 105 insertions(+), 35 deletions(-) diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 762ff4e025..9fe7c13f73 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -95,11 +95,11 @@ export default class ProductDetails { $span: $('[data-product-rrp-price-without-tax]', $scope), }, nonSaleWithPrice: { - $div: $('.non-sale-price---withTax', $scope), + $div: $('.non-sale-price--withTax', $scope), $span: $('[data-product-non-sale-price-with-tax]', $scope), }, nonSaleWithoutPrice: { - $div: $('.non-sale-price---withoutTax', $scope), + $div: $('.non-sale-price--withoutTax', $scope), $span: $('[data-product-non-sale-price-without-tax]', $scope), }, priceSaved: { diff --git a/assets/scss/components/stencil/price/_price.scss b/assets/scss/components/stencil/price/_price.scss index ffb55f6bd4..48c0320524 100644 --- a/assets/scss/components/stencil/price/_price.scss +++ b/assets/scss/components/stencil/price/_price.scss @@ -3,6 +3,7 @@ // ============================================================================= .price--rrp, +.price--non-sale, .price--discounted { text-decoration: line-through; } diff --git a/templates/components/amp/css/base.html b/templates/components/amp/css/base.html index ecd4f23607..672ab13179 100644 --- a/templates/components/amp/css/base.html +++ b/templates/components/amp/css/base.html @@ -268,6 +268,7 @@ } .price--rrp, +.price--non-sale, .price--discounted { text-decoration: line-through; } diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html index 7a777b46af..8a8a4a9308 100644 --- a/templates/components/products/price-range.html +++ b/templates/components/products/price-range.html @@ -1,21 +1,44 @@ -{{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}} -
- {{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}} +{{#and price.retail_price_range.min.with_tax price.retail_price_range.max.with_tax}} +
+ {{lang 'products.retail_price'}} + {{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}} {{#if schema_org}}
- - - + + +
{{/if}}
+ {{else}} + {{#if price.with_tax}} + + {{/if}} {{/and}} {{#and price.price_range.min.with_tax price.price_range.max.with_tax}} +
+ {{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}} @@ -33,8 +56,47 @@ {{/if}}
{{/and}} +{{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}} +
+ {{lang 'products.retail_price'}} + {{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}} + {{#if schema_org}} + + +
+ + + + + +
+ {{/if}} +
+ {{else}} + {{#if price.without_tax}} + + {{/if}} +{{/and}} {{#and price.price_range.min.without_tax price.price_range.max.without_tax}} +
+ {{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}} diff --git a/templates/components/products/price.html b/templates/components/products/price.html index 8b87fc02b2..ab2e328a0c 100644 --- a/templates/components/products/price.html +++ b/templates/components/products/price.html @@ -2,19 +2,23 @@ {{> components/products/price-range price=price schema_org=schema_org}} {{else}} {{#if price.with_tax}} -
- {{#if price.rrp_with_tax}} - {{lang 'products.retail_price'}} - {{price.rrp_with_tax.formatted}} - {{/if}} +
+ {{lang 'products.retail_price'}} + + {{#if price.rrp_with_tax}} + {{price.rrp_with_tax.formatted}} + {{/if}} +
-
- {{#if price.non_sale_price_with_tax}} - {{lang 'products.price_was'}} - {{price.non_sale_price_with_tax.formatted}} - {{/if}} +
+ {{lang 'products.price_was'}} + + {{#if price.non_sale_price_with_tax}} + {{price.non_sale_price_with_tax.formatted}} + {{/if}} +
-
+
{{#if price.non_sale_price_with_tax}} {{lang 'products.price_now'}} @@ -31,30 +35,32 @@
{{/if}} {{#if price.without_tax}} - {{lang 'products.price_with_tax' tax_label=price.tax_label}} + {{lang 'products.price_with_tax' tax_label=price.tax_label}} {{/if}}
{{/if}} {{#if price.without_tax}} -
- {{#if price.rrp_without_tax}} - {{lang 'products.retail_price'}} - {{price.rrp_without_tax.formatted}} - {{/if}} -
-
- {{#if price.non_sale_price_without_tax}} - {{lang 'products.price_was'}} - {{price.non_sale_price_without_tax.formatted}} - {{/if}} +
+ {{lang 'products.retail_price'}} + + {{#if price.rrp_without_tax}} + {{price.rrp_without_tax.formatted}} + {{/if}} +
-
- +
+ {{lang 'products.price_was'}} + {{#if price.non_sale_price_without_tax}} - {{lang 'products.price_now'}} + {{price.non_sale_price_without_tax.formatted}} {{/if}} - {{price.without_tax.formatted}} +
+
+ + {{lang 'products.price_now'}} + + {{price.without_tax.formatted}} {{#if schema_org}} From 8dd15c21874b6736482759e4e2bb2cc3488a59a3 Mon Sep 17 00:00:00 2001 From: "Jason Zamora (jz)" Date: Mon, 11 Jun 2018 11:24:37 -0500 Subject: [PATCH 2/4] fix(storefront): STRF-4701 - Removed from extraneous IF statements as requested in PR and made the PDP pricing labels editable in the Theme customization settings. --- assets/js/theme/common/product-details.js | 24 +++++++---- config.json | 6 ++- schema.json | 24 +++++++++++ .../components/products/price-range.html | 40 +++++++------------ templates/components/products/price.html | 40 +++++++++---------- 5 files changed, 78 insertions(+), 56 deletions(-) diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 9fe7c13f73..1ef372c920 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -94,11 +94,11 @@ export default class ProductDetails { $div: $('.rrp-price--withoutTax', $scope), $span: $('[data-product-rrp-price-without-tax]', $scope), }, - nonSaleWithPrice: { + nonSaleWithTax: { $div: $('.non-sale-price--withTax', $scope), $span: $('[data-product-non-sale-price-with-tax]', $scope), }, - nonSaleWithoutPrice: { + nonSaleWithoutTax: { $div: $('.non-sale-price--withoutTax', $scope), $span: $('[data-product-non-sale-price-without-tax]', $scope), }, @@ -109,6 +109,9 @@ export default class ProductDetails { priceNowLabel: { $span: $('.price-now-label', $scope), }, + priceLabel: { + $span: $('.price-label', $scope), + }, $weight: $('.productView-info [data-product-weight]', $scope), $increments: $('.form-field--increments :input', $scope), $addToCart: $('#form-action-addToCart', $scope), @@ -378,10 +381,11 @@ export default class ProductDetails { clearPricingNotFound(viewModel) { viewModel.rrpWithTax.$div.hide(); viewModel.rrpWithoutTax.$div.hide(); - viewModel.nonSaleWithPrice.$div.hide(); - viewModel.nonSaleWithoutPrice.$div.hide(); + viewModel.nonSaleWithTax.$div.hide(); + viewModel.nonSaleWithoutTax.$div.hide(); viewModel.priceSaved.$div.hide(); viewModel.priceNowLabel.$span.hide(); + viewModel.priceLabel.$span.hide(); } /** @@ -392,10 +396,12 @@ export default class ProductDetails { this.clearPricingNotFound(viewModel); if (price.with_tax) { + viewModel.priceLabel.$span.show(); viewModel.$priceWithTax.html(price.with_tax.formatted); } if (price.without_tax) { + viewModel.priceLabel.$span.show(); viewModel.$priceWithoutTax.html(price.without_tax.formatted); } @@ -415,15 +421,17 @@ export default class ProductDetails { } if (price.non_sale_price_with_tax) { - viewModel.nonSaleWithPrice.$div.show(); + viewModel.priceLabel.$span.hide(); + viewModel.nonSaleWithTax.$div.show(); viewModel.priceNowLabel.$span.show(); - viewModel.nonSaleWithPrice.$span.html(price.non_sale_price_with_tax.formatted); + viewModel.nonSaleWithTax.$span.html(price.non_sale_price_with_tax.formatted); } if (price.non_sale_price_without_tax) { - viewModel.nonSaleWithoutPrice.$div.show(); + viewModel.priceLabel.$span.hide(); + viewModel.nonSaleWithoutTax.$div.show(); viewModel.priceNowLabel.$span.show(); - viewModel.nonSaleWithoutPrice.$span.html(price.non_sale_price_without_tax.formatted); + viewModel.nonSaleWithoutTax.$span.html(price.non_sale_price_without_tax.formatted); } } diff --git a/config.json b/config.json index f752c12202..647b25b771 100644 --- a/config.json +++ b/config.json @@ -288,7 +288,11 @@ "geotrust_ssl_common_name": "", "geotrust_ssl_seal_size": "M", "navigation_design": "simple", - "price_ranges": true + "price_ranges": true, + "pdp-price-label": "", + "pdp-sale-price-label": "Now:", + "pdp-non-sale-price-label": "Was:", + "pdp-retail-price-label": "MSRP:" }, "read_only_files": [ "/assets/scss/components/citadel", diff --git a/schema.json b/schema.json index acb862deec..1313c8ee9e 100644 --- a/schema.json +++ b/schema.json @@ -1117,6 +1117,30 @@ "type": "heading", "content": "Product pages" }, + { + "type": "text", + "label": "Product sale price label", + "id": "pdp-sale-price-label" + }, + { + "type": "text", + "label": "Product before sale price label", + "id": "pdp-non-sale-price-label" + }, + { + "type": "text", + "label": "Product retail price label", + "id": "pdp-retail-price-label" + }, + { + "type": "text", + "label": "Product price label", + "id": "pdp-price-label" + }, + { + "type": "paragraph", + "content": "* the 'Product price label' is displayed when there is not a sale price." + }, { "label": "Product swatch image sizes", "type": "imageDimension", diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html index 8a8a4a9308..f6b05cd8cb 100644 --- a/templates/components/products/price-range.html +++ b/templates/components/products/price-range.html @@ -1,6 +1,6 @@ {{#and price.retail_price_range.min.with_tax price.retail_price_range.max.with_tax}}
- {{lang 'products.retail_price'}} + {{theme_settings.pdp-retail-price-label}} {{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}} {{#if schema_org}} @@ -17,28 +17,23 @@ {{else}} {{#if price.with_tax}} {{/if}} {{/and}} {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
- + {{theme_settings.pdp-price-label}} + {{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}} @@ -58,7 +53,7 @@ {{/and}} {{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}}
- {{lang 'products.retail_price'}} + {{theme_settings.pdp-retail-price-label}} {{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}} {{#if schema_org}} @@ -75,28 +70,23 @@ {{else}} {{#if price.without_tax}} {{/if}} {{/and}} {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
- + {{theme_settings.pdp-price-label}} + {{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}} diff --git a/templates/components/products/price.html b/templates/components/products/price.html index ab2e328a0c..bcf0e68962 100644 --- a/templates/components/products/price.html +++ b/templates/components/products/price.html @@ -3,26 +3,23 @@ {{else}} {{#if price.with_tax}}
- {{lang 'products.retail_price'}} + {{theme_settings.pdp-retail-price-label}} - {{#if price.rrp_with_tax}} - {{price.rrp_with_tax.formatted}} - {{/if}} + {{price.rrp_with_tax.formatted}}
- {{lang 'products.price_was'}} + {{theme_settings.pdp-non-sale-price-label}} - {{#if price.non_sale_price_with_tax}} - {{price.non_sale_price_with_tax.formatted}} - {{/if}} + {{price.non_sale_price_with_tax.formatted}}
- - {{#if price.non_sale_price_with_tax}} - {{lang 'products.price_now'}} - {{/if}} + + {{theme_settings.pdp-price-label}} + + + {{theme_settings.pdp-sale-price-label}} {{price.with_tax.formatted}} {{#if schema_org}} @@ -41,24 +38,23 @@ {{/if}} {{#if price.without_tax}}
- {{lang 'products.retail_price'}} - - {{#if price.rrp_without_tax}} - {{price.rrp_without_tax.formatted}} - {{/if}} + {{theme_settings.pdp-retail-price-label}} + + {{price.rrp_without_tax.formatted}}
- {{lang 'products.price_was'}} + {{theme_settings.pdp-non-sale-price-label}} - {{#if price.non_sale_price_without_tax}} - {{price.non_sale_price_without_tax.formatted}} - {{/if}} + {{price.non_sale_price_without_tax.formatted}}
+ + {{theme_settings.pdp-price-label}} + - {{lang 'products.price_now'}} + {{theme_settings.pdp-sale-price-label}} {{price.without_tax.formatted}} {{#if schema_org}} From 58f838893b7e3308778a11c2375536de4bb92a09 Mon Sep 17 00:00:00 2001 From: "Jason Zamora (jz)" Date: Mon, 11 Jun 2018 11:28:59 -0500 Subject: [PATCH 3/4] fix(storefront): STRF-4701 - Removed schema.org priceSpecification meta tags that were tied to Retail Price Range. It looks like schema.org does not support pricing types other than the actual product price at this time. --- .../components/products/price-range.html | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html index f6b05cd8cb..c5ed9af054 100644 --- a/templates/components/products/price-range.html +++ b/templates/components/products/price-range.html @@ -2,17 +2,6 @@
{{theme_settings.pdp-retail-price-label}} {{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}} - {{#if schema_org}} - - -
- - - - - -
- {{/if}}
{{else}} {{#if price.with_tax}} @@ -55,17 +44,6 @@
{{theme_settings.pdp-retail-price-label}} {{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}} - {{#if schema_org}} - - -
- - - - - -
- {{/if}}
{{else}} {{#if price.without_tax}} From e839bbb1872dd32c136239b0e0c2bfb06e6372bb Mon Sep 17 00:00:00 2001 From: "Jason Zamora (jz)" Date: Mon, 11 Jun 2018 15:31:04 -0500 Subject: [PATCH 4/4] fix(storefront): STRF-4701 - Some final cleanup that was pointed out in PR review: indention correction and removing language file properties that are no longer being used in the template. --- lang/en.json | 3 -- .../components/products/price-range.html | 36 +++++++++---------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/lang/en.json b/lang/en.json index d78d53e6c4..ed6e7f1425 100644 --- a/lang/en.json +++ b/lang/en.json @@ -674,9 +674,6 @@ "choose_an_option": "Please choose an option", "select_one": "Please select one", "description": "Description", - "retail_price": "MSRP:", - "price_was": "Was:", - "price_now": "Now:", "price_with_tax": "(Inc. {tax_label})", "price_without_tax": "(Ex. {tax_label})", "including_tax": "Including Tax", diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html index c5ed9af054..427d564f8d 100644 --- a/templates/components/products/price-range.html +++ b/templates/components/products/price-range.html @@ -3,15 +3,15 @@ {{theme_settings.pdp-retail-price-label}} {{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}}
- {{else}} - {{#if price.with_tax}} - - {{/if}} +{{else}} + {{#if price.with_tax}} + + {{/if}} {{/and}} {{#and price.price_range.min.with_tax price.price_range.max.with_tax}} - {{else}} - {{#if price.without_tax}} - - {{/if}} +{{else}} + {{#if price.without_tax}} + + {{/if}} {{/and}} {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}