テーマpipelineで作成しております。
商品詳細ページ内のバリエーションをドロップダウンで見せたく、
構築しておりますが見え方はドロップダウンになるのですが価格と在庫数を拾うことができず困っております。
ご相談に乗っていただきたいです。
Topic summary
Shopifyの有料テーマ「Pipeline」で商品バリエーションをドロップダウン表示に変更したところ、見た目は実装できたものの、価格と在庫数が正しく表示されない問題が発生。
原因:
Pipelineを含む最近のテーマは、バリエーション選択時にJavaScriptでページ内容を動的に書き換えている。自作のドロップダウンにはこのJavaScript処理が適用されていないため、価格や在庫情報が更新されない。
提案された解決策:
- JavaScript実装: selectのchangeイベント発生時に選択されたoptionのdata-variant-id属性値を取得し、
/product/{商品ハンドル}?variant={variant id}へページ遷移させる方法 - Liquid実装: select内の各optionにdata-variant-id属性を追加し、バリエーションIDを設定
ただし、Pipelineは有料テーマのため詳細なコード確認が困難で、具体的な実装コードの提案は難しい状況。比較的シンプルな実装方法として、ページ遷移方式が推奨されている。
@Keiko16 様
Pipelineを少し見てみましたが、
商品詳細ページでバリエーションボタンをクリックした際、
ページ遷移はしておらず、JavaScriptでページの内容を書き換えているように見えました。
(Pipelineに限らず、最近のテーマはどれもそうなっていますが。)
バリエーションごとに金額が異なる場合、
JavaScriptの処理で、金額の変更をページに反映しているわけですが。
自作のドロップダウンには、そのJavaScriptの処理はないため、
それでドロップダウンで選択したバリエーションの金額が表示されないのだと思われます。
Pipelineの元々のバリエーション選択のJavaScriptを解析し、
今回実装されたドロップダウンにそれを適用すれば良さそうですが、
有料のテーマであるため私の方ではコードの詳細を確認できないので、
コードのご提案は難しいです。
しかし、
ページのパフォーマンスは悪くなりますが、
ドロップダウンを選択時にページ遷移するようにすることは比較的簡単に実装できそうです。
コンセプトだけの説明になってしまいますが、
例えば、下記のようにします。
- selectのoptionにdata-variant-idというデータ属性を追加し、それにそれぞれのバリエーションのvariant idを設定する。(liquidで実装)
- JavaScriptで、対象のselectのchangeイベント発生時に、選ばれたoptionのdata-variant-idの値を取得し、xxxxx.myshopify.com/product/{商品ハンドル}?variant={variant id}にページ遷移させる (ページ遷移は、location.href=“{バリエーションのURL}” で可能です。)
ご参考まで。
(キュー田辺)