Display size in the cart

Hey Kevin, if the size is a variant/option, this should do the trick:

li-js-text="product.options_with_values.find(item => item.name === 'Size').value"

Hmm that didnt seem to work

https://117fc9-51.myshopify.com/cart
https://preview.webflow.com/preview/liquify-starter-template-1-0-f5cb72?utm_medium=preview_link&utm_source=designer&utm_content=liquify-starter-template-1-0-f5cb72&preview=2e903db79948c9938579805d4b825151&pageId=66e97989bb936bc07385b69b&locale=en&workflow=preview

I also have a li-object:href attribute on the same element, maybe that is not possible?

Can you try x-text="product.options_with_values.find(item => item.name === 'Size').value" instead then? And is the option called "Size" with a capital S? It needs to be exactly the same.

Yeah its Size! 🙂

Ill try that!

Did not seem to work either, the attribute should be x-text? Havent seen this before

Can you also give me the password to the shop? :)

Ofc sorry! Password is "fourtimesone" press the login button in the right bottom corner (its very low opacity)

Ah, sorry. I didn't read it right and thought you meant the mini cart.

If your size option is always at the same position, you can do it like this:
li-object="item.options_with_values[0].value"

The number is just the index of the option. So if you only have sizes as options, you can leave it as 0

Awesome thanks Jan!

I have a wrapper with the size, with the text element and this li-object attribute value in.
Whenever I dont have this varient set, I want to hide the wrapper. How can I do that?

Actually what would be better is just to render a list of wrappers with variant type and variant value in it?

So you could just put an li-unless="item.product.has_only_default_variant" on the wrapper for the visibility

Or, as you said, you could loop over all the options and their respective values like so (li-unless wraps li-for and li-for wraps the other two attributes):

li-unless="item.product.has_only_default_variant"

li-for="option in item.options_with_values"

li-object="option.name"
li-object="option.value"

That worked exactly how I wanted it, huge thanks

Where do you find these, on the shopify cheatsheet? I'd like to learn how to look it up 🙂

I only use the shopify.dev documentation. So in this case, you could look up the line_item object and then go deeper depending on what you need: https://shopify.dev/docs/api/liquid/objects#line_item

You also always have a nice json visualisation on the right side