Liquid、JavaScriptなどに関する質問
Debutをベースにカスタマイズ挑戦中です。
商品の詳細ページで、
バリエーションが複数(入り数違いで値段が変わるなど)ある場合、
デフォルトではバリエーションの入り数をプルダウンで変更してカートに追加する形ですが、
商品タイトル
3個セット AAA円
[カートに追加]
5個セット BBB円
[カートに追加]
のようにプルダウン選択でなく、
ボタンを分ける形でカートに追加させることは可能なのでしょうか?
可能でしたら、サンプルコードなどご教授いただけますと大変助かります。
恐縮ですがどうぞよろしくお願いいたします。
基本的にはvariantsオブジェクト( https://shopify.dev/docs/themes/liquid/reference/objects/variant/ )を利用しつつJSを書く形になると思います。
カートに入れてそのままチェックアウト画面に移動するような動作であれば、JSを書かずとも下記スレッド内のサンプルを利用して実現できるのではと思いますが。
上記の動作ではなく、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
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024