商品のバリエーションをドロップダウンにしたい

[Keiko16]

テーマpipelineで作成しております。

商品詳細ページ内のバリエーションをドロップダウンで見せたく、
構築しておりますが見え方はドロップダウンになるのですが価格と在庫数を拾うことができず困っております。

ご相談に乗っていただきたいです。

 

[Qcoltd]

@Keiko16 様

Pipelineを少し見てみましたが、

商品詳細ページでバリエーションボタンをクリックした際、

ページ遷移はしておらず、JavaScriptでページの内容を書き換えているように見えました。

(Pipelineに限らず、最近のテーマはどれもそうなっていますが。)

バリエーションごとに金額が異なる場合、

JavaScriptの処理で、金額の変更をページに反映しているわけですが。

自作のドロップダウンには、そのJavaScriptの処理はないため、

それでドロップダウンで選択したバリエーションの金額が表示されないのだと思われます。

Pipelineの元々のバリエーション選択のJavaScriptを解析し、

今回実装されたドロップダウンにそれを適用すれば良さそうですが、

有料のテーマであるため私の方ではコードの詳細を確認できないので、

コードのご提案は難しいです。

しかし、

ページのパフォーマンスは悪くなりますが、

ドロップダウンを選択時にページ遷移するようにすることは比較的簡単に実装できそうです。

コンセプトだけの説明になってしまいますが、

例えば、下記のようにします。

1. selectのoptionにdata-variant-idというデータ属性を追加し、それにそれぞれのバリエーションのvariant idを設定する。(liquidで実装)
2. JavaScriptで、対象のselectのchangeイベント発生時に、選ばれたoptionのdata-variant-idの値を取得し、xxxxx.myshopify.com/product/{商品ハンドル}?variant={variant id}にページ遷移させる (ページ遷移は、location.href="{バリエーションのURL}" で可能です。)

ご参考まで。

(キュー田辺)