單擊添加到購物車時如何更新進度條？ Shopify

Question

我正在為我的 Shopify 主題開發一個進度條，但看起來進度條無法正常工作，我需要刷新頁面以更新進度條和內容文本。

任何人都可以指導我的這個項目嗎？

對於現場演示，您可以在此處查看： https://strokes-test.myshopify.com/products/brow-colorist?variant=35744173097121

我的進度條在添加到購物車按鈕上方

JS代碼：

  var $freeShippingClass = $('.js-free-shipping'),
      $freeShippingTextClass = $('.js-free-shipping-text'),
      $free_fisrt = $freeShippingClass.attr('data-start'),
      $free_end = $freeShippingClass.attr('data-end')
      minOrderValue = parseInt($freeShippingClass.data('value')) || 0,
      $percentClass = $('.js-free-shipping .progress-bar');

  function generate(cart){
    var priceCart = cart.total_price;
    if (priceCart >= minOrderValue){
      $percentClass.css('width','100%').removeClass('progress-bar-striped bg-primary');
      $freeShippingTextClass.text(theme.strings.freeShipping)
    }else{
      let percent = priceCart / minOrderValue * 100;
      let left = Shopify.formatMoney((minOrderValue - priceCart),theme.moneyFormat);
      $percentClass.css('width',percent+'%').addClass('progress-bar-striped primary');
      $freeShippingTextClass.html($free_fisrt +' '+ left +' '+ $free_end);
      theme.updateCurrencies();
    }
  }

  Shopify.getCart(function(cart){
    generate(cart);
  });

  return {
    load:generate
  }
})()

航運.液體

  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  <span class="free-shipping-content">
    <span class="js-free-shipping-text">
    </span>
  </span>
</div>

CSS

.js-free-shipping{
  position: relative;
  height: 30px;
  margin:0 0 15px;
  background:#343a40;
  border-radius:0;
  font-size: val(--g-font-size);
  #jsCrosssell &{
    margin-bottom:0;
    .progress-bar{
      -webkit-animation:none;
      animation:none;
    }
  }
  .mini-cart-content &{
    .progress-bar{
      -webkit-animation:none;
      animation:none;
    }
  }
}
.js-free-shipping-text{
  .mini-cart-content &{
    font-size:calc(val(--g-font-size) - 2px);
  }
}
.mini-cart-content{
  .js-free-shipping{
    margin-top:15px;
  }
}

.free-shipping-content{
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 30px;
  color: white;
  font-weight: bold;
  left:0;
  .svg,[class^=svg-]{
    margin:-2px 10px 0 0 ;
  }
}

Answer 1

它僅適用於重新加載，因為您僅在頁面加載時獲取購物車信息一次。 So, when user updates cart via Shopify Ajax API ( without page load), your progress bar information is outdated but you do not trigger your function again. 要解決此問題，您必須收聽購物車更新並再次致電您的 function。

使用Shopify Cart Update Events中的代碼，您可以執行以下操作

const open = window.XMLHttpRequest.prototype.open;

function openReplacement() {
  this.addEventListener("load", function () {
    if (
      [
        "/cart/add.js",
        "/cart/update.js",
        "/cart/change.js",
        "/cart/clear.js",
      ].includes(this._url)
    ) {
      generate(this.response);
    }
  });
  return open.apply(this, arguments);
}

window.XMLHttpRequest.prototype.open = openReplacement;

每當購物車更新時，您生成的 function 會再次使用最新的購物車信息調用。