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

Store Design
1

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

Thanks

2

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

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 tag

{% if template == 'collection' %}
    
    {% endif %}

Thanks

2 Likes
3

It works, thank you :slightly_smiling_face:

1 Like
4

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.

1 Like
5

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: '' %}

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

Next under ‘Layout’ edit theme.liquid and add this code just before the tag

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

Thanks

5 Likes
6

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?

7

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

1 Like
8

@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


before the added to cart button

```markup

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

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

9

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

1 Like
10

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

11

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

12

Hello @FS2022 ,

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

1 Like
13

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

14

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.

15

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

16

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

17

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.

18

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

19

Okay, Thank you so much for helping me.

20

Hello @designrepo ,

Replace the code which you added in theme.luquid just before the with this one

{% if template == 'collection' or  template == 'index'  %}
    
    {% endif %}

Thanks

2 Likes