单击添加到购物车时如何更新进度条？ Shopify

Question

I'm developing a progress bar for shipping on my Shopify Theme, but looks like the progress bar is not working properly, I need to refresh my page to update the progress bar & content text.

Anyone can guide me on my this project?

For live demo you can check here: https://strokes-test.myshopify.com/products/brow-colorist?variant=35744173097121

my progress bar is above add to cart button

JS Code:

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

Shipping.liquid

  <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

It only works on reload because you are only fetching Cart information once on page load. 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. To fix this, you have to listen to cart updates and call your function again.

Using code from Shopify Cart Update Events , you can do something like this

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;

Anytime cart is updated, your generate function is called again with latest cart info.