Forum

Thread tagged as: Shop

Product Option Detection?

Is there a correct way to detect the product options in perch templates?

When looping through the options I want to detect an option group and render it out using a select field rather than radio buttons. Is something like the following possible?

<perch:if productopt id="t-shirt-size" match="eq" value="t-shirt-size">
</perch:if>

Thanks,

Dan
Dan Lee

Dan Lee 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What's the context?

This is certainly not valid syntax:

<perch:if productopt
Dan Lee

Dan Lee 1 points

5 years ago

The documentation indicated there is a way of controlling the output of the options for a product, like below. It cycles through each set of options and creates radio buttons. I'm trying to apply radio buttons to one set of options and a drop down select for another set of options. Is there a way to detect within the below loop which options is being outputted so that I can then apply different html.

<perch:productopts>
  <fieldset>
    <legend><perch:productopt id="title" /></legend>
    <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>
  </fieldset>
</perch:productopts>
<perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

If you use <perch:showall /> you can see all the IDs available in the template at that point that you can test for with perch:if.
Dan Lee

Dan Lee 1 points

5 years ago

Thanks Drew!

Full solution below if anyone needs it:

<perch:productopts>
  <fieldset>
    <legend><perch:productopt id="title" /></legend>

    <perch:productvalues>
    <perch:if id="optionID" match="eq" value="1" />

        <perch:before><ul></perch:before>
        <li>
          <label>
            <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:else />

      <perch:before><select></perch:before>

          <option id="options" name="opt-<perch:productvalue id="optionID" />[]"
            value="<perch:productvalue id="valueID" />" required="required" />
            <perch:productvalue id="valueTitle" />
          </option>

      <perch:after></select></perch:after>

    </perch:if>
    </perch:productvalues>
  </fieldset>
</perch:productopts>
<input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />