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.
bigcommerce · Jun 11, 2018 · 8dd15c2 · 8dd15c2
1 parent 5de8070
commit 8dd15c2
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 {{#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}}>
-        {{lang 'products.retail_price'}}
+        {{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>
         {{#if schema_org}}
             <meta itemprop="availability" content="{{product.availability}}">
@@ -17,28 +17,23 @@
     {{else}}
         {{#if price.with_tax}}
             <div class="price-section price-section--withTax rrp-price--withTax" style="display: none;">
-            {{lang 'products.retail_price'}}
-            <span data-product-rrp-with-tax class="price price--rrp">
-                {{#if price.rrp_with_tax}}
+                {{theme_settings.pdp-retail-price-label}}
+                <span data-product-rrp-with-tax class="price price--rrp">
                     {{price.rrp_with_tax.formatted}}
-                {{/if}}
-            </span>
+                </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;">
-        {{lang 'products.price_was'}}
+        {{theme_settings.pdp-non-sale-price-label}}
         <span data-product-non-sale-price-with-tax class="price price--non-sale">
-            {{#if price.non_sale_price_with_tax}}
-                {{price.non_sale_price_with_tax.formatted}}
-            {{/if}}
+            {{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-now-label" style="display: none;">
-            {{lang 'products.price_now'}}
-        </span>
+        <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>
@@ -58,7 +53,7 @@
 {{/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}}>
-            {{lang 'products.retail_price'}}
+            {{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>
             {{#if schema_org}}
                 <meta itemprop="availability" content="{{product.availability}}">
@@ -75,28 +70,23 @@
     {{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;">
-                {{lang 'products.retail_price'}}
+                {{theme_settings.pdp-retail-price-label}}
                 <span data-product-rrp-price-without-tax class="price price--rrp">
-                    {{#if price.rrp_without_tax}}
-                        {{price.rrp_without_tax.formatted}}
-                    {{/if}}
+                    {{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;">
-        {{lang 'products.price_was'}}
+        {{theme_settings.pdp-non-sale-price-label}}
         <span data-product-non-sale-price-without-tax class="price price--non-sale">
-            {{#if price.non_sale_price_without_tax}}
-                {{price.non_sale_price_without_tax.formatted}}
-            {{/if}}
+            {{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-now-label" style="display: none;">
-            {{lang 'products.price_now'}}
-        </span>
+        <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
@@ -3,26 +3,23 @@
 {{else}}
     {{#if price.with_tax}}
         <div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
-            {{lang 'products.retail_price'}}
+            {{theme_settings.pdp-retail-price-label}}
             <span data-product-rrp-with-tax class="price price--rrp">
-                {{#if price.rrp_with_tax}}
-                    {{price.rrp_with_tax.formatted}}
-                {{/if}}
+                {{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}}>
-            {{lang 'products.price_was'}}
+            {{theme_settings.pdp-non-sale-price-label}}
             <span data-product-non-sale-price-with-tax class="price price--non-sale">
-                {{#if price.non_sale_price_with_tax}}
-                    {{price.non_sale_price_with_tax.formatted}}
-                {{/if}}
+                {{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-now-label">
-                {{#if price.non_sale_price_with_tax}}
-                    {{lang 'products.price_now'}}
-                {{/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}}
@@ -41,24 +38,23 @@
     {{/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}}>
-            {{lang 'products.retail_price'}}
-            <span data-product-rrp-price-without-tax class="price price--rrp">
-                {{#if price.rrp_without_tax}}
-                    {{price.rrp_without_tax.formatted}}
-                {{/if}}
+            {{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 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}}>
-            {{lang 'products.price_was'}}
+            {{theme_settings.pdp-non-sale-price-label}}
             <span data-product-non-sale-price-without-tax class="price price--non-sale">
-                {{#if price.non_sale_price_without_tax}}
-                    {{price.non_sale_price_without_tax.formatted}}
-                {{/if}}
+                {{price.non_sale_price_without_tax.formatted}}
             </span>
         </div>
         <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}}>
-                {{lang 'products.price_now'}}
+                {{theme_settings.pdp-sale-price-label}}
             </span>
             <span data-product-price-without-tax class="price"> {{price.without_tax.formatted}}</span>
             {{#if schema_org}}