App reviews, troubleshooting, and recommendations
Hello, i have followed the Cart API reference to successfully set a post request that adds items to the cart: https://shopify.dev/docs/api/ajax/reference/cart
However, cart icon (#1) is not being updated with the new quantity?. I have to refresh the page to see cart items being added, I'm using the default theme?
Is there any shortcuts to emit/dispatch new items being added to the cart so these will update automatically on the page? also, the popup (#2) that comes when you add cart items with the normal button, does not pop up either?
I can add "sections" to the request like so: (saw this in the original request from the normal add to cart button)
fetch(window.Shopify.routes.root + `cart/add.js`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'sections': 'cart-notification-product,cart-notification-button,cart-icon-bubble',
'items': [{
'id': window.ShopifyAnalytics.meta.selectedVariantId,
'quantity': 2
}]
})
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
That will return some HTML, from the response:
"sections": {
"cart-notification-product": "<div id=\"shopify-section-cart-notification-product\" class=\"shopify-section\"><div id=\"cart-notification-product-50638376632646:777834ad21494bd30c6de207edd74fef\" class=\"cart-item\"><div class=\"cart-notification-product__image global-media-settings\">\n <img\n src=\"//lauridsen-store.myshopify.com/cdn/shop/files/TerraClassicUSD_TUSDC.png?v=1729587206&width=140\"\n alt=\"\"\n width=\"70\"\n height=\"70\"\n loading=\"lazy\"\n >\n </div><div><h3 class=\"cart-notification-product__name h4\">CC Was Here</h3>\n <dl></dl></div>\n </div></div>",
"cart-notification-button": "<div id=\"shopify-section-cart-notification-button\" class=\"shopify-section\">Se indkøbskurv (5)\n</div>",
"cart-icon-bubble": "<div id=\"shopify-section-cart-icon-bubble\" class=\"shopify-section\">\n <span class=\"svg-wrapper\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" class=\"icon icon-cart\" viewBox=\"0 0 40 40\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z\"/></svg>\n</span>\n\n\n<span class=\"visually-hidden\">Indkøbskurv</span><div class=\"cart-count-bubble\"><span aria-hidden=\"true\">5</span><span class=\"visually-hidden\">5 varer</span>\n </div></div>"
}
Are you supposed to just inject this into the dom? lol...
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