【Shopify】カート画面にラジオボタン型の選択フォームを設ける
今回はカート画面にラジオボタン型の選択フォームを設け、選択された内容を注文ページで見れるようにしたいと思います。
最終的に目指す形はこちら↓↓
背景として・・・
私のショップでは、ハロウィン期間限定で商品を発送する際に、通常の配送ボックスではなく、ハロウィンデザインの配送ボックスで送れるようにしたいと思っていました。
でも、ハロウィンデザインではなく、通常の配送ボックスを希望されるお客様がいらっしゃるかもしれないので、注文時にお客様が希望の配送ボックスを選べるようにしたかったんです。
そこで、決済前のカート画面に配送ボックスを通常ボックスか、ハロウィンボックスか選べるようにしたい！と思い、実装してみました。
（他の方法として、「無料のハロウィン限定ボックスの商品ページを作って、それをお客様に購入いただく」という方法もできなくはないですが、それだとハロウィンボックスの存在に気づかない方が出てきそうなので、カートページで選べる方法にしました。）
今回は配送ボックスの選択ですが、他にも納品書の同封をするか？やメッセージカードをつけるか？など、商品単位ではなく注文単位で聞きたいことを回収するのに役立ちそうですね。
それでは、やっていきましょう！
前提
私のショップは
・テーマ「Sense」
・プラン「Basic」
です。
他のテーマで同じように動くとは限りませんので、動作チェックをお願いいたします。
１．コードを生成する
カート画面に表示する選択フォームを作ってきます。
こちらのShopifyが公式に提供しているShopify UI Element Generatorというジェネレーターサイトを使って、追加したい入力項目のUIをプレビューしながら挿入するコードを生成できます。
今回は作るコードはこのとおり。欲しい情報に書き換えて作ってください。
Type of form field：Radio Buttons
Your form field label：ご希望の配送BOX
Options if using radio buttons or a drop-down select：ハロウィン限定BOX,通常ギフトBOX
Required：True
今回はラジオボタンですが、他にもテキストやドロップダウン、チェックボックスなどできますよ。
すると、画面右側にフォームのプレビューが表示され、画面下にはコードが自動で生成されます。
このコードをコピーすればOKです。
２．コードを挿入する
では、作ったコードをテーマに挿入していきます。
オンラインストア＞テーマ＞コード編集で編集画面を開き、セクション「main-cart-item.liquid」を開きます。
※すでに稼働している環境の場合は、コードを編集する前にテーマを複製してバックアップをとっておくようご注意ください！
この中で<form>タグ内に１でコピーしたコードを貼り付けていきます。
区切りが良い場所であればどこでも良いのですが、初心者の私にはどこが区切りが良いのか分からず・・・フォーム内で</form>を検索して、フォームタグの最後を見つけ、この直前に挿入してみました。
後は右上の「保存」をクリックすれば完了です！
３．注文完了画面に選択内容を表示させる
カート画面に選択フォームを表示させるのは以上ですが、ついでに注文完了画面もカスタマイズします。
何を選択したか分からなくならないように表示できると親切ですよね。
手順は簡単。設定＞チェックアウトの注文状況ページの「追加スクリプト」に以下のコードを貼り付けるだけ。
{% if attributes %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
{% for attribute in attributes %}
'<h2>{{ attribute | first }}</h2>',
'<p>{{ attribute | last }}</p>'
{% endfor %}
)
</script>
{% endif %}
これだけで注文完了ページに表示させることができます。
３．テストしてみよう！
実際にフォームが表示されるか、選択した情報がちゃんと注文完了ページと注文管理ページに反映されるかをテストしてみましょう。
編集したテーマをメインテーマに設定していない場合は、右上の「ストアをプレビュー」からテストできますよ。
適当な商品を選んでカート画面を見てみると・・・
きました！商品一覧の下にいい感じに表示されています。
コードを生成する際に「Required」にチェックをしたので、選択しないで購入手続きに進もうとすると、ちゃんと警告文が表示されます。
購入を完了すると・・・
選択した配送ボックスが表示されていました。
さらに、注文管理ページをみてみると・・・
画面右上のメモに「追加の詳細」という欄が増えて、注文時に選択した内容が反映されていました！
本当は注文完了時のお客様への確認メールにも選択された配送ボックスを表示させたかったのですが、今回はもうハロウィンも近づいているので、またの機会に頑張りたいと思います・・・
ご存じの方いらっしゃったら、ぜひ助けてください・・・
ということで、今回はカート画面をカスタマイズしてみました。
実は今回は結構手こずりまして、実装するのに丸２日くらいかかりました。汗
当初は諦めてココナラやクラウドワークスで対応できる方を探していたのですが、
・スキルが足りていなくて対応できない
・対応できるが予算は１万円〜（なかには５万円も・・・）
という状況で、なんとか自力でやってやる〜！と思い、色々調べてクリアしたものです。
実際の操作としてはかなり簡単だったのですが、きっと3,000円分くらいの価値がある情報と思っています。笑
なので、よければ「いいね」をお願いします。次回以降の活力になります。（切実）
では、今回はここまで。
次は、商品ページのカスタマイズに挑戦します。
この記事が気に入ったらサポートをしてみませんか？