Add to cart open cart drawer using form element and variant on landing page with Brooklyn Theme

Highlighted
Shopify Partner
14 0 2

Howdy! I iam trying to add products to the cart from a landing page using the form element. CUrrently it goes directly to the cart page. I would like it to open the timber AJAX drawer that happens regularly from the product page.

Here is my currrent code:

<form method="post" id="addToCartForm" action="/cart/add"><input name="id" value="4798899781667" type="hidden"> <button style="float: right;" type="submit" name="addToCartSelector" id="AddToCart--product-template" class="btn add-to-cart"> <span class="add-to-cart-text">Order</span> </button></form>

 

I've tried looking into the Shopify.additem api  but I would rather use this theme without having to add anyting. Do I need to build out the AJAX call again? Still very new to all of this stuff. Any help would be great! Am I missing a class or form element?

 

-Chris

 

Chris Weachock
0 Likes
Shopify Partner
14 0 2

UPDATE: 

I've managed to get adding to the cart with an AJAX call below: 

function addProduct(){
       console.log('added product');
      jQuery.post('/cart/add.js', {
          id: 4798899781667,
          quantity:1
      });
 
    }

This is called and added using an onclick from a button: 

    <button id="order" class="right-button btn add-to-cart js-drawer-open-button-right" onclick="addProduct();">Order</button>

however the issue I am having is opening the Timber cart drawer. I assigned a class of " js-drawer-open-button-right" which signals the cart drawer to open from the theme.js But I cannot get the update to happen as well as update the cart and open the cart drawer at the same time. 

Also I get a POST error 400 when I try to delete or change quanitities in the cart.

Any help would be appreciated!! The site is built off of the Brooklyn Theme. 

Thank you!! 

-Chris

Chris Weachock
1 Like
New Member
2 0 0

It's a while ago but still not working properly. @Chris_Weachock did you manage to open the cart drawer in the meantime?

 

I would like to do the same like you: Adding a product to the cart drawer after clicking on any button related to this. Opening the drawer and seeing the product in the cart.

 

Anyone who can help with this?

0 Likes