Solved

How can I add a Progress Bar in my website on shopify?

ellienora
Visitor
2 0 1

I wanted to add a progress bar on my website to view progress in percent values. How Can I add? I there any widget use for this or Custom code use to add the progress bar. Help me regarding this issue. Thank you.

Accepted Solution (1)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

<!-- Free shipping progress markup -->
<div class="cart-shipping__wrapper">
  <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>

<style>
/*  Style the progress bar  */
.cart-shipping__wrapper {
  padding: 15px;
  max-width: 700px;
  margin: 0 auto;
}

.cart-shippingThreshold__bar {
  position: relative;
  /*  Progress bar background color  */
  background-color: #d8d8d8;
  height: 1rem;
}

.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: tomato; 
}
</style>

<script>
// Calculate the progress number, and the width of the progress bar. Compiled to ES5.
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){
      successMsg.forEach(function(el){
        el.setAttribute('style', 'display: block;');
      });
      progressOuter.forEach(function(el){
        el.setAttribute('style', 'display: none;');
      });
      progressNum.forEach(function(el){
        el.textContent = newProgressNum;
      });
    } else {
      successMsg.forEach(function(el){
        el.setAttribute('style', 'display: none;');
      });
      progressOuter.forEach(function(el){
        el.setAttribute('style', 'display: block;');
      });
      progressNum.forEach(function(el){
        el.textContent = newProgressNum;
      });
    }
  };

// Most themes use jquery to make ajax requests, so that's how we'll do it. 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.
  $.ajax({
  type: 'GET',
  url: '/cart.js',
  dataType: 'json',
  success: function(cart){
    // run the calculator with a target price of $75
    calculateProgress(cart.total_price, 7500);
  }
});
  
</script>

Add this for the shipping progress bar.

 

View solution in original post

Replies 3 (3)

Zworthkey
Shopify Partner
5581 642 1565

@ellienora 
Hi, we are happy to help you.
Let me give you solution.
thank you

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

<!-- Free shipping progress markup -->
<div class="cart-shipping__wrapper">
  <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>

<style>
/*  Style the progress bar  */
.cart-shipping__wrapper {
  padding: 15px;
  max-width: 700px;
  margin: 0 auto;
}

.cart-shippingThreshold__bar {
  position: relative;
  /*  Progress bar background color  */
  background-color: #d8d8d8;
  height: 1rem;
}

.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: tomato; 
}
</style>

<script>
// Calculate the progress number, and the width of the progress bar. Compiled to ES5.
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){
      successMsg.forEach(function(el){
        el.setAttribute('style', 'display: block;');
      });
      progressOuter.forEach(function(el){
        el.setAttribute('style', 'display: none;');
      });
      progressNum.forEach(function(el){
        el.textContent = newProgressNum;
      });
    } else {
      successMsg.forEach(function(el){
        el.setAttribute('style', 'display: none;');
      });
      progressOuter.forEach(function(el){
        el.setAttribute('style', 'display: block;');
      });
      progressNum.forEach(function(el){
        el.textContent = newProgressNum;
      });
    }
  };

// Most themes use jquery to make ajax requests, so that's how we'll do it. 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.
  $.ajax({
  type: 'GET',
  url: '/cart.js',
  dataType: 'json',
  success: function(cart){
    // run the calculator with a target price of $75
    calculateProgress(cart.total_price, 7500);
  }
});
  
</script>

Add this for the shipping progress bar.

 

ellienora
Visitor
2 0 1

Thank you for this code. I try this code and I am happy to see that I easily add a progress bar to my site Son Day to show progress.