Need help with the installments code I add in my Shopify Store

[Rayanne]

Hi there!

In Brazil, people have a preference to pay for a purchase in parcels, so it's really important for a website to show the installment on the product page. Thinking about it, I added this code in the section "product-template.liquid".

<p style='font-size:20px'>ou em até 12x de <span style="color:#FF6D3C">{{ product.price | times: 1.1979 | divided_by: 12 | money }}</span>

Since the parcels are divided up to 12x with interest and the rate is 19,79%; 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 installments for the first variant. And I don't know what should I change in the code to fix that.

Could someone help me with that, please?

Thanks in advance and waiting for someone to reply.

[gina-gregory]

You need to add some javascript to your theme code to update your message when selecting a new variant. All themes have (or should have) some javascript already set up to fire when this happens. You just need to find it and add your code to it.

[Rayanne]

How do I find it and how does it look like? My theme is Minimal.

[gina-gregory]

Look for this code in the theme.js file in Assets, and put your code somewhere near where the arrow is pointing.

[Rayanne]

I try putting my code above and under the "//Regardless of stock, update the product price" and in both situations all the product photos just turned white. I try putting my code under the "Shopify.formatMoney(variant.price, moneyFormat)" too, but it didn't work out either.

[gina-gregory]

No, you can't put that code in there and expect it to work. By "your code", I meant your javascript code to make this work. Sorry, I wasn't more clear.

[Rayanne]

I'm sorry, but I just got started with all of this code thing. So I really would appreciate if you could tell me how can I find my Javascript code to put in there?

[gina-gregory]

You have to write it. 

Try this. Put this in your product page:

<p style='font-size:20px'>ou em até 12x de <span class="parcel-cost" style="color:#FF6D3C">{{ variant.price | times: 1.1979 | divided_by: 12 | money }}</span>

 Then add this into the javascript, where I showed you:

var parcelCost = (variant.price * 1.1979) / 12;
$(".parcel-cost").text(
  Shopify.formatMoney(parcelCost, moneyFormat)
);

[Rayanne]

It worked, now when the client chooses the variant, the installments change accordingly. The problem now is when there is no variant selected. It doesn't show the value of the parcel referring to the price above, instead, it just shows zero. Is it possible to change that? If so, how can I do that?

By the way, thank you so much for your patience so far. *-*

Here I have some prints to show:

[riodeloja]

Gina, I have the same issue for Debutify Theme. How can I solve it in this theme?

Can you give me some help to edit the theme.js file in order to update the parcel-cost?

Thank you

[Missao_digital]

Hello, could you help me to show the installment information on my products, only the value is showing, but I want it to appear in how many times it will be paid in installments.

<!-- snippet/product-price.liquid -->
{% if product.title %}
  {%- assign compare_at_price = product.compare_at_price -%}
  {%- assign price = product.price -%}
  {%- assign price_varies = product.price_varies -%}
  {%- assign available = product.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign price_varies = false -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

{%- assign money_parcelado = price | divided_by: 100 | times: 100 | divided_by: 12 | money -%}

{% if compare_at_price > price %}
  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <span class="product-price_price product-price_sale">
    <span style="font-size:19px; font-weight: bold;" class="product-price__price">{{ money_cartao }}</span> <span style="font-size:14px; color:Black;" ></span> {{ money_price }}<span style="font-size:14px; color:Black" > no cartão</span>
           <span style="font-size:14px; color:black;" class="product-price_price product-price_sale">
              em até 12x de <span style="font-size:15px; font-weight: bold; color: #1990c6 ;">{{ money_parcelado }}<span> sem juros</span>
  </span>

  {% if settings.show_saved_amount and settings.show_discount_amount == 'money_save' %}
  <span class="salePrice sale-tag large"> 
    {% assign sale = product.compare_at_price | minus:  product.price |  money %}
    {{ 'products.product.on_save_like_price' | t }} {{sale}}
  </span>
  {% endif %}
{% else %}

  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <span class="product-price__price">{{ money_price }}
             </span>

{% endif %}

[riodeloja]

Oi Rayanne, vc conseguiu resolver seu problema?

estou utilizando o tema debutify e não consegui ajustar o javascript. consegue me ajudar?