Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
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.
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.
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
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
Exactly the same issue, if anyone has any advice!
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
Thanks, that would be great. And/or if you could share the code here that you updated that would be good too.
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
updated my response
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024