Forum
Product Variants within the Add to cart with options button. Also with multiple...
I am struggling to find any examples of how to list product variants with the add to cart button. There is one showing how to do this with radio buttons (see below), but with many options a drop down will work better.
Also if there are multiple options, such as size and type of from, how will that get displayed?
<perch:form id="add_to_cart" app="perch_shop" action="/bag">
<perch:if exists="has_variants">
<perch:productopts>
<h3><perch:productopt id="title" /></h3>
<perch:productvalues>
<label>
<perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
value="<perch:productvalue id="valueID" />" type="select" required="required" />
<perch:productvalue id="valueTitle" />
</label>
</perch:productvalues>
</perch:productopts>
</perch:if>
<perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
<perch:input type="submit" value="Add to cart" />
</perch:form>
Something like this but the name="opt-??" isn't working correctly.
Can you give an example of what you're trying to achieve?
Something along the lines of below. As options for that product.
Is this possible?
It looks like the name bit is wrong:
You're looping through all the
productvalues
and making a huge name from them.Why not try it with a static name and see if the rest of it works, then decide if you maybe want a
productopt
value in there instead.Thank you, I can't seem to get the select working. Looking at other forum posts it doesn't look like it is supported.
Further to this I have reverted back to the example of radio buttons but the template I am using below doesn't add anything to the cart. I have included the debug as well.
Sorry! another question.
What gets passed to the cart to add an option, is that based on the field <perch:productvalue id="valueID" />? Does it use that and the id="product" field to determine what gets added to the cart?
I want to know how to send that information to the cart via the form so I can use java-script to update the correct field to post to the cart?
Did you get the example working?
Yes I got the example working with the radio buttons. However, I am not sure if you can have multiple options? Or if that can be selects rather than radio buttons?
So I was going to have selects and use some javascript to update the value of Product ID and Option ID? Are these the two inputs that need to be posted to the cart to add them correctly?
Daniel, I'm struggling with this same issue... Can you share how you fixed it?
Thanks, Monty
Not sure if if will help you guys but here is my single product template that supports multiple options using radio buttons. Note that the code that appears within <perch:if exists="relskus"> is some custom stuff that I added to my options template for associating options with hex code colors to create swatches.
Here is an example of what this looks like on the page: https://imgur.com/a/Nuc1H
Thank you!