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?