Cart does not automatically update - Dawn Theme

Cart does not automatically update - Dawn Theme

carla_5
Excursionist
58 0 6

Hi everyone! I'm using the latest version of Dawn theme, and I notice a bug where when I add an item to cart, the cart does not get updated automatically, and I need to refresh the page to see the cart get updated. Do any of you know how I can fix this? I'm using a sliding cart drawer.

 

Cart icon doesn't show the amount of items,  I need to refresh page to see the number badge appear on the cart icon.

 

Thank you 

Replies 4 (4)

Guleria
Shopify Partner
3997 795 1134

Hello @carla_5 ,

 

Bug means the theme is not working as its in the demo https://theme-dawn-demo.myshopify.com/ 

If so I strongly recommend removing the changes you did recently or try to install a fresh copy of the theme and then move your customization without breaking the cart feature.

 

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Elias
Shopify Staff (Retired)
3076 300 550

Hi, @carla_5.

 

Thank you for reaching out and posting this question.

 

We weren't able to reproduce this problem on a clean installation of the latest version of the Dawn theme. Just to confirm, did you make any customizations to your theme's cart page? 

 

As suggested by @Guleria, you can try installing a fresh copy of the Dawn theme to check whether this problem persists on both themes. If the issue is only present in the original theme, then it's likely caused by the customizations. To resolve this, we'd recommend reviewing the custom coding to make sure that it was installed properly or you can consult a theme developer to assist you with the customization. Alternatively, you can also consider rolling back to an older version of your theme prior to when the issue first emerged. 

 

If the problem persists on both themes, then it looks like we'll need to access your account in order to get a closer look at the issue. While we're unable to provide account-specific support via the Shopify Community, we'd be happy to further assist you through live chats. Please visit the Shopify Help Center and login to your account to create a support request.

 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

snippetcommerce
Shopify Partner
3 0 0

Step 1: Enabling the Cart Drawer in the Dawn Theme

 

Step 2: Implementing Real-Time Cart Updates

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();
}
}

 

tarek_guma
Excursionist
22 0 4

Where will I put this code to?