cancel
Showing results for
Did you mean:

## Automated progress bar update

Highlighted
Tourist
5 0 2

I want to create a progress bar of some sort on my product page.
For Example: We will only start manufacturing the product if we are able to sell 30 orders for the product.

So I'd like to display 24 sold 6 to go - somewhere along those lines to display on the product page and maybe under the products on the collections page.

Right now im using an app which displays a progress bar but I have to manually change the values each day.

Is there anyway to extract the information from the backend so this process can update automatically?

Highlighted
Shopify Partner
67 6 14

Its a bit hack-ish.. BUT:

You could set your inventory quantity to a predetermined value, say 50.

Then you could use Liquid reference for variant.inventory_quantity. From there, you know that the original quantity was 50, so you just need to know how many left in your inventory, so its 50 - variant.inventory_quantity. You now know how many have been sold.

If you grab a bit of javascript to change the width of a div based on the number of products sold. 100% of the bar is 30 sold, so just divide the number of units sold by 30 and you've got your percentage.

Check out this tutorial:

https://www.w3schools.com/howto/howto_js_progressbar.asp

Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
Highlighted
Tourist
5 0 2

Thank you for the prompt and descriptive reply, I will definitely look into this!

Highlighted
Tourist
5 0 2

Question 1:

lets just say I have 2 variants of the same product:

variant 1: 1x product - \$20
variant 2: 3x product - \$50

They are the same products but priced differently if they purchase 3 at a time.

I'm able to get the values for variant.inventory_quantity but that only gives me the value of 1 variant and not both.

So if I want to calculate the progress of this product.

30 - (Variant 1 + (Variant 2 * 3)) = amount needed to manufacture

Question 2:

I want to calculate the % of the orders:
2 purchased out of 10 = 20%
5 purchased out of 10 = 50%

But I would also like to calculate the % if it is above 30.

For example:

16 purchased out of 10 = 160%
25 purchased out of 10 = 250%

essentially its (16/10)*100

But when I use {{variant.inventory_quantity | divided_by: 10}} >> the result I get is 1 instead of 1.6

Highlighted
Shopify Partner
67 6 14

Question 1:

Yes that will be more difficult, the variant object only exposes the current variant. What you will need to do is access the product.variants and then loop across it to find the inventory_quantity of each variant. Then sum the values together.

Question 2:

https://shopify.dev/docs/themes/liquid/reference/filters/math-filters#divided_by

The divided_by filter will round down, as you can't have a fraction of a product. I would suggest you do the calculations in Javascript instead.

Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
Highlighted
Tourist
5 0 2

Sorry I have a newb question, below is what I have so far, but how to I get the values in CAPS.

<p id="demo"></p>

<style>
#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
width: percentage;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>

<div id="myProgress">
<div id="myBar"></div>
</div>

<script>

var x = (TOTALINVENTORYVALUE);
var y = (VARIANTCOUNT);
var z = (VARIANTINVENTORYQUANTITY);
var i;

for (i = 0; i < y; i++) {
x = x + z;
}

document.getElementById("demo").innerHTML = x;

var j = 0;
function move() {
if (j == 0) {
j = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
j = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}

var percentage = (x / 30 * 100);
}
</script>

Shopify Partner
67 6 14

Hi Silax,

No worries.

I'd suggest you use Liquid for that part. Here is a link to the Liquid objects in the Shopify docs. https://shopify.dev/docs/themes/liquid/reference/objects

As we'd discussed before, you will probably need to iterate across the product to get the different quantities from each variant, and add them together to get your total quanity still in inventory, then minus that away from your original inventory number

(If you'd take a bit of coding advice, try and give your variables decent names, X Y and I are nice, but not very easy to read to figure out what they do!)

Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
Highlighted
Tourist
5 0 2

I can't thank you enough!

Thank you, Thank you, Thank you!

Highlighted
Shopify Partner
67 6 14

All good, Silax.

You've done most of the work I just pointed you at some documents!

Cheers

Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
Latest Topics

Latest Posts

• ## Unable to Mark Orders Fulfilled Via API Call

Most Liked Authors