Drupal commerce kickstart のチェックアウト画面にフィールドを追加するには

Drupal 7 の Commerce Kickstart のチェックアウト画面にフィールドを追加する方法をご紹介します。

Drupal の commerce kickstart では、チェックアウトプロセスに進むと、請求先住所と送付先住所、支払い方法、発送方法といった予め用意された項目しか入力できません。しかし、場合によっては、チェックアウト画面で「備考」や「特記事項」、「フィードバック」などを追加したいということもあると思います。

今回は、注文した商品を Take away(New Zealand では Take out と言わずに Take away といいます)する日を選択したいという要望がありました。

そこで、今回は Drupal commerce kickstart のチェックアウト画面にフィールドを追加する方法をご紹介します。

モジュールを2つ追加

初めに、下記の2つのモジュールを追加して、有効にします。

もし他にも依存関係のモジュールが不足していたらそれも追加しましょう。依存関係のモジュールがインストールされていないとモジュールを有効にできません。

ckCheckoutAddField01-min.png

Order settings でフィールドを追加

続いて、「Store settings > Order settings」へ進みます。

ckCheckoutAddField02-min.png

「Order settings」へ進んだら「Manage fields」のタブをクリックします。そして「Add new field」の行へ追加したいフィールドの情報を入力し「Save」します。ここでは、Label を「Date of taking away」、Type を「Date」の「Pop-up calendar」にしました。

ckCheckoutAddField03-min.png

次のページでフィールドの設定をして「Save field settings」をクリックします。日時の情報をどこまで持たせるか設定できるのは便利ですね。

ckCheckoutAddField04-min.png

次のページで必須のフィールドにするかを設定できます。今回は必須項目にしたいので「Required field」にチェックを入れて「Save settings」をクリックします。

また、「More settings and values」のところで、何分単位で入力するとか、カレンダーを何年前から何年後まで表示させるとか、日時の表示形式はどうするかとかを選択できます。

ckCheckoutAddField05-min.png

すると「Manage fields」の画面に戻るので、今度は「Add new group」のところに、先ほど作成した「Date of taking away」フィールドを入れるためのグループを作成して「Save」します。ここでは、Label を「Take away information」、Group name を「takeawayinformation」、タイプを「Fieldset」にしました。

ckCheckoutAddField06-min.png

グループ(Take away information)ができたら、先ほど作ったフィールド(Date of taking away)をドラッグアンドドロップでグループの下に移動して「Save」します。

ckCheckoutAddField07-min.png

Checkout settings でフィールドグループを設定

あと少しです。次は「Store settings > Checkout settings」を開きます。

ckCheckoutAddField08-min.png

表示されたページの下の方の「Disabled」のセクションに先ほど作成したグループ(Take away information)あります。

ckCheckoutAddField09-min.png

今回は、チェックアウト画面に追加したいので、このグループ(Take away information)を上の方にある「Checkout」セクションにドラッグアンドドロップして「Save configuration」をクリックします。

ckCheckoutAddField10-min.png

これで表側のサイトのチェックアウトの画面に表示されます。

ckCheckoutAddField11-min.png

ちょっと手順は多かったですが、すべて管理画面の中で GUI でできるのは嬉しいですね。

以上です。

Published 2016-10-07
Updated 2019-06-25