Cart + Ajax / Brooklyn Theme

Highlighted
Excursionist
46 0 4

Hi,

a) We are trying to add some ajax-functionality to our cart-page. While Brooklyn already features ajax-functionality when it comes to the add-to-cart button and displays a beautiful drawer we would love to add some functionality to the regular cart-page:

Basically we would love to add ajax-functionality to the plus & minus buttons here as well.

Can someone help?

b) Thinking about http://cartjs.org right now…

Thank you,

Steffen

0 Likes
Highlighted
Tourist
10 0 5

It looks like you got this working on your site.  Can you share how you ended up doing this?

0 Likes
Highlighted
Excursionist
46 0 4

Hi there, really not sure anymore, we basically followed documentation and ran some tests. It took us quite a couple of hours… Where are you stuck so far?

0 Likes
Highlighted
New Member
2 0 2

I found many things but actually, nothing works for real AJAX cart. As because there is no unique section ID for collection page Grid it's difficult to trigger any single product from the gallery.

 

Many people suffer for this and when done no one writes the solution. I decide to write a solution.

 

To do that I use my own design format. You guys can change as per your theme design. This is for Brooklyn theme.

 

You have to do 2 things:-

1. Add a line of code at your product grid liquid for cart button. (product-grid-item.liquid)

2. Add a JS code into your theme.js (theme.js.liquid)

 

#1  Add the following code at your desired place where you want to show your add to cart button in the collection product grid.  (product-grid-item.liquid)

 

<span type="button" onclick="AddToBagGrid({{ product.variants.first.id }})" value="" class="add_to_cart  js-drawer-open-button-right">Add to Cart</span>

 

This is a normal <span> to place the button. two important things first one is called a function "AddToBagGrid" onclick and 2nd one is add a class "js-drawer-open-button-right"

 

#The Function "AddToBagGrid" will add the product via AJAX and we will pass the product ID via this function.

# The class "js-drawer-open-button-right" will hit the side drawer to open after adding the product via AJAX.

 

#1 Add the following JS code at the very bottom of your theme.js file (theme.js.liquid)

 

function AddToBagGrid($id) {
            var quantity = '1';//add quantity selector here
            var id= $id;// variant selector here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){         
                }
            });
    };

 

Here 2 variable 1) id 2) quantity

We pass id from the button. And we set quantity as 1 so that each click will add 1qty. But if you want you can pass quantity also from the button area.

 

Hopefully, this will solve the problem of adding ajax add to cart on collection page for product grid.

 

Thanks,

Arafat

www.arafatjahan.com

 

1 Like
Highlighted
Excursionist
16 1 1

Hi @ArafatJahan,

Thanks for this tutorial it is really helpful...is there a way to style the button so that it matches the other buttons on the site? As at the moment it just looks like plain text.

Thanks

Edit: I worked this out, for anyone else that has the same question! I replaced the code in step 1 with this: 

<span type="button" onclick="AddToBagGrid({{ product.variants.first.id }})" value="" class="btn add_to_cart js-drawer-open-button-right">Add to Cart</span>

0 Likes
Highlighted
New Member
2 0 1

Thanks @n_bcn and @ArafatJahan, your solution works as expected. However, without feedback the user may not know that their action was registered. Additionally, my cart usually shows a bubble when an item is added to the cart. But with this method, there's no bubble till I refresh the browser or navigate to some other page.

Do you know how to add some sort of feedback mechanism like this:

https://ajaxify-your-cart.myshopify.com/products/belladone

0 Likes