# バリエーションごとに　在庫フィルターの設定

**URL:** <https://community.shopify.com/t/topic/127365>\
**Category:** 技術的なQ＆A\
**Created:** [June 10, 2022, 1:08pm UTC](https://community.shopify.com/t/topic/127365 "2022-06-10T13:08:58Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

テーマSymmetry（Shopify テーマ2.0）の「出品状況（availability）」フィルターで、商品をバリエーション（例：サイズなどの選択肢）単位で非表示にしたいという要望。現在は商品一覧でバリエーションを個別表示しているため、1つでも在庫ありのバリエーションがあると、在庫切れバリエーションも一覧に残ってしまう課題。store-availability.liquidでの対応可否を質問。

提案された対応案：商品詳細ページにJavaScriptを記述し、在庫がないバリエーションにCSSクラスを付与して視覚的に非表示/判別する方法。Liquidでproduct.variantsから各バリエーションのオプション値と在庫状態（available）を配列化し、DOMContentLoadedで選択中のバリエーションを判定、該当要素にout_of_stockクラスの付与/削除を行う。DOMのクラス名はテーマに合わせて調整が必要。コード例が提示されている（詳細は添付コードが中心）。

現状の結論：store-availability.liquidでのコレクション（商品一覧）側のバリエーション単位フィルタリング可否や実装方法は未解決。提示案は商品詳細ページでの対処であり、一覧ページでの厳密なバリエーション単位非表示は引き続き要検討。

<div class="post-metadata">

**Author:** ![c-s](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@c-s](https://community.shopify.com/u/c-s)\
**Post date:** [June 10, 2022, 1:08pm UTC](https://community.shopify.com/t/topic/127365/1 "2022-06-10T13:08:58Z")

</div>

現在、商品のバリエーションが商品一覧へすべて表示させるように設定をしています。

shopifyのテーマ2.0（symmetry ）には、もともと出品状況（availability）の絞込み機能が備わっており、

在庫切れ商品を 表示・非表示 の絞込みが可能となっています。

しかし、商品バリエーションを商品一覧に表示される設定になっているため、

商品のバリエーション内に1つでも在庫があるものがあれば、

「在庫切れ商品＝非表示」 と絞込みしても、在庫切れのバリエーションも表示されてしまいます。

これをバリエーションごとに表示・非表示 の絞込みさせるには

store-availability.iquid内での設定になるのでしょうか？

ご教授いただけたら幸いです。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [August 25, 2022, 1:13am UTC](https://community.shopify.com/t/topic/127365/2 "2022-08-25T01:13:37Z")

</div>

C-S 様

お世話になっております。

商品詳細ページにJSを記述することで可能かと思います。

一案ですが、以下バリエーションの在庫がないものにCSSを付与するという一例になります。

```javascript
//　商品詳細ページに以下を記述しています。
//　①在庫参照用にサイズと在庫状況を配列に入れる。
let refVariants = [];
{% for variant in product.variants %}
refVariants.push({
  size: '{{ variant.option1 }}',
  available: '{{ variant.available }}' === 'true',
});
{% endfor %}

// ②ページ読み込み時、③の関数を呼ぶ
window.addEventListener('DOMContentLoaded', function () {
　　　　// 私の場合はこのDOMにサイズ情報が入っていました。
  const target = document.getElementsByClassName('ProductForm__SelectedValue');
  const selectedSize = target[0].textContent;
  checkVariantsAvailable(selectedSize);
});

// ③variantsの在庫があるか①と比較する関数
const checkVariantsAvailable = (selectedSize) => {
  const selectedVariant = refVariants.filter(
    (variant) => variant.size === selectedSize
  );
  if (selectedVariant.available) {
    target.classList.remove('out_of_stock');
  } else {
    target.classList.add('out_of_stock');
};

ご質問者様と、クラス名などの状況が違うので、そのままコピペはできないかと思いますが、ご参考になれば幸いです。

どうぞよろしくお願いいたします。

株式会社フルバランス ドウケ
```