Product Variants within the Add to cart with options button. Also with multiple...

Something like this but the name="opt-??" isn't working correctly.

<perch:productopts>
    <h3><perch:productopt id="title" /></h3>
        <perch:input id="options" name="opt-<perch:productvalues><perch:productvalue id="optionID" />[]</perch:productvalues>"
             options="<perch:productvalues><perch:productvalue id="valueTitle" />|<perch:productvalue id="valueID" />,</perch:productvalues>" type="select" required="required" />
 </perch:productopts>

Something along the lines of below. As options for that product.

  <label for="size">Size:</label>
  <select name="size" id="size">
    <option value="large">Large +£15</option>
    <option value="larger">Larger +£20</option>
  </select>
  <label for="frame">Frame:</label>
  <select name="frame" id="frame">
    <option value="framelarge">Large +£10</option>
    <option value="framesmall">Small +£5</option>
  </select>

Is this possible?

It looks like the name bit is wrong:

name="opt-<perch:productvalues><perch:productvalue id="optionID" />[]</perch:productvalues>"

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.

<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>
                  <perch:before><ul></perch:before>
                    <li>
                      <label>
                        <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                          value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                        <perch:productvalue id="valueTitle" />
                      </label>
                    </li>
                  <perch:after></ul></perch:after>
                </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>

Debug Message
SELECT * FROM perch2_pages WHERE pagePath='/bag.php' LIMIT 1
SELECT * FROM perch2_shop_cart WHERE cartID=18
SELECT * FROM perch2_shop_cart WHERE cartID=18
SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0
SELECT * FROM perch2_shop_products WHERE productID='personalised-message-in-a-jar-jar1' AND productDeleted IS NULL LIMIT 1
SELECT itemID, itemQty FROM perch2_shop_cart_items WHERE cartID=18 AND productID=0
SELECT * FROM perch2_shop_products WHERE productID=0 AND productDeleted IS NULL LIMIT 1
Limiting based on stock.
------------------------------ Calculating cart ------------------------------
SELECT * FROM perch2_shop_cart WHERE cartID=18
SELECT * FROM perch2_shop_cart WHERE cartID=18
SELECT * FROM perch2_shop_tax_locations WHERE locationID=1 AND locationDeleted IS NULL LIMIT 1
SELECT locationID FROM perch2_shop_tax_locations WHERE locationIsHome=1 LIMIT 1
SELECT * FROM perch2_shop_tax_locations WHERE locationID=1 AND locationDeleted IS NULL LIMIT 1
SELECT * FROM perch2_shop_currencies WHERE currencyID=47 LIMIT 1
SELECT COUNT(productID) AS product_count, SUM(itemQty) AS item_count FROM perch2_shop_cart_items WHERE cartID=18
Tax mode: inc
SELECT * FROM perch2_shop_cart_items WHERE cartID=18 ORDER BY itemID ASC
UPDATE perch2_shop_cart SET cartTotalItems=NULL, cartTotalProducts='0', cartTotalWithTax='0.00', cartTotalWithoutTax='0.00' WHERE cartID=18
INSERT INTO perch2_shop_cart_data(cartID,productID,cartData) VALUES(18,'personalised-message-in-a-jar-jar1','{\"opt-1\":[\"2\"],\"product\":\"personalised-message-in-a-jar-jar1\"}')
SELECT setID FROM perch2_category_sets WHERE setSlug='' LIMIT 1
SELECT main.* FROM perch2_categories main WHERE 1=1 AND (catPath='ba/') ORDER BY catTreePosition ASC
Using template: /templates/categories/category_description.html
Using template: /templates/pages/attributes/default.html
Using sub-template: /templates/pages/attributes/seo.html
SELECT regionKey, regionHTML FROM perch2_content_regions WHERE regionPage='/bag.php' OR regionPage='*' ORDER BY regionPage DESC
Using template: /templates/shop/cart/cart_mini.html
SELECT setID FROM perch2_category_sets WHERE setSlug='occasions' LIMIT 1
SELECT main.* FROM perch2_categories main WHERE 1=1 AND setID=2 ORDER BY catTreePosition ASC
[3] Using template: /templates/categories/category_menu.html
SELECT setID FROM perch2_category_sets WHERE setSlug='shop' LIMIT 1
SELECT main.* FROM perch2_categories main WHERE 1=1 AND setID=1 ORDER BY catTreePosition ASC
[5] Using template: /templates/categories/category_menu.html
SELECT * FROM perch2_pages WHERE pageNew=0 AND pageHidden=0 ORDER BY pageTreePosition ASC
SELECT pageTreePosition FROM perch2_pages WHERE pagePath='/bag.php' LIMIT 1
SELECT pageID FROM perch2_pages WHERE pageTreePosition IN ('000-007', '000') ORDER BY pageTreePosition DESC
[4] Using template: /templates/navigation/item.html
Using cart from cache.
Using template: /templates/shop/cart/cart.html

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?

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

<div class="imagewrap galleria">
    <img src="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" alt="<perch:shop id="title" type="text" label="Title" required="true" order="2" />" />
    <perch:repeater id="addimages" label="Additional Product Photos" order="6">
        <img src="<perch:shop id="addimage" type="image" label="Additional Photo" width="800" />" alt="<perch:shop id="title" type="text" label="Title" required="true" order="2" />" />
    </perch:repeater>
</div>
<div class="productdetails">
    <h2><perch:shop id="title" type="text" label="Title" required="true" order="2" /></h2>
    <div class="desc">
        <perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" size="s" />
        <perch:shop id="moreinfo" type="textarea" label="More Info" editor="markitup" order="3" markdown="true" size="s" />
        <div class="price">
            <p><perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="m" min="0" step="any" /></p>
        </div>
    </div>
</div>  
<div class="productform">
    <perch:form id="add_to_cart" app="perch_shop" action="/store/cart/">
        <perch:if exists="has_variants">
            <div class="optionwrap">
                <perch:productopts>
                    <div class="optionset">
                        <perch:if exists="relskus">
                            <div class="optcolors">
                                <ul>
                                <perch:repeater id="relskus" label="Colors" help="If needed">
                                    <li data-relsku="<perch:productopt id="relsku" type="text" label="Associated SKU" help="This must match the sku listed below." />" data-hex="<perch:productopt id="hexcode" type="text" label="Hex Color" help="6 digit hexidecimal color code if needed. Omit the # sign."/>">
                                        <perch:productopt id="hexcode" type="text" label="Hex Color" help="6 digit hexidecimal color code if needed. Omit the # sign."/>
                                    </li>
                                </perch:repeater>
                                </ul>
                            </div>
                        </perch:if>
                        <h3><perch:productopt id="title" /></h3>
                        <perch:productvalues>
                            <perch:before><ul class="optionid<perch:productopt id="optionID"/>"></perch:before>
                                <li class="productoption">
                                    <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]" value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                                    <label for="" class="<perch:productvalue id="valueSKUCode" />"><span><perch:productvalue id="valueTitle" /></span><div class="swatch"></div></label>
                                </li>
                            <perch:after></ul></perch:after>
                        </perch:productvalues>
                    </div>
                </perch:productopts>
            </div>
        </perch:if>
        <perch:if exists="customize">
            <h3>Customization</h3>
            <p>
                At checkout confirmation you will be able to specify the name or names to customize your shirt. 1 First name per shirt.
            </p>
        </perch:if>
        <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
        <perch:input type="submit" value="Add to cart" />
    </perch:form>


</div>

Thank you!