Reload Cart Page When Product Quantity is Changed

Solved
JordanM
Explorer
61 2 10

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

0 Likes

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

 

◦ 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
61 2 10

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.

0 Likes

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

◦ 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
61 2 10

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

Best regards,

Jordan

 

0 Likes
JordanM
Explorer
61 2 10

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>
0 Likes
JordanM
Explorer
61 2 10

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

 

0 Likes
JordanM
Explorer
61 2 10

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>

0 Likes
JordanM
Explorer
61 2 10

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

0 Likes