Skip to content

Instantly share code, notes, and snippets.

@candelatech
Last active September 17, 2020 18:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save candelatech/d8350fcc7ac81c11abbe78e01ba83062 to your computer and use it in GitHub Desktop.
Save candelatech/d8350fcc7ac81c11abbe78e01ba83062 to your computer and use it in GitHub Desktop.
{% comment %}
Client wants a realistic inventory gauge displayed on the product page.
Limitations in Shopify are heavy, so this only works with products with a "Size" option that is formatted like {{number}}oz or {{number}}lbs
The idea here is to basically sum up the total number of pounds of product we have remaining, and divide that by the pre-set batch size.
The pre-set batch size is configured with Shopify meta tags, per-product.
{% endcomment %}
{% assign total_lbs = 0.0 %}
{% assign batch_size = product.metafields.kirby.content.batch_size %}
{% assign weight_option_index = product.options_by_name["Size"].position %}
{% comment %}
Here is where we loop through every variant and sum up the total "poundage" remaining for this batch.
Supports only lbs and oz currently, but this could be extended fairly easily.
{% endcomment %}
{% for variant in product.variants %}
{% assign actual_weight = "" %}
{% if weight_option_index == 1 %}
{% assign actual_weight = variant.option1 %}
{% elsif weight_option_index == 2 %}
{% assign actual_weight = variant.option2 %}
{% elsif weight_option_index == 3 %}
{% assign actual_weight = variant.option3 %}
{% endif %}
{% if actual_weight contains "lbs" %}
{% assign num = actual_weight | split: "lbs" | first | trim %}
{% assign lbs_in_stock_this_variant = num | times: variant.inventory_quantity %}
{% assign total_lbs = total_lbs | plus:lbs_in_stock_this_variant %}
{% elsif actual_weight contains "oz" %}
{% assign num = actual_weight | split: "oz" | first | trim %}
{% assign lbs_in_stock_this_variant = num | times: variant.inventory_quantity | divided_by: 16.0 %}
{% assign total_lbs = total_lbs | plus:lbs_in_stock_this_variant %}
{% endif %}
{% endfor %}
{% comment %}
Client wanted the ability to have "Evergreen" products that appear always in-stock.
This is the only semi-gray area where the inventory bar may not match the true stock level.
Additionally, client wanted the bar to never dip below 10% with the product being in stock
- this is really just for legibility/UX
{% endcomment %}
{% assign inv_percent = 0 %}
{% if batch_size == "Evergreen" %}
{% assign inv_percent = 100 %}
{% else %}
{% assign batch_size_num = batch_size | plus: 0 %}
{% assign inv_percent = total_lbs | times: 100 | divided_by: batch_size_num %}
{% if inv_percent < 10 and product.available %}
{% assign inv_percent = 10 %}
{% endif %}
{% if inv_percent > 100 %}
{% assign inv_percent = 100 %}
{% endif %}
{% endif %}
<div class="inventory">
<label>Current Inventory</label>
<div class="inv-bar">
<div class="inner" style="width:{{inv_percent}}%;"></div>
<!--
Hello There!
If you're reading this, you're probably wondering if this bar is a legit number or not. Rest assured, they're real.
All too often, brands don't give a shit about transparency and deploy fake versions of "inventory trackers"
like this one to trick you... which makes us sad.
In the spirit of transparency, we have published the liquid code that powers this little bar so you don't have to take our word for it:
https://gist.github.com/candelatech/d8350fcc7ac81c11abbe78e01ba83062
-->
</div>
<div class="inv-labels">
<span class="accent-text">Low</span>
<span class="accent-text">High</span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment