Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
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.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024