Reload Cart Page When Product Quantity is Changed

[JordanM]

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>

[JordanM]

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  

[diego_ezfy]

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

[JordanM]

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!

[diego_ezfy]

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

[JordanM]

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!

[diego_ezfy]

yes, sure, that'd work!

[JordanM]

Alright , i am sending it to you.

Thank you in advance.

[diego_ezfy]

@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

[JordanM]

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

[diego_ezfy]

try changing from 100 to 1000 in the code