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

日本語 ディスカッション 技術的なQ＆A

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でのコレクション（商品一覧）側のバリエーション単位フィルタリング可否や実装方法は未解決。提示案は商品詳細ページでの対処であり、一覧ページでの厳密なバリエーション単位非表示は引き続き要検討。

1

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

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

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

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

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

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

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

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

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

2

C-S 様

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

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

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

//　商品詳細ページに以下を記述しています。
//　①在庫参照用にサイズと在庫状況を配列に入れる。
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');
};

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

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

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