Issue with Adding Products to Cart

Issue with Adding Products to Cart

rohit1
Shopify Partner
13 0 1

I want to show all the options for the products on my collection page and add them to the cart. I have already displayed the product options, but I'm unable to figure out how to add them to the cart. I am stuck here. Can someone tell me how I can do this? I have attached a screenshot below.


Screenshot : https://prnt.sc/5gU4HL3uiuE9 

#liquid code

{% for option in product.options_with_values %}
<div class="product-option">
<label for="option-{{ option.name | handleize }}">{{ option.name }}</label>
<select id="option-{{ option.name | handleize }}" name="options[{{ option.name }}]">
{% for value in option.values %}
{% if value.available %}
<option
value="{{ value }}"
{% if value == option.selected_value %}
selected
{% endif %}
>
{{ value }}
</option>
{% else %}
<option
disabled
value="{{ value }}"
{% if value == option.selected_value %}
selected
{% endif %}
>
{{ value }} (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endfor %}

<!-- Add to Cart Button -->
<div class="add-to-cart-btn">
<button id="add-to-cart-button" type="button">Add to Cart</button>
</div>




Replies 4 (4)

IoannisM
Shopify Partner
13 3 2

We have two ways.
1st with a product form, described here:
https://shopify.dev/docs/storefronts/themes/architecture/templates/product#the-product-form

2nd with JavaScript, Fetch API described here:
https://shopify.dev/docs/api/ajax/reference/cart

- If my answer was helpful, you can buy me a coffee.
- If you need more complex CSS, JS, and Liquid customization, contact me here.
rohit1
Shopify Partner
13 0 1

I want the variants that are displayed on the product page to also appear on the collection page under each product, as shown in the screenshots. The functionality should be the same, such as matching the correct variant, etc. I have displayed them, but how can I make them match?

screenshot : https://prnt.sc/R6czjTIVnVO3 , https://prnt.sc/MJ4YBlu9D2i3 

rohit1
Shopify Partner
13 0 1

It's showing 'product_id.js not found

rohit1
Shopify Partner
13 0 1

Yes, product_id is numeric .