Need Help With The Installments Code - JS Update

[riodeloja]

Hi there!

I need to show the installment price on the product page. Thinking about it, I added this code in the section "product-template.liquid".

<span id="PrecoParcelado"
<span style='font-size:16px;'>ou em até 12x de <span class="money">{{ price | divided_by: 12 | times: 1.2044 | round:2 | money }} </span></span></span>

Since the parcels are divided up to 12x with interest and the rate is 20.44%; that's the code I used.

But the problem is that this code only works for the first variant of the product. For example, in a product that has 3 different sizes, it just works for the first one. When the client chooses other sizes, the installment information doesn't change the way it should, it just keeps showing the price installments for the first variant. 

I know I need to add some javascript (in theme.js or theme.min.js?), but I don't know how to create the code and where insert it.

I am using Debutify Theme

Could someone help me with that, please?

Thanks in advance and waiting for someone to reply.

[debutifysupport]

Hey @riodeloja 

I'll assume that the theme version is 4.10.3, if so, you can replace the theme.min.js.liquid file with the code provided on the link https://cdn.shopify.com/s/files/1/0278/3828/3836/files/installmentJS.txt?v=1680540697.

The variant price is divided by 12 and adds 20.44%.

If you need to change the rate, with the file opened, press CTRL + F and search for the value 1.2044. Change the highlighted value to the updated rate. 

On the product-template file from the snippets folder, add the following HTML before the last div of the capture produce_price. 

 <span id="InstallmentPrice">
      ou em até 12x de <span class="product-installment__price"> <span class="money">{{ price | divided_by: 12 | times: 1.2044 | round:2 | money }} </span></span>
</span>

The installment price will update when changing the variant selected. 

[MOBX]

is there a way to do this in dawn theme ??
i have tried to implement similar code to display installments under the price, but it is not working when different variant with different price is selected, i mean, it doesnt update the installment calculation

<div id="installments-info">
  <!-- Initial installment information -->
  {% assign initialVariant = product.selected_or_first_available_variant %}
  {% assign initialVariantPrice = initialVariant.price %}
  {% assign initialInstallments = initialVariantPrice | divided_by: 12 %}
  12 meses de {{ initialInstallments | money }}
</div>

<script>
  // Function to update installment information based on selected variant
  function updateInstallmentsInfo(variant) {
    var variantPrice = variant.price;
    var installments = variantPrice / 12;
    
    var installmentsInfo = document.getElementById('installments-info');
    installmentsInfo.innerHTML = '12 meses de ' + (installments).toFixed(2);
  }
  
  // Listen for variant selection event
  document.addEventListener('variant:changed', function(event) {
    var selectedVariant = event.detail.variant;
    updateInstallmentsInfo(selectedVariant);
  });
</script>