CODEWITHSUNDEEP
ajaxshopifyliquidshopify-template
Sao Ho
Sao Ho

Reputation: 139

Add add to cart and button variant selector in collection page - Shopify

I have edited my store to have an add to cart button and variant selector in the collection page and it's working. But my boss want another change, how can I change the dropdown list to button selector?

enter image description here

My code form

{% unless sold_out %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="product-form-{{ product.id }}" class="product-form">
<div class="add-to-cart__wrapper" style="margin-top:0px; margin-bottom: 10px;">
<button type="submit" name="add" class="btn btn--splash btn--full uppercase addToCart">
<span id="AddToCartText">Add to Order</span>
</button>
</div>


{% if product.variants.size == 1 %}
<input type="hidden" id="variant-select" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<div class="selector-wrapper"> 

<select name="id" id="productSelect" class="product-single__variants btn--full uppercase">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form> 
{% endunless %}

Please advise.

Thank you!

Upvotes: 0

Views: 873

Answers (1)

pete
pete

Reputation: 151

You could change the select element to a radio button element and style the radios as regular buttons. This pattern is fairly common, you just need to make sure your event listener target for the variant selection is the same as you have now.

Upvotes: 1

Related Questions