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

日本語 ディスカッション 技術的なQ＆A
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');
};

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

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

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