How can I display percentage discount based on selected variant?

[GolfCenter]

Hi everyone,

I'm using this code and it works fine, it displays the % discount but I want to display the % discount depending on the variant selected, any idea please?

<span class="discount_product_page">
{% 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 %}
{{ percentage }}%
</span>

Example page here https://www.golfcenter.fr/products/callaway-golf-supersoft-blanche?variant=40227097542692

[PageFly-Victor]

Hi @GolfCenter ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this ideaTo display the % discount depending on the variant selected, you can modify the code to include an if statement that checks if the current variant is selected, and if it is, then display its discount percentage. Here's an example code snippet that demonstrates this:

{% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{{ saving }}% off
{% endif %}
{% endfor %}

 In this code, selected_variant refers to the currently selected variant. The code loops through all the variants of the product and checks if the current variant is equal to the selected variant. If it is, then it calculates the discount percentage and displays it.

Note that you would need to define the selected_variant variable before this code, so that it contains the currently selected variant.

Hope my answer will help you.

Best regards,

Victor | PageFly

[GolfCenter]

I’ve replaced my code by your but it does not work.

[PageFly-Victor]

I apologize for the confusion. Here's an updated version of the code that should work:

{% assign percentage = 0 %}
{% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{% assign percentage = saving | at_least: percentage %}
{% endif %}
{% endfor %}
{{ percentage }}%

In this code, we start by initializing the percentage variable to 0. We then loop through all the variants of the product and check if the current variant is equal to the selected variant. If it is, we calculate the discount percentage using the formula you provided, and update the percentage variable to the higher of its current value or the calculated percentage (using the at_least filter). Finally, we display the percentage variable.

Note that you would need to define the selected_variant variable before this code, so that it contains the currently selected variant. You can do this using the following code:

{% assign selected_variant = product.selected_or_first_available_variant %}

[GolfCenter]

Hi, thanx again for your help.
I’ve place your code instead mine :

{%- if product.type == 'Balles' -%}

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign percentage = 0 %} {% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{% assign percentage = saving | at_least: percentage %}
{% endif %}
{% endfor %}
{{ percentage }}%


But still not work. The % does not change when I selected another variant. You can have a look on this product for example : https://www.golfcenter.fr/products/callaway-golf-supersoft-blanche

[PageFly-Victor]

Thank you for providing the link to the product. I took a look at the page, and I can see the issue you're facing. The problem is that the code is only executed once when the page loads, so it displays the discount percentage for the initially selected variant. When you select a different variant, the code doesn't re-run, so the displayed discount percentage doesn't change.

To solve this issue, we can use JavaScript to update the discount percentage when the variant is changed. Here's an example code snippet that demonstrates this:

{%- if product.type == 'Balles' -%}

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign percentage = 0 %} {% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{% assign percentage = saving | at_least: percentage %}
{% endif %}
{% endfor %}
<span id="discount_product_page">{{ percentage }}%</span>

<script>
  // Update discount percentage when variant is changed
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('[name="id"]').forEach(function(radio) {
      radio.addEventListener("change", function() {
        var percentage = 0;
        var selected_variant = JSON.parse(this.dataset.variant);
        {% for variant in product.variants %}
          {% if variant == selected_variant %}
            var saving = {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round }};
            percentage = Math.max(percentage, saving);
          {% endif %}
        {% endfor %}
        document.getElementById("discount_product_page").textContent = percentage + "%";
      });
    });
  });
</script>

{% endif -%}

In this code, we first display the discount percentage using a span element with the id attribute discount_product_page. We then use JavaScript to add an event listener that listens for changes to the selected variant. When a variant is changed, the event listener calculates the discount percentage for the newly selected variant and updates the text content of the span element to display the new percentage.

I hope this solution works for you!

[GolfCenter]

Thanx for you help and your job but still not working. 

But I think it’s because I’m using Bcpo app (Variant Option Product Options) from Relentlessapps that displays the variants… 

Need to hide a dev I think.

[PageFly-Victor]

I see, thank you for letting me know. It's possible that the app is interfering with the code.

[GolfCenter]

Hi victor could you please help me for this please ? The result I'm expecting is in bold

{% 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 %}
{% assign discount = product.compare_at_price | times:percentage | divided_by: 100 | money %}
{% endfor %}
<span class="ProductItem__Price Price Price--highlight Text--subdued">I WOULD LIKE THIS PART TO BE : (PRODUCT.COMPARE_AT_PRICE) MINUS (DISCOUNT)</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money }}</span>

[GolfCenter · Accepted solution]

I've got it :

{% 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 %}
{% assign discount = product.compare_at_price | times:percentage | divided_by: 100 %}
{% assign price = product.compare_at_price %}
{% endfor %}
<span class="ProductItem__Price Price Price--highlight Text--subdued" style="text-transform:lowercase">à partir de {{ price | minus: discount | money }}</span>

[MarcelV]

Hello there!

Can you please tell me where exactly you placed this code?

With kind regards

Marcel

[Mukuldm]

Hi, my variant code is not working. Please suggest the solution.

https://taoparis.in/collections/heels/products/tao-paris-women-solid-block-heels-4?variant=404497420...

[alphabeta]

it working 

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign percentage = 0 %}

{% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{% assign percentage = saving | at_least: percentage %}
{% endif %}
{% endfor %}

<span id="discount_product_page" class="sela-off">{{ percentage }}% OFF</span>

<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('[name="id"]').forEach(function(radio) {
radio.addEventListener("change", function() {
var selectedVariantId = this.value; // Get the selected variant ID
var variants = {{ product.variants | json }}; // Get the variants data from Liquid

var selectedVariant = variants.find(function(variant) {
return variant.id == selectedVariantId;
});

if (selectedVariant && selectedVariant.compare_at_price > selectedVariant.price) {
var saving = Math.round(((selectedVariant.compare_at_price - selectedVariant.price) / selectedVariant.compare_at_price) * 100);
document.getElementById("discount_product_page").textContent = saving + "% OFF";
} else {
document.getElementById("discount_product_page").textContent = "0%";
}
});
});

// Trigger the change event to update the discount on initial load
var initialRadio = document.querySelector('[name="id"]:checked');
if (initialRadio) {
initialRadio.dispatchEvent(new Event('change'));
}
});
</script>