"You save % ($)" variable does not update on variant change

[AlBu07]

Hi all,

I’m trying to implement “You save % ($)” message, however, I run into a little issue with products that have variables - the savings would not update on variant change. This I believe is due to missing JS as it’s an added feature that’s not within the original Debut theme.

I have tested these 2 versions:

1. This version works fine with products with no variants, however, it obviously doesn’t work with different variants.

          {% if product.compare_at_price> product.price %}Today You Save: {{ product.compare_at_price | minus: product.price | times: 100.0 |divided_by: product.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}% ({{ product.compare_at_price | minus: product.price|money}})

        {% endif %}

2. This version only works once the product with selected variant is reloaded with handle being in the URL

{% if product.compare_at_price> product.price %}Today You Save: {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 |divided_by: current_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}% ({{ current_variant.compare_at_price | minus: current_variant.price | money}})

        {% endif %}

Essentially, I need it to update instantly the same way it updates the price upon variant change.

If anyone would be kind enough to share JS for this I would greatly appreciate it.

Best,

Al

[nidhipatel]

Hi @AlBu07

Please add the below code in product-price.liquid file.

{% if product.compare_at_price> product.price %}

  Today You Save: 
  
    
      {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 |divided_by: current_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}% 
    
    
      ({{ current_variant.compare_at_price | minus: current_variant.price | money}})
    
 

 {% endif %}

Please check the attached screenshot:

Please add the below code in theme.js file.

var discountPrice = document.querySelector('.discount-amount');
 var discountPercentage = document.querySelector('.discount-percentage');
 discountPrice.innerHTML = theme.Currency.formatMoney((variant.compare_at_price - variant.price) , theme.moneyFormat);
 discountPercentage.innerHTML = ((variant.compare_at_price - variant.price)*100/variant.compare_at_price).toFixed() + '%';

Please check the attached screenshot:

Happy Coding!!

[AlBu07]

@nidhipatel

Wow, you’re a superstar! Thanks so much mate, it works like a charm.

Just one little thing I’d like to add - I have a feature coded in which requires users to select a variant before they can add it to cart (until then ATC is disabled). So the code you provided works like a charm once the variant is selected, however, it says “You Save: 0% ($0)” before customer selects a variant. Could you modify it slightly so that before the variant is selected, it either says “You Save: Pick an option to see” or it simply displays savings of the first available variant? Currently, before the variant is selected, the price of the first available variant is also displayed and then it changes once user makes a choice.

Thanks so much in advance, you’re a legend.

Best,

Al

[nidhipatel]

Hi @AlBu07 ,

Thank you so much for appreciation.

I understand your issue and working on that. It would be great if you provide your product page url , then it will be give more clarification.

[AlBu07]

@nidhipatel

Amazing, thanks so much.

I’d rather not share the link on a public domain, I hope you understand. But you seem to understand exactly what I need, so I don’t think there will be any issues.

Best,

Al

[nidhipatel]

Hi @AlBu07

Yes, I understand your issue.

Please replace the below code with previously given code in product-price.liquid file.

{% if product.compare_at_price> product.price %}

  Today You Save: 
  
    
      {{ product.first_available_variant.compare_at_price | minus: product.first_available_variant.price | times: 100.0 |divided_by: product.first_available_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}% 
    
    
      ({{ product.first_available_variant.compare_at_price | minus: product.first_available_variant.price | money}})
    
 

 {% endif %}

I hope it works for you.

[AlBu07]

@nidhipatel

Phenomenal! It works like a charm.

I can’t thank you enough, you’re a legend.

Best,

Al

[FileNumberDate]

This code works with Debut theme. However, a newly updated screenshot could be useful to others.

Thanks for the tutorial