单击添加到购物车时如何更新进度条？ 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 会再次使用最新的购物车信息调用。