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

Solved
Juhri
Tourist
6 0 2

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

Thanks

Accepted Solutions (3)

Accepted Solutions
Guleria
Shopify Partner
2019 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.

View solution in original post

Guleria
Shopify Partner
2019 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.

View solution in original post

Guleria
Shopify Partner
2019 426 621

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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.

View solution in original post

Replies 42 (42)
Guleria
Shopify Partner
2019 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.
Juhri
Tourist
6 0 2
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
2019 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.
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?

 

Guleria
Shopify Partner
2019 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.
AvidBrio
Shopify Expert
293 17 21

@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
Guleria
Shopify Partner
2019 426 621

@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
Buy me a coffee My PayPal
Try GEMPAGES page builder.
AvidBrio
Shopify Expert
293 17 21

@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
Lucaaas
Excursionist
18 1 5

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
Shopify Partner
2019 426 621

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
AvidBrio
Shopify Expert
293 17 21

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

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
designrepo
Excursionist
42 0 3

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
Excursionist
42 0 3

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

Guleria
Shopify Partner
2019 426 621

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
designrepo
Excursionist
42 0 3

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
Shopify Partner
2019 426 621

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
designrepo
Excursionist
42 0 3
Guleria
Shopify Partner
2019 426 621

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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.