Merge pull request #1277 from bc-jz/STRF-4701-cont

STRF-4701 - Additional fixes to address missing class names
bigcommerce · Jun 20, 2018 · bfebe5e · bfebe5e
2 parents 584c782 + d495505
commit bfebe5e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git 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
@@ -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}}
+{{/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
@@ -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}}
+{{/and}}