Blog

<style>
.custom-progress-bar {
  text-align: center;
  transition: all 1000ms linear;
  height: 93px;
}
/*  Style the progress bar  */
.custom-progress-bar.cart-shipping__wrapper {
  padding: 15px;
  max-width: 700px;
  margin: 0 auto;
  transition: all 1000ms linear;
}

.cart-shippingThreshold__bar {
  position: relative;
  /*  Progress bar background color  */
  background-color: #d8d8d8;
  height: 1rem;
  border-radius: 5px;
  transition: all 1000ms linear;
}

.cart-shippingThreshold__progress {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  display: block;
  /*  Progress bar fill color  */
  background-color: #255569; 
  border-radius: 5px;
  transition: all 1000ms linear;
}
.cart-shipping__numOuter,
.cart-shipping__success {
  display: none;
  font-weight: 600;
}
</style>

<!-- Free shipping progress markup -->
<div class="cart-shipping__wrapper custom-progress-bar">
  <p class="cart-shipping__numOuter">You're $<span class="cart-shipping__num"></span> away from free shipping!</p>
  <p class="cart-shipping__success">You're eligible for Free Shipping🎉</p>
  <div class="cart-shippingThreshold__bar">
    <span class="cart-shippingThreshold__progress"></span>
  </div>
</div>

<script>
// Calculate the progress number, and the width of the progress bar.
function calculateProgress(currentVal, targetVal) {
  var progressBar = document.querySelectorAll('.cart-shippingThreshold__progress');
  var progressNum = document.querySelectorAll('.cart-shipping__num');
  var progressOuter = document.querySelectorAll('.cart-shipping__numOuter');
  var successMsg = document.querySelectorAll('.cart-shipping__success');
  // calculate how far progress is from the total as a percentage
  var result = Math.round(100 * currentVal / targetVal);
  progressBar.forEach(function(el){
    el.setAttribute('style', "width: ".concat(result, "%"));
  })
   // Update the progess text. If threshold is met, show success message
  var newProgressNum = (targetVal - currentVal) / 100;
  if(newProgressNum <= 0){
    progressOuter.forEach(function(el){
      el.style.display = 'none';
      el.style.transition = "opacity 5s";
      el.style.opacity = '0';
    });
    successMsg.forEach(function(el){
      el.style.display = 'block';
      el.style.transition = "opacity 5s";
      el.style.opacity = '1';
    });
    progressNum.forEach(function(el){
      el.textContent = newProgressNum;
    });
  } else {
    successMsg.forEach(function(el){
      el.style.display = 'none';
      el.style.transition = "opacity 5s";
      el.style.opacity = '0';
    });
    progressOuter.forEach(function(el){
      el.style.display = 'block';
      el.style.transition = "opacity 5s";
      el.style.opacity = '1';
    });
    progressNum.forEach(function(el){
      el.textContent = newProgressNum;
    });
  }
};

// In your theme's main JS file, find each ajax call where your store adds to, deletes from, and updates the cart. Put this in the success function of each. 
// NOTE: If you make this ajax request outside of the functions that update the cart, the calculator won't sync with the current cart state without refreshing the page. You need to specify that you want to read the current cart data AFTER the new items are added/removed.
function cartDrawerUpdate() {
  fetch('/cart.js')
  .then(response => response.json())
  .then(data => {
    calculateProgress(data.total_price, 10000);
  });
}
cartDrawerUpdate()
</script>

{% render 'progress-bar' %}

cartDrawerUpdate()

cartDrawerUpdate()

cartDrawerUpdate()

{% render 'progress-bar' %}