Add to Cart from Collection page with hidden input name=properties

Highlighted
Shopify Partner
5 0 0

Not sure where best placed this is, but...

 

I'm having issues getting the correct item(s) into my cart.

 

I'm using an order form (https://help.shopify.com/en/themes/customization/forms/add-order-form / https://gist.github.com/carolineschnapp/9122054) on a Collection page which is looping over all Products marked as 'tickets'.

 

I also have a date picker (https://help.shopify.com/en/themes/customization/cart/add-date-picker-for-delivery-dates) on the same page. The `<input name="properties[date]" Xtype="hidden" class="hiddenDateTag">field is getting populated with the chosen date once selected to then be past in to the cart.

 

I'm having trouble getting the selected tickets into the cart. Whenever I'm adding the tickets I want: it's always the last item/product in the {% for %} loop that's being added.

 

Code from Collection page:

<form action="/cart/add" method="post" class="black" enctype="multipart/form-data" id="AddToCartForm">
  {% if collection.products_count > 0 %}

    <div>
      {% for product in collection.products %} 
        {% if product.available %}
          {% for variant in product.variants %}
            {% if variant.available %}
              <input name="properties[date]" Xtype="hidden" class="hiddenDateTag">
              <input name="id" Xtype="hidden" class="variant-id" value="{{ variant.id }}">

              <div class="flex w-100 bh bt{% if forloop.last == true %} bb{% endif %} gray-6">
                <div class="w-75 flex justify-between items-center br p3">
                {% unless variant.title contains 'Default' %}
                  <p class="mv0 black">{{ variant.title }}</p>
                {% endunless %}

                  <p class="mv0 black">{{ variant.price | money }}</p>
                </div> 

                {% comment %} Quantity {% endcomment %}
                <div class="qty-container w-100 w-25-s h-60px gray-6 flex bt bn-m">
                  <div class="w3 ph2 adjust qty-minus link black pointer flex ma justify-center">—</div>
                    <input type="number" id="Quantity" class="qty-number quantity field w-100 h-100 tc bn p0 m0 black" 
name="updates[{{ variant.id }}]" onfocus="this.select()" value="0" min="0"
{% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %}> <div class="w3 ph2 adjust qty-plus link black pointer flex ma justify-center">+</div> </div> </div> {% endif %} {% endfor %} {% endif %} {% endfor %} </div> {% endif %} </form>

 

I've tried the following things:

• making the form action="/cart" instead of "/cart/add" — but I think the cart will only show the properties if it's "/cart/add"

• removing the `<input name="id" Xtype="hidden" class="variant-id" value="{{ variant.id }}">` line — this resulted in Shopify throwing an error: "Parameter Missing or Invalid: Required parameter missing or invalid: id" 

 

The above line needs to be there in order for the date to be past into the cart, but as I mentioned before, it is always the last item listed that's being added even if I selected the first one.

 

Has anyone done something similar who could help me, please?

 

I should also mention this is a completely custom theme I'm building (not that it should matter).

 

(Came across this question which is very similar to mine, but it doesn't have an answer:

https://community.shopify.com/c/Shopify-Discussion/Add-to-cart-from-the-collection-pages/m-p/391820)

0 Likes
Shopify Partner
5 0 0

To add onto my last post:

I'm looping through each product in a collection, and there's one 'Add to Cart' button.

 

Is it even possible to add various items to the cart on a Collection page using the one button?

 

 

 

 

0 Likes