Liquid, JavaScript, themes, sales channels
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?
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?
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.
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.
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.
Try this:
{% assign unitPrice = product.variants[0].price | divided_by: numItems | money %}
I've really only used capture when I'm including a snippet which outputs text.
I was using assign originally but changed it to capture to see if that would help, but either way I get the same result.
I'm at a loss. What theme are you editing?
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
Still, a puzzle to be solved, because the next client may prefer it bold.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024