Merge pull request #1262 from bc-jz/STRF-4701

fix(storefront): STRF-4701 - Fixed a use case that prevented retail/sale prices from displaying on PDP
bigcommerce · Jun 12, 2018 · c61dc67 · c61dc67
2 parents 0c4f49e + e839bbb
commit c61dc67
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 60 deletions.
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -94,12 +94,12 @@ export default class ProductDetails {
                 $div: $('.rrp-price--withoutTax', $scope),
                 $span: $('[data-product-rrp-price-without-tax]', $scope),
             },
-            nonSaleWithPrice: {
-                $div: $('.non-sale-price---withTax', $scope),
+            nonSaleWithTax: {
+                $div: $('.non-sale-price--withTax', $scope),
                 $span: $('[data-product-non-sale-price-with-tax]', $scope),
             },
-            nonSaleWithoutPrice: {
-                $div: $('.non-sale-price---withoutTax', $scope),
+            nonSaleWithoutTax: {
+                $div: $('.non-sale-price--withoutTax', $scope),
                 $span: $('[data-product-non-sale-price-without-tax]', $scope),
             },
             priceSaved: {
@@ -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/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/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/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/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/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
@@ -1,21 +1,28 @@
-{{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}}
-    <div class="price-section price-section--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
-        <span data-product-price-without-tax class="price price--rrp">{{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_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">
-            <div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
-                <meta itemprop="minPrice" content="{{price.retail_price_range.min.without_tax.value}}"  />
-                <meta itemprop="price" content="{{price.retail_price_range.min.without_tax.value}}">
-                <meta itemprop="maxPrice" content="{{price.retail_price_range.max.without_tax.value}}"  />
-                <meta itemprop="priceCurrency" content="{{currency_selector.active_currency_code}}">
-                <meta itemprop="valueAddedTaxIncluded" content="true">
-            </div>
-        {{/if}}
+{{#and price.retail_price_range.min.with_tax price.retail_price_range.max.with_tax}}
+    <div class="price-section price-section--withTax rrp-price--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        {{theme_settings.pdp-retail-price-label}}
+        <span data-product-rrp-price-with-tax class="price price--rrp">{{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}}</span>
     </div>
+{{else}}
+    {{#if price.with_tax}}
+        <div class="price-section price-section--withTax rrp-price--withTax" style="display: none;">
+            {{theme_settings.pdp-retail-price-label}}
+            <span data-product-rrp-with-tax class="price price--rrp">
+                {{price.rrp_with_tax.formatted}}
+            </span>
+        </div>
+    {{/if}}
 {{/and}}
 {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
+    <div class="price-section price-section--withTax non-sale-price--withTax" style="display: none;">
+        {{theme_settings.pdp-non-sale-price-label}}
+        <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" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        <span class="price-label">{{theme_settings.pdp-price-label}}</span>
+        <span class="price-now-label" style="display: none;">{{theme_settings.pdp-sale-price-label}}</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>
@@ -33,8 +40,31 @@
         {{/if}}
     </div>
 {{/and}}
+{{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}}
+        <div class="price-section price-section--withoutTax rrp-price--withoutTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+            {{theme_settings.pdp-retail-price-label}}
+            <span data-product-rrp-price-without-tax class="price price--rrp">{{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}}</span>
+        </div>
+{{else}}
+    {{#if price.without_tax}}
+        <div class="price-section price-section--withoutTax rrp-price--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}" style="display: none;">
+            {{theme_settings.pdp-retail-price-label}}
+            <span data-product-rrp-price-without-tax class="price price--rrp">
+                {{price.rrp_without_tax.formatted}}
+            </span>
+        </div>
+    {{/if}}
+{{/and}}
 {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
+    <div class="price-section price-section--withoutTax non-sale-price--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}" style="display: none;">
+        {{theme_settings.pdp-non-sale-price-label}}
+        <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 {{#and price_range.min.with_tax price_range.max.with_tax}}price-section--minor{{/and}}"  {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        <span class="price-label">{{theme_settings.pdp-price-label}}</span>
+        <span class="price-now-label" style="display: none;">{{theme_settings.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>
         {{#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>

diff --git a/templates/components/products/price.html b/templates/components/products/price.html
@@ -2,23 +2,24 @@
     {{> components/products/price-range price=price schema_org=schema_org}}
 {{else}}
     {{#if price.with_tax}}
-        <div class="price-section price-section--withTax rrp-price--withTax">
-            {{#if price.rrp_with_tax}}
-                {{lang 'products.retail_price'}}
-                <span data-product-rrp-with-tax class="price price--rrp"> {{price.rrp_with_tax.formatted}}</span>
-            {{/if}}
+        <div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
+            {{theme_settings.pdp-retail-price-label}}
+            <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">
-            {{#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 class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
+            {{theme_settings.pdp-non-sale-price-label}}
+            <span data-product-non-sale-price-with-tax class="price price--non-sale">
+                {{price.non_sale_price_with_tax.formatted}}
+            </span>
         </div>
-        <div {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
-            <span class="price-now-label">
-                {{#if price.non_sale_price_with_tax}}
-                    {{lang 'products.price_now'}}
-                {{/if}}
+        <div class="price-section price-section--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+            <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}}>
+                {{theme_settings.pdp-sale-price-label}}
             </span>
             <span data-product-price-with-tax class="price"> {{price.with_tax.formatted}}</span>
             {{#if schema_org}}
@@ -31,30 +32,31 @@
                 </div>
             {{/if}}
             {{#if price.without_tax}}
-                <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_with_tax' tax_label=price.tax_label}}</abbr>
+                <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 rrp-price--withoutTax price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}">
-            {{#if price.rrp_without_tax}}
-                {{lang 'products.retail_price'}}
-                <span data-product-rrp-price-without-tax class="price price--rrp"> {{price.rrp_without_tax.formatted}}</span>
-            {{/if}}
+        <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}}>
+            {{theme_settings.pdp-retail-price-label}}
+            <span data-product-rrp-price-without-tax class="price price--rrp"> 
+                {{price.rrp_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 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 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}}>
+            {{theme_settings.pdp-non-sale-price-label}}
+            <span data-product-non-sale-price-without-tax class="price price--non-sale">
+                {{price.non_sale_price_without_tax.formatted}}
+            </span>
         </div>
-        <div {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
-            <span class="price-now-label">
-                {{#if price.non_sale_price_without_tax}}
-                    {{lang 'products.price_now'}}
-                {{/if}}
+        <div class="price-section price-section--withoutTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+            <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}}>
+                {{theme_settings.pdp-sale-price-label}}
             </span>
-            <span data-product-price-without-tax class="price price--withoutTax"> {{price.without_tax.formatted}}</span>
+            <span data-product-price-without-tax class="price"> {{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}}">