# バリエーションの非表示 **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** javascript, css, html\ **Created:** [November 7, 2023, 12:53am UTC](https://community.shopify.com/t/topic/266053 "2023-11-07T00:53:04Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary 商品ページで利用できないバリエーションの組み合わせがある場合、2つ目のオプション選択肢を非表示にする方法についての質問です。 **具体例：** - カラー：ブラック、ブルー、ピンク - サイズ：XS、S、M、L、XL - ブラックとブルーのXLとピンクのXSは存在しない組み合わせ **回答内容：** 実装は可能だが、かなりのカスタマイズが必要。Dawn 12.0.0を前提とした2段階のアプローチが提示されています。 1. **Liquidコードの改修：** `product-variant-options.liquid`スニペットを修正し、存在しないオプションを判定して表示/非表示を制御 2. **JavaScriptの改修：** バリエーション切替時に非表示オプションが正しく更新されるよう、JavaScriptの大幅な修正が必要 **提供された解決策：** ステップ1については具体的なコード例が提示されており、`option_exists`変数を使って利用可能なバリエーションに基づいてボタンの表示/非表示を制御する方法が説明されています。ステップ2のJavaScript改修は複雑なため、制作会社への依頼が推奨されています。
**Author:** ![Anonymous\_d308f7764218588f2f671f8729a63505](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@Anonymous\_d308f7764218588f2f671f8729a63505](https://community.shopify.com/u/Anonymous_d308f7764218588f2f671f8729a63505)\ **Post date:** [November 7, 2023, 12:53am UTC](https://community.shopify.com/t/topic/266053/1 "2023-11-07T00:53:04Z")
商品ページにてバリエーションのオプションが2つある場合、 利用できないバリエーションの場合は2つ目のバリエーション選択のオプションから非表示にしたいのですがどうすれば可能でしょうか？ 例えば以下のような場合です。 カラー：ブラック、ブルー、ピンク サイズ：XS、S、M、L、XL ピンクのみXS、S、M、Lのサイズ展開 この場合、ブラック、ブルーのXSとピンクのXLに関しては利用できないバリエーションとなるのでカラーを選んだ段階で非表示にしたいです。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [November 7, 2023, 1:32pm UTC](https://community.shopify.com/t/topic/266053/2 "2023-11-07T13:32:57Z")
@Anonymous_d308f7764218588f2f671f8729a63505 様 可能ではありますが、かなりのカスタマイズが必要です。 Dawn 12.0.0 を前提として、コンセプトだけお伝えします。 1. [https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L36-L39](https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L36-L39) スニペット \> product-variant-optionsの上記のコードを改修して、「存在しないオプション」かどうかを判定し、存在すれば表示、というコードを組みます。 2. 1だけですと、商品詳細ページ上で問題が出ます。問題とは、商品詳細ページでバリエーション切替を行っても、最初に表示したバリエーションのオプションの有無が引き継がれて、一度非表示になったオプションを表示できなかったり、逆に、非表示にもできなかったり、することです。これを改修するには、かなりのJavaScriptの改修が必要になります。 「1」については比較的簡単なので、 Dawn 12.0.0を前提にコードカスタマイズの具体的な方法を記載いたします。 [https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L27-L46](https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid#L27-L46) この部分を下記のように書き換えます。 ```markup 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の改修も必須になるのですが、 そちらは簡単にお伝えできる内容ではないため、 身近な詳しい方や制作会社様にお声がけいただくのが良いかと思います。 ご参考まで。 (キュー田辺)