Mini-cart does not update when customer adds to cart, only after refresh

[MegShone]

Hello all, I see other people have found solutions to this problem but I am battling to find a solution that will work for us. 

When a customer adds a product to cart the mini cart does not update unless they refresh the page. The same occurs when they try to change quantities of products in the cart.

Our website is https://niftygifts.co.za/

Thank you in advance! 

[zanya]

Hello,

For the cart page that's not refreshing on quantity change, it seems your Shopify theme has a few bugs. I recommend making all changes to the copy of the theme so firstly copy your current theme.

You will have to open your theme code and edit it. Go to the list of your themes, and left of the 'Customize' button there are three dots. Under that menu, there is an option to "Edit code", click it.
This is the first thing that needs to be done:

1. Find this code line in the theme.js file. You can find the file on the left list, under 'Assets'

_this2.element.querySelector('.header__cart-count').textContent = _this2.itemCount;​

2. Change that line to this 

document.querySelector('.header__cart-count').textContent = _this2.itemCount;​

That should fix the cart page bugs. I'm open to help further with the mini cart if needed, would just need for it to be enabled to see what's happening in that case. Currently, it seems the mini cart is disabled on the site

[MegShone]

Hi Zanya! Thank you so much for this, I made that change, but now as soon as I add to cart it takes me into the cart. Is there any way to add to cart, without it taking the person into cart?

[zanya]

Great! Almost all themes have that setting, so try to go to General Theme Settings -> Cart. You should have something like this, so change it to the popup/notification option. If there is no such option, we can go through the code editing again

[MegShone]

Hi Zanya, I tried changing ti to Drawer, but it is still going to the Cart page...

[zanya]

I see, then you will have to navigate to the theme.js file again. And find this code:

if (window.theme.cartType === 'page') {
   return; // When using a cart type of page, we just simply redirect to the cart page
}

and comment it like this:

/*if (window.theme.cartType === 'page') {
   return; // When using a cart type of page, we just simply redirect to the cart page
}*/

There should be 7 instances of the same code, so do the same for all of them. *They include the 'return' part, there are a few lines that are very similar so make sure you comment the ones that are the same as here.

Let me know if this fixes the issue

[MegShone]

Hmmm, no it is still just going to the cart page and the drawer doesn't pop up

[zanya]

Weird, when I check your site it doesn't lead me to the cart page. It just adds it to the cart.

For the popup, is the drawer turned on in the settings?

[MegShone]

I also can't adjust quantity in the cart

[MegShone]

Oh, sorry, I realised now that I'm obviously doing this all in a duplicate theme as I wanted to test what happens without making any changes that could affect our customers on the site

[zanya]

Haha, that's okay. So 'not going to the cart page' is working? But the popup still doesn't show up?

[daniel1491]

Hi Zanya, 

Hope you're doing well - is this for the dawn theme? I don't seem to see '''_this2.element.querySelector('.header__cart-count').textContent = _this2.itemCount;​''' line of code

[zanya]

Hi Daniel,

This isn't for the Dawn theme unfortunately, I think the site I was fixing was on the Warehousee theme and a bit customized. If you need help, feel free to sent the sites link so I can look into it

[prakharJB98]

I'm facing same issue for the my site too. I'm using Ira theme for the site. In the quick cart/mini cart , try to increase quantity to 2 expected result - quantity increased, total changed actual result - picture flickering, quantity not changed. Please suggest.

Our website :- https://pachashop.com/en/

Thank you in advance

[zanya]

Hi,

I just checked the site, and it seems that the mini cart is missing data-qty value on some places in the code. That value should hold the current quantity in the cart so it can be incremented correctly by one. 

Unfortunately for your issue it's a bit hard to find the fix without access to the entire code/theme as data-qty is present on multiple places, if you would like I can send you the collaborator access and fix that issue.

[Allmums]

I am facing the same issue. 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

[zanya]

Hi!

Your current cart drawer is entirely managed by the Sale Max App, and it seems the app isn't made to update the theme contents (quantity number near the icon in your case)

It's possible to fix this without uninstalling the app, but this would be more complex development work as I would need to go more in-depth on how the app works, settings for it, etc. Can't really be done without access to the site, if you would like I can send you the collaborator access and try to fix that issue.