New Shopify Certification now available: Liquid Storefronts for Theme Developers

Unable to display out the percentage badge

Solved
Boonphei
Shopify Partner
38 0 6

Hi there, I was using this code to display my product discount badge but the code was able to run on span but unable on using assign. Since I want to display the percentage like the second image.

Boonphei_1-1653965876700.png Boonphei_2-1653965922929.png

 

 

{% if product.compare_at_price >= 0 and product.compare_at_price != null %}
<div class="product-photo-discounted-price-custom">
<span>Save</span>
<!-- <span>{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max | json }}%</span> -->
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
{% assign percentage = saving | at_least: percentage %}
</div>
{% endif %}

Accepted Solution (1)
made4Uo
Shopify Partner
3787 710 1102

This is an accepted solution.

Oh. Got it. You just have to add the forloop for variants. Try this

{% if product.compare_at_price >= 0 and product.compare_at_price != null %}
<div class="product-photo-discounted-price-custom">
      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
<span>Save</span><br>
     {{ percentage | append: "%" }}
</div>
{% endif %}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 3 (3)
made4Uo
Shopify Partner
3787 710 1102

Hi @Boonphei,

Try this code instead. 

{% if product.compare_at_price >= 0 and product.compare_at_price != null %}
<div class="product-photo-discounted-price-custom">
<span>Save</span><br>
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max | json }}%</span>
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
{% assign percentage = saving | at_least: percentage %}
</div>
{% endif %}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Boonphei
Shopify Partner
38 0 6

Hi @made4Uo,

it was unable to display the percentage too. Since the fourth row of this code have the wrong formula so I want to remove it.

 

<!-- <span>{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max | json }}%</span> -->

Boonphei_0-1653972602381.png

 

made4Uo
Shopify Partner
3787 710 1102

This is an accepted solution.

Oh. Got it. You just have to add the forloop for variants. Try this

{% if product.compare_at_price >= 0 and product.compare_at_price != null %}
<div class="product-photo-discounted-price-custom">
      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
<span>Save</span><br>
     {{ percentage | append: "%" }}
</div>
{% endif %}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!