Why is my Shopify unit price calculation error occurring with certain product variants?

smcniel24
Tourist
5 0 1

I'm having a weird error.  My products are come in a pack and the displayed prices are what the pack price is.  You get a number of items per pack and I customized the collections page to show the price per unit in addition to the main pack price.

 

I'm simply taking the price of the first variant and dividing by the number of items in the pack.  Let's say the price per pack is $20.00 and you get 5 items in the pack.  The price per unit is $4.00

here is my simple code and this works fine displaying $4.00 PER UNIT:

{% capture unitPrice %}{{ product.variants[0].price | divided_by: numItems | money }}{% endcapture %}
{{ unitPrice  }} PER UNIT

when I wrap this inside a span tag and make it bold it gives me the price $20.00 PER UNIT and seems to disregard the  {% capture %} of the unitPrice.

<span class="price-bold">{{ unitPrice  }} PER UNIT</span>

 

It only happens to products that have color and size variant options and works fine when a product only has a size variant option.

Any thoughts oh wise ones?

Replies 11 (11)

Jacob_Killian
Shopify Partner
38 3 9

What context is this liquid?  Section/Snippet/Layout?  I don't think I have an answer, but I'm curious if there's something in the context which makes the html ignore the liquid.  I'm also curious if product.variants[0].price exists on the variants with two options.  Does one of your options not have a price associated with it?  Could you need product.variants[1].price?

smcniel24
Tourist
5 0 1

Thanks for the reply @Jacob_Killian 

I'm editing the product_grid_item Snippet

there is a price on every variant option, I did try and change it to variants[1].price as well, but get the same results.

The weird thing the calculation shows up perfect when the <span> tag is removed. 

Jacob_Killian
Shopify Partner
38 3 9

That is weird.  I didn't see any problems in the code.  Maybe javascript is getting hold of that span class?  change the class?  change it to a different html element?  Just thinking of troubleshooting it.

smcniel24
Tourist
5 0 1

i did try and just put <strong></strong> around the price per unit and it still displays the un-calculated price $20.00.

also, at first i had <span style="font-weight:bold;"></span>, but was giving me an error so I added a css class to see if that would render something different, but no luck.

Jacob_Killian
Shopify Partner
38 3 9

Try this:

{% assign unitPrice = product.variants[0].price | divided_by: numItems | money %}

 

Jacob_Killian
Shopify Partner
38 3 9

I've really only used capture when I'm including a snippet which outputs text.

smcniel24
Tourist
5 0 1

I was using assign originally but changed it to capture to see if that would help, but either way I get the same result.

Jacob_Killian
Shopify Partner
38 3 9

I'm at a loss.  What theme are you editing?

smcniel24
Tourist
5 0 1

me too.  

the nice thing is my client actually likes the un-bolded look better, so as of right now i don't have to worry about it. 🙂

i'm using the Impulse theme

Jacob_Killian
Shopify Partner
38 3 9
Try it with the debut theme maybe, see if it reproduces?
Jacob_Killian
Shopify Partner
38 3 9

Still, a puzzle to be solved, because the next client may prefer it bold.