Compare at price logic (#111)

Shopify · Apr 7, 2017 · ba63aba · ba63aba
1 parent 7e7e601
commit ba63aba
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/scripts/sections/product.js b/src/scripts/sections/product.js
@@ -12,6 +12,7 @@ theme.Product = (function() {
     addToCart: '[data-add-to-cart]',
     addToCartText: '[data-add-to-cart-text]',
     comparePrice: '[data-compare-price]',
+    comparePriceText: '[data-compare-text]',
     originalSelectorId: '[data-product-select]',
     priceWrapper: '[data-price-wrapper]',
     productFeaturedImage: '[data-product-featured-image]',
@@ -103,16 +104,18 @@ theme.Product = (function() {
      */
     updateProductPrices: function(evt) {
       var variant = evt.variant;
+      var $comparePrice = $(selectors.comparePrice, this.$container);
+      var $compareEls = $comparePrice.add(selectors.comparePriceText, this.$container);
 
       $(selectors.productPrice, this.$container)
         .html(slate.Currency.formatMoney(variant.price, theme.moneyFormat));
 
       if (variant.compare_at_price > variant.price) {
-        $(selectors.comparePrice, this.$container)
-          .html(slate.Currency.formatMoney(variant.compare_at_price, theme.moneyFormat))
-          .removeClass('hide');
+        $comparePrice.html(slate.Currency.formatMoney(variant.compare_at_price, theme.moneyFormat));
+        $compareEls.removeClass('hide');
       } else {
-        $(selectors.comparePrice, this.$container).addClass('hide');
+        $comparePrice.html('');
+        $compareEls.addClass('hide');
       }
     },
 

diff --git a/src/sections/featured-product.liquid b/src/sections/featured-product.liquid
@@ -1,4 +1,5 @@
 {%- assign product = all_products[section.settings.product] -%}
+{%- assign current_variant = product.selected_or_first_available_variant -%}
 
 {% if product.empty? %}
   {%- assign section_onboarding = true -%}
@@ -81,13 +82,15 @@
 
       <div data-price-wrapper>
         <span data-product-price>
-          {{ product.price | default: '1999' | money }}
+          {{ current_variant.price | default: '1999' | money }}
         </span>
 
         {% if product.compare_at_price_max > product.price %}
-          <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
+          <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
           <s data-compare-price>
-            {{ product.compare_at_price | money }}
+            {% if current_variant.compare_at_price > current_variant.price %}
+              {{ current_variant.compare_at_price | money }}
+            {% endif %}
           </s>
         {% endif %}
       </div>

diff --git a/src/sections/product.liquid b/src/sections/product.liquid
@@ -76,10 +76,12 @@
           {{ current_variant.price | money }}
         </span>
 
-        {% if current_variant.compare_at_price_max > current_variant.price %}
-          <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
+        {% if product.compare_at_price_max > product.price %}
+          <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
           <s data-compare-price>
-            {{ current_variant.compare_at_price | money }}
+            {% if current_variant.compare_at_price > current_variant.price %}
+              {{ current_variant.compare_at_price | money }}
+            {% endif %}
           </s>
         {% endif %}
       </div>