liquid inside html span error

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?

0 Likes
Jacob_Killian
Excursionist
23 1 7

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?

0 Likes
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. 

0 Likes
Jacob_Killian
Excursionist
23 1 7

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.

0 Likes
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.

0 Likes
Jacob_Killian
Excursionist
23 1 7

Try this:

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

 

0 Likes
Jacob_Killian
Excursionist
23 1 7

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

0 Likes
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.

0 Likes
Jacob_Killian
Excursionist
23 1 7

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

0 Likes
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