Add to cart button/ ajax cart in the Brooklyn theme

Highlighted
New Member
3 0 2

Hello, 

How do I redirect my add to cart button to the ajax cart? I have added an add to cart button to each product on my collections page using this piece of code to the product-grid-item.liquid snippet: 

<form method="post" action="/cart/add"  novalidate class="cart ajaxcart">
      
    		<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    		<input type="submit" value="Add to cart" class="btn" />
  		  
                   
          
          </form>

However when I click the add to cart button it takes me directly to the cart page and the drawer side window doesnt slide open showing me the added products. I am using the Brooklyn theme which has a built in ajax-cart template, this feature is only visible when accessing the product but I want to link my add to cart button to it, so when I click the add to cart button it just slides open form the collections page. Can anyone help me out with this? 

Thanks

2 Likes
Highlighted
Tourist
10 0 1

Id like to know as well. this piece of code you provided does not center align the add to cart button, is there anyway around that?

1 Like
Highlighted
New Member
3 0 0

I would also like  help with this, please. 

0 Likes
Highlighted
New Member
2 0 0

Hey MO KR, 

Did you ever find a solution to this problem? Would love some help on this issue also.

Thanks,

Connor.

0 Likes
Highlighted
New Member
1 0 0

Same issue here: how to trigger the cart drawer from buttons in a product grid (brooklyn theme)?

I have been able to narrow down the problem to the following:

the trigger for the cart is defined in a little snippet of theme.js.liquid as

"if (theme.settings.cartType === 'drawer') {
      ajaxCart.init({
        formSelector: '#AddToCartForm--' + sectionId,
        cartContainer: '#CartContainer',
        addToCartSelector: '#AddToCart--' + sectionId,
        enableQtySelectors: true,
        moneyFormat: theme.strings.moneyFormat
      });
    }".

Since the 'add to cart' buttons in a grid don't have a unique #id of this form, how to choose formSelector and addToCartSelector by class? Unfortunately, the straight-forward way as addToCartSelector: '.btn add-to-cart' etc does not work.

Any indication highly appreciated!

0 Likes
Highlighted
New Member
2 0 0

Hi there,

we have the exact same problem but with the Boundless theme. We would love to add the "AddToCart"-button to our account page and we copied the corresponding HTML code (including the <form> and <button> tags ) from the product-template.liquid file. After clicking on the button, the product is actually added to the cart, so everything works fine except that the RightDrawer of the cart is not triggered and does not open. Any help is highly appreciated, thank you in advance.

0 Likes
Highlighted
New Member
3 0 0

In the theme brooklyn

view the code in theme.js.liquid

and find the following code:

if (
      theme.settings.cartType === 'drawer' &&
      this.template.indexOf('product') === -1
    ) {
      ajaxCart.init({
        formSelector: '.add-to-cart__form',
        cartContainer: '#CartContainer',
        addToCartSelector: '.add-to-cart',
        enableQtySelectors: true,
        moneyFormat: theme.strings.moneyFormat
      });
    }

 

if you update the if statement to allow it to also include the collection page.

if (
      theme.settings.cartType === 'drawer' &&
      this.template.indexOf('product') === -1 || theme.settings.cartType === 'drawer' &&
      this.template.indexOf('collection') === -1
    ) {
      ajaxCart.init({
        formSelector: '.add-to-cart__form',
        cartContainer: '#CartContainer',
        addToCartSelector: '.add-to-cart',
        enableQtySelectors: true,
        moneyFormat: theme.strings.moneyFormat
      });
    }

 

That is the only changes you need in that file. when you add in the html for the atc form you can add it in the product-grid-item.liquid so that it will display for each product displayed in the collection.

make sure that the add to cart button has the class .add-to-cart and the form has .add-to-cart__form

and then you should be good.

any problems you can message me directly.

 

 

 

 

 

0 Likes
Highlighted
New Member
10 0 0

I was able to add the add to cart button but currently only the first variant gets added to the cart. Any advice? My site is eldiablito.myshopify.com. Thanks

0 Likes
Highlighted
New Member
3 0 0
Where you added the form with the add to cart inside you will also need to
loop over the product variants and output them in a select drop down or
however you want
0 Likes
Highlighted
New Member
10 0 0

Thank you for the quick response. My apologies but I'm not very programming literate. The dropdown does currently display with the 3 variants of each product but selecting a different variant does not change the price nor get updated appropriately in the cart. The current code is:

<script>
$(document).ready(function() {
ajaxCart.init({
formSelector: '#AddToCartForm--' {{ product.id }},
cartContainer: '#CartContainer',
addToCartSelector: '#AddToCart--' {{ product.id }},
enableQtySelectors: true,
moneyFormat: theme.strings.moneyFormat
});
});

</script>

So you're saying I should create a loop over the product variants inside this piece of code? Thanks again for the help. 

0 Likes