バリエーションの非表示

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

商品ページにてバリエーションのオプションが2つある場合、
利用できないバリエーションの場合は2つ目のバリエーション選択のオプションから非表示にしたいのですがどうすれば可能でしょうか？

例えば以下のような場合です。
カラー：ブラック、ブルー、ピンク
サイズ：XS、S、M、L、XL
ピンクのみXS、S、M、Lのサイズ展開

この場合、ブラック、ブルーのXSとピンクのXLに関しては利用できないバリエーションとなるのでカラーを選んだ段階で非表示にしたいです。

2

@Anonymous_d308f7764218588f2f671f8729a63505 様

可能ではありますが、かなりのカスタマイズが必要です。

Dawn 12.0.0 を前提として、コンセプトだけお伝えします。

  1. 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

この部分を下記のように書き換えます。

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の改修も必須になるのですが、

そちらは簡単にお伝えできる内容ではないため、

身近な詳しい方や制作会社様にお声がけいただくのが良いかと思います。

ご参考まで。

(キュー田辺)