DAWN THENE 2.0 Add to cart on collection page with ajax like it works in product single page

[Juhri]

I need ajax 'add to cart' button in collection page.
I just need defaut popup on click of add to cart.

Thanks

[Guleria · Accepted solution]

Hello @Juhri ,

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

{%- endform -%}

Once you found it then just before of it add this code 

<div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>

Now save it and you will find in collection page 'atc' is available. 


Next under 'Layout' edit theme.liquid and add this code just before the </head> tag

{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

Thanks

[Juhri]

It works, thank you 🙂 

[Linda_Li-Chee-M]

Hi @Guleria,

I'm trying out the Dawn theme and was trying to do this, but couldn't find "{%- endform -%}" in my product-card.liquid code for some reason. Do you know why?

Thanks.

[Guleria · Accepted solution]

My mistake 

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

{% render 'price', product: product_card_product, price_class: '' %}
      </div>

Once you found it then just before of it add this code 

<product-form class="product-form">
        {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        {{ form | payment_terms }}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        <div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>
        {%- endform -%}
        </product-form>

Next under 'Layout' edit theme.liquid and add this code just before the </head> tag

{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

Thanks

[Linda_Li-Chee-M]

Thanks @Guleria. This seemed to work, however, sold out product listings are now showing a blank box/button underneath them. Is there a way to get rid of the button/box on sold out listings?

[Guleria]

You can extend the code a/to your need further. 

[AvidBrio]

@Guleria 

Thanks for the help it works for the collection page with add to cart button when I added  quantity-input box but it doesn't work.
I added 

<quantity-input 

before the added to cart button 

        <product-form class="product-form">
          {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
          <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
          {{ form | payment_terms }}
          <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
         
          <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
            <label class="form__label" for="Quantity-{{ section.id }}">
              {{ 'products.product.quantity.label' | t }}
            </label>
            <quantity-input class="quantity">
              <button class="quantity__button no-js-hidden" name="minus" type="button">
                <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                {% render 'icon-minus' %}
              </button>
              <input class="quantity__input"
                  type="number"
                  name="quantity"
                  id="Quantity-{{ section.id }}"
                  min="1"
                  value="1"
                  form="product-form-{{ section.id }}"
                >
              <button class="quantity__button no-js-hidden" name="plus" type="button">
                <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                {% render 'icon-plus' %}
              </button>
            </quantity-input>
          </div>
          
          <div class="product-form__buttons">
            <button
                    type="submit"
                    name="add"
                    class="product-form__submit button button--full-width button--secondary"
                    {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                    >
              {%- if product_card_product.selected_or_first_available_variant.available -%}
              {{ 'products.product.add_to_cart' | t }}
              
              {%- endif -%}
              
            </button>
            
          </div>
          {%- endform -%}
          </product-form>

        {% render 'price', product: product_card_product, price_class: '' %}
          

The quantity goes to cart one but filled out 5 
Expected output  : cart quantity 5

[Guleria]

@AvidBrio  Yes it will work without quantity selector. If you want quantity button you can extend the code a/to your need.

[AvidBrio]

@Guleria 

can you see my code posted added before the add to cart button?  as per the main product template, it should be work do you have a suggestion. I think you can help with it.

[Lucaaas]

Thanks a lot @Guleria !

Is that also possible with a variant selector? (I sell Apparel, so I'd need a selector with size/color)

Best regards!

Lucas

[Guleria]

Hello @Lucaaas ,

Yes possible you can extend the provided code a/to your need but if you are looking for code instructions sorry I can't. Alternatively you can drop me an email for quote to the customization you need.

Thanks

[AvidBrio]

@Lucaaas   you can copy the code from the Dawn theme  theme/section/featured-product.liquid

[designrepo]

Ajax not working. When I click add to cart button, its go to cart page. I want to stay on collection page. Please help me.

[designrepo]

Thanks its working on collection page, but not working on home page/featured collection page. Please help me..

[Guleria]

Hello @designrepo ,

Please read out the post title this post is for ajax cart drawer in collection page not in homepage featured section.
btw find your featured collection template code and implement same code there and it will start working.

Thanks

[designrepo]

Thanks for reply me. I know this post for collection page. again thanks its working on collection page. Please help me, I want to same in featured collection page. please send me code.

[Guleria]

I'll check and post within a week or when I have time, thanks.

[designrepo]

Okay, Thank you so much for helping me.

[Guleria · Accepted solution]

Hello @designrepo ,

Replace the code which you added in theme.luquid just before the </head> with this one

{% if template == 'collection' or  template == 'index'  %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

Thanks