商品ページにてバリエーションのオプションが2つある場合、
利用できないバリエーションの場合は2つ目のバリエーション選択のオプションから非表示にしたいのですがどうすれば可能でしょうか？
例えば以下のような場合です。
カラー：ブラック、ブルー、ピンク
サイズ：XS、S、M、L、XL
ピンクのみXS、S、M、Lのサイズ展開
この場合、ブラック、ブルーのXSとピンクのXLに関しては利用できないバリエーションとなるのでカラーを選んだ段階で非表示にしたいです。
Topic summary
商品ページで利用できないバリエーションの組み合わせがある場合、2つ目のオプション選択肢を非表示にする方法についての質問です。
具体例：
- カラー：ブラック、ブルー、ピンク
- サイズ：XS、S、M、L、XL
- ブラックとブルーのXLとピンクのXSは存在しない組み合わせ
回答内容：
実装は可能だが、かなりのカスタマイズが必要。Dawn 12.0.0を前提とした2段階のアプローチが提示されています。
- Liquidコードの改修：
product-variant-options.liquidスニペットを修正し、存在しないオプションを判定して表示/非表示を制御 - JavaScriptの改修： バリエーション切替時に非表示オプションが正しく更新されるよう、JavaScriptの大幅な修正が必要
提供された解決策：
ステップ1については具体的なコード例が提示されており、option_exists変数を使って利用可能なバリエーションに基づいてボタンの表示/非表示を制御する方法が説明されています。ステップ2のJavaScript改修は複雑なため、制作会社への依頼が推奨されています。
@Anonymous_d308f7764218588f2f671f8729a63505 様
可能ではありますが、かなりのカスタマイズが必要です。
Dawn 12.0.0 を前提として、コンセプトだけお伝えします。
- https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L36-L39
スニペット > product-variant-optionsの上記のコードを改修して、「存在しないオプション」かどうかを判定し、存在すれば表示、というコードを組みます。 - 1だけですと、商品詳細ページ上で問題が出ます。問題とは、商品詳細ページでバリエーション切替を行っても、最初に表示したバリエーションのオプションの有無が引き継がれて、一度非表示になったオプションを表示できなかったり、逆に、非表示にもできなかったり、することです。これを改修するには、かなりのJavaScriptの改修が必要になります。
「1」については比較的簡単なので、
Dawn 12.0.0を前提にコードカスタマイズの具体的な方法を記載いたします。
https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L27-L46
この部分を下記のように書き換えます。
assign option_disabled = true
assign option_exist = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
else
if option1_name == product.selected_or_first_available_variant.option1
assign variants_option2_filtered_by_option1_arr = product.variants | where: "option1", option1_name | map: 'option2'
unless variants_option2_filtered_by_option1_arr contains value
assign option_exist = false
endunless
endif
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
存在しなオプションの場合、option_existがfalseになりますので、
それを利用して、バリエーション切替ボタンの表示/非表示を制御します。
しかし、
「2」のJavaScriptの改修も必須になるのですが、
そちらは簡単にお伝えできる内容ではないため、
身近な詳しい方や制作会社様にお声がけいただくのが良いかと思います。
ご参考まで。
(キュー田辺)