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?


0 Likes
Highlighted
Shopify Partner
68 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

 

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
1 Like
Highlighted
Tourist
5 0 2

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

 

1 Like
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

Thanks in advance

0 Likes
Highlighted
Shopify Partner
68 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.

 

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
1 Like
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>

 

 

Thanks in advance

0 Likes
Highlighted
Shopify Partner
68 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!)

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

I can't thank you enough! 

Thank you, Thank you, Thank you!

1 Like
Highlighted
Shopify Partner
68 6 14

All good, Silax.

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

Cheers

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
0 Likes