商品詳細ページでバリエーションごとにカートに追加ボタンを設置したい

aysen · ‎03-19-2021

Debutをベースにカスタマイズ挑戦中です。

商品の詳細ページで、
バリエーションが複数（入り数違いで値段が変わるなど）ある場合、
デフォルトではバリエーションの入り数をプルダウンで変更してカートに追加する形ですが、

商品タイトル

3個セット AAA円
[カートに追加]

5個セット BBB円
[カートに追加]

のようにプルダウン選択でなく、
ボタンを分ける形でカートに追加させることは可能なのでしょうか？

可能でしたら、サンプルコードなどご教授いただけますと大変助かります。
恐縮ですがどうぞよろしくお願いいたします。

Jizo_Inagaki · ‎04-20-2021

基本的にはvariantsオブジェクト( https://shopify.dev/docs/themes/liquid/reference/objects/variant/ )を利用しつつJSを書く形になると思います。

カートに入れてそのままチェックアウト画面に移動するような動作であれば、JSを書かずとも下記スレッド内のサンプルを利用して実現できるのではと思いますが。

上記の動作ではなく、Debutで設置されているボタンのようにカートに入るだけということであれば、以下のドキュメントにあるadd.jsを用いたJSを書く必要があるはずです。

他にはテーマ内蔵のJSに処理を追加する方法も考えられはしますが、いずれにしましても、ドキュメントやフォーラムと共にproduct-template.liquidやtheme.jsなどを読まれることをお勧めします。Debut自体がサンプルコードの塊だと思いますので。

なお、サンプルコードと書かれていましたので開発者側という前提で記載しましたが、そうではなくマーチャント側ということでしたら、以下のようなアプリを使うか元からご希望の状態になっているテーマを探された方が良いかと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

コミュニティ・ブログ記事