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

[aysen]

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

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

商品タイトル

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

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

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

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

[Jizo_Inagaki]

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

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

https://community.shopify.com/c/Shopify-Design/How-to-add-quot-add-to-cart-quot-button-on-my-collect...

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

https://shopify.dev/docs/themes/ajax-api/reference/cart

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

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

https://apps.shopify.com/variant-swatch-king