FROM CACHE - en_header

Reload Cart Page When Product Quantity is Changed

Solved
JordanM
Explorer
82 4 15
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>

 

Accepted Solutions (2)

Accepted Solutions
JordanM
Explorer
82 4 15

This is an accepted solution.

Ok, i finally found a solution for the problem. The code that works is:

<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{
      	firstChange = true;
    	 setTimeout(window.location.reload(), 1000);
    }
    
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
	
}
document.addEventListener("DOMContentLoaded", function() {
  
  reloadCart();
});
  
  selectElements = document.getElementsByClassName(`cart__qty-input`);
  	var allOne = true;
  
  for (i = 0; i < selectElements.length; i++ ) {
  		if (selectElements[i].getAttribute("value") > 1) {
    		allOne = false;
  		}
  }
//   console.log(allOne);
  if (allOne == true) {
    firstChange = false;
  }

</script>

You paste it in theme.liquid before </body> tag

View solution in original post

JordanM
Explorer
82 4 15

This is an accepted solution.

@txShoptheme reach out to HulkApps Team. They will add the code for you. That's what I did after tedious work.

View solution in original post

Replies 19 (19)
diego_ezfy
Shopify Partner
2791 526 714

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
Explorer
82 4 15

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
Shopify Partner
2791 526 714

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
Explorer
82 4 15

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!

JordanM
Explorer
82 4 15

Alright , i am sending it to you.

Thank you in advance.

diego_ezfy
Shopify Partner
2791 526 714

@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
Explorer
82 4 15

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
Shopify Partner
2791 526 714
JordanM
Explorer
82 4 15

That doesn't work. Now it doesn't add discounts at all

diego_ezfy
Shopify Partner
2791 526 714

It's because there is a typo in the code you modified. You typed "10" and forgot the )

Replace the code with this:

<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(), 1000);
    }
    
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
	
}
document.addEventListener("DOMContentLoaded", function() {
              reloadCart();
            });

</script>



dantepw_0-1598079419872.png

 

JordanM
Explorer
82 4 15

Hmm ,it seems like it still doesn't work . When the quantity is 1 and i increment it to 2 nothing happens.Then when i increment it to 3 it refreshes but shows 2 in the quantity selector.

diego_ezfy
Shopify Partner
2791 526 714

Hm, I'd need to invest more time to understand what is happening.
I'm at work, I unfortunately don't have enough time. Hopefully someone will come around and shed some light on it.

Kind regards,
Diego

JordanM
Explorer
82 4 15

Alright, thank you very much for your time and effort!

Best regards,

Jordan

 

JordanM
Explorer
82 4 15

I managed to fix it! This is the code

It should have firstchange=true after else in the else statement.

<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{
      	 firstChange = true;
    	 setTimeout(window.location.reload(), 1000);
    }
    
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
	
}
document.addEventListener("DOMContentLoaded", function() {
              reloadCart();
            });

</script>
JordanM
Explorer
82 4 15

It seems like it worked for some time but now it stopped. Still looking for solution.

 

JordanM
Explorer
82 4 15

This is an accepted solution.

Ok, i finally found a solution for the problem. The code that works is:

<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{
      	firstChange = true;
    	 setTimeout(window.location.reload(), 1000);
    }
    
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
	
}
document.addEventListener("DOMContentLoaded", function() {
  
  reloadCart();
});
  
  selectElements = document.getElementsByClassName(`cart__qty-input`);
  	var allOne = true;
  
  for (i = 0; i < selectElements.length; i++ ) {
  		if (selectElements[i].getAttribute("value") > 1) {
    		allOne = false;
  		}
  }
//   console.log(allOne);
  if (allOne == true) {
    firstChange = false;
  }

</script>

You paste it in theme.liquid before </body> tag

txShoptheme
New Member
1 0 0

Hello i have the same issue, when i go to cart page the custumer can change the quantity and the values didn´t change on the page the custumer need refresh it, and i want when the they make a change on the quantity the page refresh but in the same time can save the modification i used the window.reload on the button but it dont save the alteration. How can i use that code to refresh ? 

<td class="text-center" data-label="{{ 'cart.label.quantity' | t }}">
<div class="js-qty-wrapper">
<div class="js-qty">
<button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="" data-qty="0" >
<i class="fa fa-minus" aria-hidden="true"></i>
<span class="fallback-text">−</span>


</button>
<input type="text" class="js-qty__num" value="{{ item.quantity }}" min="1" data-id="" aria-label="quantity" pattern="[0-9]*" name="updates[]" id="updates_{{ item.id }}" value="{{ 'cart.general.item_quantity' | t }}" >
<button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="" data-qty="11" >
<i class="fa fa-plus" aria-hidden="true"></i>
<span class="fallback-text">+</span>

</button>
</div>
</div>
</td>

JordanM
Explorer
82 4 15

This is an accepted solution.

@txShoptheme reach out to HulkApps Team. They will add the code for you. That's what I did after tedious work.