Shopify Low Stock Counter Snippet

{%- comment -%}
  Low stock counter. Render inside the product form, near the variant picker:
  {% render 'low-stock-counter', product: product %}

  It shows the count for the selected variant and updates when the shopper picks a different
  variant, as long as your theme fires a "change" event on the hidden variant id input (the
  standard most Online Store 2.0 themes use). If it doesn't update on your theme, it will still
  show the right count for whichever variant loaded the page.

  inventory_quantity is only meaningful for variants with inventory tracked by Shopify: if
  tracking is off, that field instead returns units sold, so this only renders when
  inventory_management is "shopify".
{%- endcomment -%}
{%- style -%}
  .ea-lsc{color:#b3261e;font-size:.9em;font-weight:600;margin:.4rem 0}
  .ea-lsc[hidden]{display:none}
{%- endstyle -%}
{%- liquid
  assign current = product.selected_or_first_available_variant
  assign show = false
  if current and current.inventory_management == 'shopify' and current.inventory_quantity > 0 and current.inventory_quantity <= 5
    assign show = true
  endif
  assign text = "Only [count] left in stock" | replace: '[count]', current.inventory_quantity
-%}
<span id="LowStock-{{ product.id }}" class="ea-lsc" data-threshold="5" data-template="Only [count] left in stock" {% unless show %}hidden{% endunless %}>{{ text }}</span>

<script>
  window.__eaLowStock = window.__eaLowStock || {};
  window.__eaLowStock[{{ product.id | json }}] = {
    qty: { {%- for variant in product.variants -%}{{ variant.id }}: {{ variant.inventory_quantity | default: 0 }}{% unless forloop.last %}, {% endunless %}{%- endfor -%} },
    tracked: { {%- for variant in product.variants -%}{{ variant.id }}: {{ variant.inventory_management | json }}{% unless forloop.last %}, {% endunless %}{%- endfor -%} }
  };
  (function () {
    var el = document.getElementById('LowStock-{{ product.id }}');
    if (!el || el.dataset.wired) return;
    el.dataset.wired = '1';
    var form = el.closest('form');
    var input = form ? form.querySelector('[name="id"]') : null;
    if (!input) return;
    var threshold = Number(el.getAttribute('data-threshold'));
    var template = el.getAttribute('data-template');
    function render() {
      var data = window.__eaLowStock[{{ product.id | json }}];
      var id = input.value;
      var tracked = data.tracked[id] === 'shopify';
      var qty = data.qty[id];
      if (tracked && qty > 0 && qty <= threshold) {
        el.textContent = template.replace('[count]', qty);
        el.hidden = false;
      } else {
        el.hidden = true;
      }
    }
    input.addEventListener('change', render);
  })();
</script>