From d495505ad818eb003ac8e51d2c836c465450fc29 Mon Sep 17 00:00:00 2001
From: "Jason Zamora (jz)" <jason.zamora@bigcommerce.com>
Date: Mon, 11 Jun 2018 15:31:04 -0500
Subject: [PATCH] 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.

fix(catalog): STRF-4701 - Found some tests breaking due to some missing class names. Updated class names in the pricing to make sure they are consistent among the various code paths. Made sure the "price saved" element is always present (but maybe not visible). Added some comments.

A couple INPUT id parameter updates that were missed when LABEL elements were updated - caused product list to not function on PDP.
---
 .../products/options/product-list.html        |  4 +--
 .../components/products/price-range.html      | 33 +++++++++++++------
 templates/components/products/price.html      | 32 ++++++++++--------
 3 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/templates/components/products/options/product-list.html b/templates/components/products/options/product-list.html
index ba0ce05ee8..5a0311c6cf 100644
--- a/templates/components/products/options/product-list.html
+++ b/templates/components/products/options/product-list.html
@@ -51,7 +51,7 @@
                type="radio"
                name="attribute[{{id}}]"
                value="0"
-               id="attribute_0_{{id}}"
+               id="attribute_productlist_0_{{id}}"
                {{#if defaultValue '==' 0}}checked{{/if}}>
         <label class="form-label" for="attribute_productlist_0_{{id}}">{{lang 'products.none'}}</label>
         {{/unless}}
@@ -61,7 +61,7 @@
                 type="radio"
                 name="attribute[{{../id}}]"
                 value="{{id}}"
-                id="attribute_{{id}}"
+                id="attribute_productlist_{{id}}"
                 {{#if selected}}checked{{/if}}
                 {{#if ../required}}required{{/if}}>
             <label data-product-attribute-value="{{id}}" class="form-label" for="attribute_productlist_{{id}}">{{label}}</label>
diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html
index 427d564f8d..d1577e250c 100644
--- a/templates/components/products/price-range.html
+++ b/templates/components/products/price-range.html
@@ -1,5 +1,5 @@
 {{#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}}>
+    <div class="price-section price-section--withTax rrp-price--withTax">
         {{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>
@@ -14,6 +14,7 @@
     {{/if}}
 {{/and}}
 {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
+    {{!-- Never display the "non-sales price" if there is a price range to be shown, but we do want the element on the page --}}
     <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">
@@ -23,7 +24,7 @@
     <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>
+        <span data-product-price-with-tax class="price price--withTax">{{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>
         {{/and}}
@@ -41,13 +42,13 @@
     </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>
+    <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/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;">
+        <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}}
@@ -56,13 +57,14 @@
     {{/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;">
+    {{!-- Never display the "non-sales price" if there is a price range to be shown, but we do want the element on the page --}}
+    <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}}>
+    <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>
@@ -81,4 +83,15 @@
             </div>
         {{/if}}
     </div>
-{{/and}}
\ No newline at end of file
+{{/and}}
+
+{{!-- Never display the "saving price" element by default if there is a price range on the page to be shown --}}
+{{#if page_type '===' 'product'}}
+     <div class="price-section price-section--saving price" style="display: none;">
+            <span class="price">{{lang 'products.you_save_opening_text'}}</span>
+            <span data-product-price-saved class="price price--saving">
+                {{price.saved.formatted}}
+            </span>
+            <span class="price">{{lang 'products.you_save_closing_bracket'}}</span>
+     </div>
+{{/if}}
diff --git a/templates/components/products/price.html b/templates/components/products/price.html
index bcf0e68962..eb5fc514ce 100644
--- a/templates/components/products/price.html
+++ b/templates/components/products/price.html
@@ -1,3 +1,9 @@
+{{!-- There are 2 code paths for generating the PDP pricing HTML determined by the following #and condition. 
+If a 'price_range' exists then we generate all HTML in price-range.html, otherwise it is defined here. Both code
+paths generate the same HTML structure with some differences in whether that element is displayed by default (css styling).
+
+If you are making a change here or in price-range.html, you probably want to make that change in both files. --}}
+
 {{#and price.price_range (if theme_settings.price_ranges '==' true)}}
     {{> components/products/price-range price=price schema_org=schema_org}}
 {{else}}
@@ -21,7 +27,7 @@
             <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>
+            <span data-product-price-with-tax class="price price--withTax">{{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">
@@ -37,13 +43,13 @@
         </div>
     {{/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}}>
+        <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 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}}>
+        <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}}
@@ -56,7 +62,7 @@
             <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.without_tax.formatted}}</span>
+            <span data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{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}}">
@@ -73,14 +79,12 @@
         </div>
     {{/if}}
     {{#if page_type '===' 'product'}}
-        {{#if price.saved}}
-             <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}}
+         <div class="price-section price-section--saving price" {{#unless price.saved}}style="display: none;"{{/unless}}>
+                <span class="price">{{lang 'products.you_save_opening_text'}}</span>
+                <span data-product-price-saved class="price price--saving">
+                    {{price.saved.formatted}}
+                </span>
+                <span class="price">{{lang 'products.you_save_closing_bracket'}}</span>
+         </div>
     {{/if}}
-{{/and}}
\ No newline at end of file
+{{/and}}