Collectionでバリエーションごとの在庫数を合計して表示するコードの紹介

ShopifyテーマのDawnのコレクション部分に、各商品内のバリエーションごとの在庫数を合計して、全バリエーションの在庫の合計が1であれば赤色で表示させるコードを紹介します。

コレクションで各バリエーションの在庫数を計算し、残り1点の商品のみ表示させるのに時間がかかったので備忘録として記録します。完成すると以下のような見た目になります。

    {% assign results = "" %}
    {% for var in card_product.variants %}
      {% assign results = results | append: var.inventory_quantity | append: "," %}
    {% endfor %}
    {% assign numbers = results | split: "," %}
    {% assign total = 0 %}
    {% for number in numbers %}
      {% assign total = total | plus: number | plus: 0 %}
    {% endfor %}
    {% if total == 1 %}
      <small style="color:#e22120; font-size: 10px; font-weight: 600;">残り{{ total }}点</small>
    {%- endif -%}
  

card-product.liquidの140行目付近に上記のコードを貼り付けます。