当用户导航回页面时刷新页面的一部分

Question

在我的商店页面中，对于每种产品，我都有购物车数量，用户无需添加到购物车按钮即可更改（它带有显示 none 并由 js 激活）。我的问题是，如果用户在单个产品页面中更改了商品数量并导航回商店页面，它会显示缓存中的错误数量。现在我正在使用此代码重新加载整个页面：

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);
        }
    }
  });
});

我只想刷新数量而不是整个页面：

<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>

而我尝试做的是：

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

但它获取的是购物车的缓存版本，而不是更新后的版本。

Answer 1

好的，我找到了解决方案，我在 woocommerce 上使用钩子添加到购物车片段，如下所示：

    // cart quantities
add_filter( 'woocommerce_add_to_cart_fragments', woocommerce_cartquant_fragment' );

function woocommerce_cartquant_fragment( $fragments ) {
    global $woocommerce;

    ob_start();
    ?>
    <p id="cartquantities" style="display:none"><?php echo json_encode(WC()->cart->get_cart_item_quantities()); ?></p>
    <?php
    $fragments['p#cartquantities'] = ob_get_clean();
    return $fragments;
}

然后使用这个脚本：

    //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;
      let findname =[];
      $("#a2cloader").show();
      timeout = setTimeout(function() {
      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();
      }
  }, 1500 );
  }
  });
});

是否可以让 javascript 等待片段而不是设置超时？

Answer 2

已解决！使用时间间隔检查片段何时更新

<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>

当用户导航回页面时刷新页面的一部分

Refresh part of page when user navigated back to it

javascript

php

navigation

jquery

caching