Hi, I'm trying to create variant options similar to the included example. I figured out the text, but am having a hard time with the variant image and price. I'm on a deadline, so figured a question here wouldn't hurt. Also, how do you style "active" states?
But that should be possible. With alpine JS you can do it like this: Image li-js-object:src="variants.find(variant => variant.options.includes(variantName))?.featured_image.src"
Text li-js-object:="variants.find(variant => variant.options.includes(variantName))?.title"
To create a active State you can use the webflow radio custom design from webflow or add a class with alpine js: x-bind:class="selected_or_first_available_variant?.options.includes(variantName) ? 'is-active' : ''"
Thanks. I decided to go with a simpler design for now, but would still like to be able to display each variant's price in each swatch. I'm new to all of this, and my best guess was li-object="variant.price | money" which didn't work.
It depends a bit on the setup. Normally the setup like you have it, are with options. And options have no price or image information. But with alpinejs you can search for the information like in the example above. But this is a bit more advanced.
