Reload Cart Page When Product Quantity is Changed

Solved
JordanM
Explorer
58 2 10
1 0 0

I have been searching for a solution for my problem from a while, but i couldn't manage to find one. So i recently added a discount app (HulkApps) that gives the customers a certain discount if they buy a certain number of products. For instance, if the customer added one product to the cart, the app tells them that they are one product away from 10% discount and then they can add another item so that they get the discount. The issue is that after they add the additional product the cart doesn't update so that they can see the 10% discount.The only way is to refresh the page manually, but am certain that not all people will do it. I need to make my cart page automatically reload once the quantity of a product has changed. I would appreciate your help.

That's the code that i have tried to use. I placed it in Assets --> cart-template.liquid  

 

<script>
  $('.qty-input').on('change', function(){
                var prev = $(this).data('val');
                var current = $(this).val();
    			 
                  setTimeout(function() {
                      if (prev != current){
                         location.reload();
                      }
        }, 1);
    });
  </script>

 

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
JordanM
Explorer
58 2 10

Hi,

thank you for your reply. I am not sure whether I should share my store because other people can copy it. I am using Debut theme and I haven’t changed my cart-template.liquid so If you can tell me what and where to code I would be really pleased.

Thanks in advance!

0 Likes

Hello, 

No problems, but I can only develop an appropriate solution by debugging the code - the theme used is irrelevant unfortunately.

I hope you manage to get this sorted out.

Kind regards, 

Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
JordanM
Explorer
58 2 10

Hi dantepew,

is it possible for me to dm you my store url and password so that you can debug the cart page code and help me with the issue.

Best regards!

0 Likes

yes, sure, that'd work!

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
JordanM
Explorer
58 2 10

Alright , i am sending it to you.

Thank you in advance.

0 Likes

@JordanM 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<script>
var firstChange = true;
function reloadCart(){
	var target = document.querySelector(`[data-cart-subtotal]`);

	if (!target)return
 
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    
    if (firstChange){
    	firstChange = false;
    	return;
    } else{
    	 setTimeout(window.location.reload(), 100);
    }
    
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
	
}
document.addEventListener("DOMContentLoaded", function() {
              reloadCart();
            });

</script>

 

 




Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
JordanM
Explorer
58 2 10

Hello,

thank you very much. The only issue is that when i add from quantity = 1 to quantity = 2, it doesn't make the discount. Otherwise from 2 to more it works like a charm

0 Likes

try changing from 100 to 1000 in the code

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes