How to add items to cart DRAWER from a custom form (modified Dawn theme)

How to add items to cart DRAWER from a custom form (modified Dawn theme)

ijw
Shopify Partner
11 0 2

Hello, I have a custom form with a list of products that allows a visitor to use check boxes and add only the items they want. 

 

I currently have the theme set to use the Cart Drawer and all other Add to Cart buttons add to the cart and open the drawer. My custom form does not, it goes to the cart page, which I thought was being bypassed.

 

I'm sure I'm missing something simple but the rest of the add-to-cart buttons are rendered through snippets and 

doesn't work with this custom form.

 

Is there an attribute/setting I'm missing here? 

 

This is for the Dawn theme. I just want to trigger this add-to-cart to add and open the drawer instead of going to the cart page.

 

 

 

 

<form action="/cart/add" method="post">

Content with products and checkboxes, etc......

<input class="button button--primary" type="submit" value="Add selections to cart" aria-haspopup="dialog" />

</form>

 

 

 

 

 

Thanks!

Replies 10 (10)

gr_trading
Shopify Partner
1944 145 203

Hi @ijw ,

 

It will be easy to investigate the issue if you could share the url and password if required.

 

You can also share details using private msg.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

RaduD
Shopify Partner
1 0 0

You can open the drawer with:

document.getElementsByTagName('cart-drawer')[0].open();

The problem i'm facing is that the drawer is not updated with the newly added item and I didn't figure out how to force it refresh.

mikhailcodes
Shopify Partner
1 0 1

Hey, stumbled across this question and was unsure why this hadn't ever been answered so just in case anyone needs to know, you can easily use the Section Rendering API to do an AJAX update/refresh of the cart. 

Section Rendering

 

// Example use:
// Fetches http://{root.url}/cart?section_id=main-cart-items

async function fetchAndReplaceHtml(newContentBlock) {
    const url = window.Shopify.routes.root + 'cart?section_id=main-cart-items';
    const response = await fetch(url);
    const responseText = await response.text();
    const newHtml = new DOMParser().parseFromString(responseText, "text/html").getElementById('main-cart-items').innerHTML;
    document.getElementById(newContentBlock).innerHTML = newHtml;
    return newHtml;
}

fetchAndReplaceHtml('CartDrawer-CartItems');

 


Basically you can fetch the content by requesting the page, and getting the html via the section ID then replacing your current section/element with the new content. 

PS: This is good as well for AJAX queries for filter, variant changes etc etc etc 

Makeitperfect
Excursionist
23 0 7

Hi,

did you happen to find a solution for this problem?

Currently ive set up my own custom add to cart button in the collection pages as I am not a fan of the built in one.

Its a simple + icon that shows variant sizes on hover and I am using the same add to cart form right now /cart/add but id like to connect to the drawer instead as thats what I am using for all general add to cart products. The only time you can go to the cart page is at check out when you click on the cart icon which I cant disable becasue I am not in Shopify Plus. 

Would be grateful if you can share your solution if you've found one on how to bypass the cart url and trigger the drawer instead. 

I am on latest dawn now 14.0.

Kind Regards

studiobalbis
Shopify Partner
6 1 1

Exactly the same issue, if anyone has any advice!

Makeitperfect
Excursionist
23 0 7

I'll send you a link that I found useful for my solution, managed to do it on my store but wont be able to help with yours as I am not competent enough, just used Chatgbpt a lot and it was a lengthy trial and error 

studiobalbis
Shopify Partner
6 1 1
That would be great, thanks!
studiobalbis
Shopify Partner
6 1 1

Thanks, that would be great. And/or if you could share the code here that you updated that would be good too.

Makeitperfect
Excursionist
23 0 7

Ok lets start again, I was preoccupied 

So 

I didnt update anything, (as in nothing extensive - just the product collection grid, featured collection grid, and the search page, basically anyplace I wanted this atc / variant selection button to appear. Usually I've placed mine after the {% render 'card-product', ... %}. Ive added a extra <div> your custom scenario </div> after the card-product which is something you have to design out then I created a JS code to tie with that custom scenario which is a mix of the code from the link and chat gpt's help. But it was the paid version gpt4.

Instructed it to make the code in a way that it would connect to the card-drawer using the same submit form cart/add etc but it was all back and forth trial and error because I dont understand it much. 

Below is the link that I found useful when it came to using chat gpt

https://codeishot.com/2g7ZsiUI

Makeitperfect
Excursionist
23 0 7

updated my response