All things Shopify and commerce
I am facing this issue that when a customer adds a product to cart, the quantity number besides the cart icon does not change unless you refresh the page. Same thing when quanity is increased or decreased.
Please note that i have installed a third party app called "sale max slide cart drawer". It basically allows me to display upsells in the cart. Can the store display realtime quantity in icon without having to uninstall this app.
I am using the dawn theme. My store url is www.allmums.pk
Now that the Cart Drawer is enabled, the next step is to allow for real-time updates — this means that every time a customer adds or removes items from their cart, the cart contents update dynamically without needing a full page reload.
To achieve this, we’ll use JavaScript to interact with Shopify’s Sections API and make sure that the cart drawer updates instantly and reflects the latest cart items.
Here’s the JavaScript code that will handle these on-the-fly updates:
function refreshCartDrawer() {
// Check if cart-drawer-items exists
let cartDrawerItems = document.querySelector('cart-drawer-items');
// Find the cart-drawer element
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
// Remove the is-empty class from cart-drawer if it exists
if (cartDrawer.classList.contains('is-empty')) {
cartDrawer.classList.remove('is-empty');
}
// Remove the div with class 'drawer__inner-empty'
const emptyDrawerElement = cartDrawer.querySelector('.drawer__inner-empty');
if (emptyDrawerElement) {
emptyDrawerElement.remove();
}
// Make the form tag's class 'cart__contents' display as block
const cartContentsForm = document.querySelector('.cart__contents');
if (cartContentsForm) {
cartContentsForm.style.display = 'block';
}
}
// If cart-drawer-items doesn't exist, create it
if (!cartDrawerItems) {
cartDrawerItems = document.createElement('cart-drawer-items');
// Find the drawer__header element
const drawerHeader = document.querySelector('.drawer__header');
if (drawerHeader) {
// Insert the newly created cart-drawer-items after the drawer__header
drawerHeader.insertAdjacentElement('afterend', cartDrawerItems);
}
}
// Call the onCartUpdate method to refresh the cart drawer contents
document.querySelector('cart-drawer-items').onCartUpdate();
// Open the cart drawer and apply necessary classes for animation
if (cartDrawer) {
cartDrawer.open();
}
}
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