Refresh part of page when user navigated back to it

In my shop page, for each product I have cart quantities that the user can change without add to cart button (it’s with display none and activated by js). my problem is that if a user changed item quantity in single product page and navigated back into shop page it show the wrong quantity from cache. Right now i’m reloadin the whole page using this code:

jQuery( document ).ready(function( $ ) {
  $(document).ready(function () {
    if(performance.navigation.type == 2  || performance.navigation.type == 0){
      var isquanpage = document.getElementsByClassName('store-quantity');
        if (isquanpage.length > 0) {
          console.log(isquanpage);
          $("#a2cloader").show();
          location.reload(true);
          document.addEventListener('DOMContentLoaded', function() {
             $("#a2cloader").hide();
          }, false);
        }
    }
  });
});

I want to refresh just the quantities and not the whole page:

<div class="quantity-div" >

                  <i class="fas fa-plus sumsum-quantity-b" value="+" onclick="store_quantity_b('+', this.parentNode.querySelector('input[type=number]').id);"></i>

                <input class="sumsum-quantity store-quantity" form="<?php echo $product->id; ?>" inputmode="decimal" style="padding:0;border-radius:5px;" type="number" min="0" value="<?php echo $cartquan ?>"
                    name="<?php echo $varid; ?>" onclick="this.select()"  id="quantity-<?php echo $varid ?>" data-cartquan="<?php echo $cartquan ?>" data-varititle="<?php echo get_the_title( $attribute_value['variation_id']); ?>">

                  <i class="fas fa-minus sumsum-quantity-b" value="-" onclick="store_quantity_b('-', this.parentNode.querySelector('input[type=number]').id);"></i>

              </div>

And what i tried to do is this:

quanfield = document.getElementsByClassName("store-quantity");
      
      cartquantities =<?php echo json_encode(WC()->cart->get_cart_item_quantities();); ?>;
      console.log(cartquantities);

But it gets the cached version of the cart and not the updated one.

Answer

SOLVED! used interval to check when fragments are updated

<script>
//refresh page from history
jQuery( document ).ready(function( $ ) {
  $(document).ready(function () {
    if(performance.navigation.type == 2  || performance.navigation.type == 0){
      let quanfield, quanname,cartquantities,store,obj,timer;
      let findname =[];
      $("#a2cloader").show();
      //var t=0;
      timer = setInterval(checkfrags, 5);
      function checkfrags(){
      //t+=5;
       if(document.getElementById("cartquantities").innerText=="null") {
         //console.log(t);
       }else{
         cartquantities = document.getElementById("cartquantities").innerText;
         cartquantities = cartquantities.replace("{","");
         cartquantities = cartquantities.replace("}","");
         cartquantities = cartquantities.replace(/['"]+/g, '');

         cartquantities = cartquantities.split(",");
         for (i = 0; i < cartquantities.length; i++) {
           cartquantities[i] = cartquantities[i].split(":");
           findname[i] = cartquantities[i][0];
         }
         //console.log(findname);
         quanfield = document.getElementsByClassName("store-quantity");
         //console.log(quanfield.length);
         for (i = 0; i < quanfield.length; i++) {
           quanname = quanfield[i].name;
           obj = findname.findIndex(o => o==quanname);
           //console.log(obj);
           if (obj !=-1){
             quanfield[i].value=cartquantities[obj][1];
             quanfield[i].setAttribute("data-cartquan", cartquantities[obj][1]);
           }else{
             quanfield[i].value=0;
             quanfield[i].setAttribute("data-cartquan", 0);
           }
            $("#a2cloader").hide();
         }
         //console.log(document.getElementById("cartquantities").innerText+"done "+t);
         document.getElementById("cartquantities").innerText="null";
         clearInterval(timer);
       }
     }
    }
  });
});
</script>

<p id="cartquantities" style="display:none">null</p>

Advertisement

Answer