Shopify - Product variant compare price is not updating when changing between variants

Question

Background

• on a product page there are multiple variants
• certain variants have a compare price (which means its cheaper)

I am trying to show the amount saved when a variant is cheaper than its original price. The function is working

{% if current_variant.price < current_variant.compare_at_price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %} 

The issue is that it only works for the initial page load, and this will show the discount saving. When I change the variant it keeps the data of saving discount from the previous variant. So how can I get it to update between change of the variants.

Attached are screenshots - the 10.95 saving is correct and done on the first page load

• then I change the variant and the discount saving is not updating accordingly. [![10.95 correct][1]][1] [![variant change but discount not updating][2]][2] Tried multiple options. Below is the full product price code.

{% comment %}
    Renders a list of product's price (regular, sale, unit)
    Accompanies product forms and meant to be updated dynamically
    Accepts:
    - variant: {Object} Variant Liquid object (optional)
    - product: {Object} Product Liquid object (optional)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

<dl class="price
  {% if available == false %} price--sold-out {% endif %}
  {% if compare_at_price > price %} price--on-sale {% endif %}
  {% if variant.unit_price_measurement %} price--unit-available {% endif %}"
  data-price
>

  {% if show_vendor and product %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  {%- comment -%}
    Explanation of description list:
      - div.price__regular: Displayed when there are no variants on sale
      - div.price__sale: Displayed when a variant is a sale
      - div.price__unit: Displayed when the first variant has a unit price
      - div.price__availability: Displayed when the product is sold out
  {%- endcomment -%}
  <div class="price__pricing-group">
    <div class="price__regular">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--regular" data-regular-price>
          {{ money_price }}
        </span>
      </dd>
    </div>
    <div class="price__sale">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--sale" data-sale-price>
          {{ money_price }}
        </span>
      </dd>
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
      </dt>
      <dd>
        <s class="price-item price-item--regular" data-regular-price>
          {{ compare_at_price | money }}
        </s>
      </dd>
      <dd>
        You save {{ current_variant.compare_at_price | minus: current_variant.price | money }}
      </dd>
    </div>
    <div class="price__badges">
      
      
      <span class="price__badge price__badge--sale" aria-hidden="true">
        <!--         <span>{{ 'products.product.on_sale' | t }}</span> -->
        <span class="price_bagde_perc_cust">
          
 {% if current_variant.price < current_variant.compare_at_price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}        
          
          {% if variant.price < variant.compare_at_price %} {{ variant.compare_at_price | money }}{% endif %}
          
     
         
          
          
         You save {{ product.metafields['discountpricepdp']['salespricepdp'] }}
          
        </span>
      </span>
      <span class="price__badge price__badge--sold-out">
        <span>{{ 'products.product.sold_out' | t }}</span>
      </span>
      
    </div>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-unit-price-base-unit>
          {%- if variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
</dl>
'''

Thanks and hopefully someone will be able to resolve it


  [1]: https://i.stack.imgur.com/40I5U.png
  [2]: https://i.stack.imgur.com/6Urfk.png