I want to have the Add to Cart button on my collections page (eg - example.com/collections/collection-name) next to each product. So if I have 20 products on the page I want to have 20 Add to Cart buttons, next to their respective product.
I edited product-card.liquid with the following:
<select name="product-form-{{ product.variants.first.id }}" id="product-form-{{ product.variants.first.id }}" class="product-form__variants">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.variants.first.id }}" name="quantity" value="1" min="1" class="product-form__input">
</div>
<div class="product-form__item product-form__item--submit">
<button name="add" class="btn btn--full product-form__cart-submit">
<span id="AddToCartText-{{ product.variants.first.id }}">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</div>
</form>
The issue is that when I click Add to Cart on the 1st product on the page, the last product on the page is added to Cart.
Is there an existing onclick event for Add to Cart that finds the last product id on the page and adds that to the cart? I am using the Venture theme.
What am I missing?
