Solved

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

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)

Developer-G
Shopify Partner
3033 593 846

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3033 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3033 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 44 (44)