fix(storefront): STRF-4701 - Updated PDP price and price-range templa…

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

Hide file tree

Showing 5 changed files with 105 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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,44 @@
-{{#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>
+{{#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'}}
+        <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}}">
             <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="minPrice" content="{{price.retail_price_range.min.with_tax.value}}"  />
+                <meta itemprop="price" content="{{price.retail_price_range.min.with_tax.value}}">
+                <meta itemprop="maxPrice" content="{{price.retail_price_range.max.with_tax.value}}"  />
                 <meta itemprop="priceCurrency" content="{{currency_selector.active_currency_code}}">
                 <meta itemprop="valueAddedTaxIncluded" content="true">
             </div>
         {{/if}}
     </div>
+    {{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}}
+                    {{price.rrp_with_tax.formatted}}
+                {{/if}}
+            </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'}}
+        <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}}
+        </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 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 +56,47 @@
         {{/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}}>
+            {{lang 'products.retail_price'}}
+            <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}}">
+                <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="false">
+                </div>
+            {{/if}}
+        </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;">
+                {{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}}
+                </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'}}
+        <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}}
+        </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 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,19 +2,23 @@
     {{> 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}}>
+            {{lang 'products.retail_price'}}
+            <span data-product-rrp-with-tax class="price price--rrp">
+                {{#if price.rrp_with_tax}}
+                    {{price.rrp_with_tax.formatted}}
+                {{/if}}
+            </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}}>
+            {{lang 'products.price_was'}}
+            <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}}
+            </span>
         </div>
-        <div {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        <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'}}
@@ -31,30 +35,32 @@
                 </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>
-        <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 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}}
+            </span>
         </div>
-        <div {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
-            <span class="price-now-label">
+        <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'}}
+            <span data-product-non-sale-price-without-tax class="price price--non-sale">
                 {{#if price.non_sale_price_without_tax}}
-                    {{lang 'products.price_now'}}
+                    {{price.non_sale_price_without_tax.formatted}}
                 {{/if}}
             </span>
-            <span data-product-price-without-tax class="price price--withoutTax"> {{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-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
+                {{lang 'products.price_now'}}
+            </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}}">