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

Solved
Juhri
New Member
2 0 1

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

Thanks

0 Likes
Guleria
Shopify Partner
1759 371 520

This is an 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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Juhri
New Member
2 0 1

It works, thank you  

Linda_Li-Chee-M
Tourist
4 0 2

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
Shopify Partner
1759 371 520

This is an 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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Linda_Li-Chee-M
Tourist
4 0 2

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?

 

0 Likes
Guleria
Shopify Partner
1759 371 520

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
AvidBrio
Shopify Expert
202 10 17

@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

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
Guleria
Shopify Partner
1759 371 520

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
0 Likes
AvidBrio
Shopify Expert
202 10 17

@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.


If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes