Forum

Thread tagged as: Question, Problem, Shop

Different input types for product variants

Hi, just a quick question about listing product variants.

I have an option that requires radio buttons and another that requires a check box.

Here's the relevant section of the template

<perch:if exists="has_variants">
     <perch:productopts>
        <p class="divider"><strong><perch:productopt id="title" /></strong></p>
        <perch:productvalues>
          <perch:before><ul class="variantList"></perch:before>
            <li>
              <label>
                <perch:input env-autofill="false" 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>

Just after some advice on displaying the two variants separatly so that I can specify a checkbox for the second rather than radio?

Cheers

Simon Russell

Simon Russell 0 points

  • 6 months ago
Hussein Al Hammad

Hussein Al Hammad 80 points
Registered Developer

Hello Simon,

so that I can specify a checkbox for the second rather than radio?

Instead of relying on the order of the options I would test against the option title.

So I would use one input type as the default for all options, and use perch:if to conditionally use a different input type based on the option title.

<perch:productopts>
    <perch:if id="title" value="Colour">
        <!--* radio input *-->
    <perch:else/>
        <!--* default input *-->
    </perch:if>
</perch:productopts>

Awesome Hussein!

Thanks heaps for that very clean solution!

Cheers