ステップ４. カレンダー表示と予約受付の設定 | MTS乗車券予約システムスタートガイド

本システムにおいてフロントエンドから予約を受け付ける方法の１つとして、月表示の予約カレンダーを用意しています。このカレンダーは固定ページか、投稿のコンテンツに、ショートコードを設定することで簡単に表示できます。

では試してみましょう。

ショートコード month_calendar

最初にカレンダーを表示するための固定ページで、「予約カレンダー」を新規登録します。そしてコンテンツにキーワードと運行データのIDを指定します。運行データのIDは、「運行計画」の表示リストの先頭カラムに表示される数字です。例えば「ID=5」であれば、次のようにショートコードとIDを指定します。

[month_calendar tid="5"]

公開登録して、当該ページを表示してください。期待通り、のカレンダー表示にはならなかったと思います。これは、予約を受け付けるための準備ができていないためです。次節で予約を受け付けるよう設定を進めます。

予約フォーム表示のための固定ページで、スラッグ名を「booking-ticket」と名付けたページを新規に公開登録してください。スラッグ名の設定は、ページ登録後の固定ページ一覧表示から「クィック編集」を利用して設定します。

このページは予約処理を進める予約フォーム、および予約の実行に利用します。

予約受付は、運行データごと受付期間が設定できるようなっています。設定画面は、「運行計画」のリストから所定の運行データを選択、「予約受付」から進みます。

設定は、「受付中」をチェックし、「受付開始」を「30」日前から「受付終了」を利用当日の「1」日前までとして設定します。

予約メールを設定すると予約受付時にメールを自動送信するようになります。が、まだメールテンプレートを設定していませんので、ここではそのまま「保存する」ボタンを押して登録してください。

フロントエンドのホーム画面から、ショートコードを設定した固定ページを再度表示してください。

カレンダーの表示は、登録した運行データと運行計画に合わせた予約情報が、予約申込のチェックボックスとともに表示されます。

運行便の予約情報は図のように、下り便と上り便が上下に分割されて表示されます。便名の後ろの括弧内の数字は、空席数を表します。

前節で予約処理を進めるため、予約フォーム処理のための固定ページを準備しました。このままフロントエンドの予約カレンダーを利用し、予約操作を続けてみましょう。なお予約実行時の予約メールについて、まだ何も設定していませんので送信はされません。

予約操作は次の手順で進めます。

それではカレンダーの下り、上り各１便をチェックし、「送信する」ボタンを押してください。

予約処理に入ると、選択した運行便がリスト表示されます。乗下車駅、座席を指定して「送信する」ボタンを押し、進みます。

申込者の連絡先入力フォームになります。ログインユーザーが予約フォームを表示すると、ユーザー登録項目が入力項目にコピーされて表示されます。

入力項目は各種設定において選択できます。選択項目は複数用意しておりますが、スマートフォンの利用を考えた場合、入力項目が多いと入力操作が煩雑になり、予約を中断する事が多くなるようですのでよく検討してください。

「(*)」は必須入力を表します。入力したところで「確認する」ボタンを押します。

プライバシーポリシー、利用規約は別途ページを用意し、設定画面でリンク先を設定すると、同意チェックの下にリンク先が表示されるようになります。

プライバシーポリシー、利用規約の同意して「予約する」ボタンを押すと予約が実行されます。

本システムが割り当てる予約IDですが、次のような構造で自動的に割り振ります。

prefix + yymmdd + id + suffix

prefixとsuffixは予め用意された文字列で、prefixは「A」、suffix「空」文字です。yymmddは予約を実行した日付、idはデータベースに登録した予約データのユニークidです。

図示の「予約情報」ですが、ログインユーザーに限り管理画面上でこれまでの全予約を、リスト表示することができます。

Webサイトで、フロントエンドでの予約操作の進め方、予約フォームについて見てきました。

実際の運用では、予約を受け付けたことを知らせるための予約メールの送信が必要になります。そのための「メールテンプレート」の設定、登録について見ることにします。

また登録ユーザーであれば予約履歴から「キャンセル」が実行できます。キャンセル機能を次章で解説します。