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

Rayanne
New Member
7 0 0
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.
0 Likes
gina-gregory
Shopify Expert
710 48 176

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.

0 Likes
Rayanne
New Member
7 0 0

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

0 Likes
gina-gregory
Shopify Expert
710 48 176

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

Screen Shot 2021-01-11 at 4.06.45 PM.png

0 Likes
Rayanne
New Member
7 0 0

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.

0 Likes
gina-gregory
Shopify Expert
710 48 176

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.

0 Likes
Rayanne
New Member
7 0 0

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?

0 Likes
gina-gregory
Shopify Expert
710 48 176

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)
);

 

0 Likes
Rayanne
New Member
7 0 0

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:

Print 1 - Help Shopify.PNGPrint 2 - Help Shopify OK.PNG

0 Likes