Forum

Thread tagged as: Question, Shop

Variants as a dropdown

Hi

I'm having difficulty making my Shop Variants as a dropdown and added info from https://docs.grabaperch.com/templates/field-types/select/ and currently have;

<perch:variants>

            <div class="variant">
                <perch:variant id="productVariantDesc" type="text"/>
                <perch:variant id="price" type="shop_currency_value" />
                <perch:form id="add_to_cart" type="select" label="Select option" allowempty="false" required="true" options="<perch:variant id="productID" type="hidden" env-autofill="false" />" app="perch_shop" action="/shop/cart" class="add-to-cart-form">
                    <perch:input id="product" type="hidden" env-autofill="false" value="<perch:variant id="productID" type="hidden" env-autofill="false" />" />
                    <perch:input type="submit" value="Add to cart" class="btn btn-primary btn-sm"/>
                </perch:form>
            </div>
        </perch:variants>

Any help would be greatly received.
Wayne Hooper

Wayne Hooper 6 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Something like:

<perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />"  />
Wayne Hooper

Wayne Hooper 6 points

4 years ago

Thanks Drew

Its not quite loading the variants in the dropdown, its adding a dropdown to each variant listed... but its a good start I will keep tweaking...

Wayne
Wayne Hooper

Wayne Hooper 6 points

4 years ago

I've tried a range on the example you've given and no joy... I currently have;

<perch:variants>
            <perch:variant id="productVariantDesc" type="text" />
            <perch:variant id="price" type="shop_currency_value" />
            <perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" />
            <perch:input type="submit" class="btn default-primary" value="Add to cart" />
        </perch:variants>

Which is listing the options in a row, rather than a select/dropdown with an add to cart button. Where am I going wrong on this?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Not within perch:variants - this is a precompiled string, you don't need to iterate.

<perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" />
Wayne Hooper

Wayne Hooper 6 points

4 years ago

Thanks. I've removed perch:variants and currently have;

<perch:if exists="has_variants">
    <div class="row">
    <div class="col-xs-12">
    <h5>Purchase options</h5>
        <perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" />
        <perch:input type="submit" class="btn default-primary" value="Add to cart" />
    </div>
    </div>
    <perch:else />
        <div class="row">
        <div class="col-xs-12">
            <perch:shop id="price" type="shop_currency_value"   />
            <perch:shop id="sale_price" type="shop_currency_value"   />
            <perch:shop id="trade_price" type="shop_currency_value"  />
            <perch:shop id="on_sale" type="checkbox" value="1" />
            <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
            <perch:input id="product"  type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" class="btn default-primary" value="Add to cart" />
    </perch:form>
        </perch:form>
    </div>
    </div>
    </perch:if>

Which isn't showing anything...
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

4 years ago

Hey Wayne,

I have tested what Drew's suggested and it works fine for me. So your issue isn't with:

<perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" />
Wayne Hooper

Wayne Hooper 6 points

4 years ago

Thanks

I must be doing something wrong. I've looked at the source and the options are there, but its not displaying... I will keep testing....
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

It's in the default templates.
Wayne Hooper

Wayne Hooper 6 points

4 years ago

Got it working. Here's my code for reference;

<perch:if exists="has_variants">
    <div class="row">
    <div class="col-xs-12">
    <h5>Purchase options</h5>
        <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
            <perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" />
            <perch:input type="submit" value="Add to cart" />
        </perch:form>

    </div>
    </div>
    <perch:else />
        <div class="row">
        <div class="col-xs-12">
            <perch:shop id="price" type="shop_currency_value"   />
            <perch:shop id="sale_price" type="shop_currency_value"   />
            <perch:shop id="trade_price" type="shop_currency_value"  />
            <perch:shop id="on_sale" type="checkbox" value="1" />
            <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
            <perch:input id="product"  type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" class="btn default-primary" value="Add to cart" />
    </perch:form>
        </perch:form>
    </div>
    </div>
    </perch:if>