予約フォーム入力項目の追加

入力項目の追加は予約フォームに項目を追加する以外に入力内容の確認、予約確認フォームへの出力、予約メールへの埋込み、データベースへの登録、管理画面上でのデータ編集フォームが必要なため、入力フォームだけを書き換える作業のみで終わりません。

本システムは入力フォームの予約者データにおいて、本格的なカスタマイズを可能とするような仕組みを用意しました。そのためこの章の理解が難しいようであれば他者へ依頼する事をご検討下さい。

何ができるのか?

様々な入力項目を追加する事ができます。追加した入力項目についてはデータをチェックするプログラムの追加、エラーの表示を組み込む事もできます。

予約確認フォームや予約メールへの埋込みについては、例えばクレジットカードのIDであれば記号に変更したり、あるいは不記載にする事も可能です。

入力データはデータベースに保存され、管理画面の予約編集で表示したり、あるいは変更する事もできます。ですので将来それらのデータの活用も可能となります。

何をしなければならないか?

入力項目を追加するため、予約フォームの書き換え、予約確認フォームの書き換え、管理画面の予約者情報の書き換え、入力データのチェックプログラムの追加、メールに埋込むデータの書き換え、のそれぞれの処理をPHPプログラムで用意します。

本システムではプラグインディレクトリにある「temp/TemplateCustomer.php」ファイルにプログラムを実装する事になります。

また追加項目については、「Config.php」にキー名と必須入力チェックを設定しなければなりません。

サンプル

サンプルは「入力の変更・削除」の章において例とした項目の削除に、新たにチェックボックスを実装する例の「移動手段」、セレクトを実装する例の「移動時間」、テキスト項目にエラーチェックと確認フォームやメール内での出力の書き換えを実装する例の「クーポン」の3つの項目を追加したものになります。

以下の図は、サンプルのカスタマイズを実装して実行したときの予約フォームと予約確認フォームの表示例です。

CSSデザインについては何も考慮しておりません。ご利用の際はサイトに合わせてプログラムを実装して下さい。

カスタマイズした予約入力フォーム

カスタマイズした予約入力フォーム

以下は予約確認フォームの例です。

予約確認フォームの表示例

カスタマイズした予約確認フォーム

Config.php

デフォルトの入力項目以外に3つの追加項目について、入力項目のキー名を追加します。

public static $customerRequired = array(
    'sei' => true,
    'mei' => true,
    'sei_kana' => false,
    'mei_kana' => false,
    'email' => true,
    'mobile' => true,
    'transport_bus' => false,    // 交通手段
    'transport_train' => false,
    'transport_car' => false,
    'travel_time' => false,      // 移動時間
    'coupon' => false,
);

チェックボックスを利用する場合は、それぞれの項目に入力項目としてキー名を設定します。ラジオボタンやセレクトボックスでは1つになります。

TemplateCustomer.php

TemplateCustomerクラスに予約入力フォームの表示処理をする「frontendView()」、予約確認フォームの表示処理をする「confirmationView()」、管理画面で表示・編集処理をする「adminView()」、そしてコンストラクタ、並びに入力データのチェックやデータを書き換えるための各メソッドを追加します。

frontendView()

// 予約入力フォーム
public function frontendView($oCustomer)
{
    $this->error = $oCustomer->error;
?>
    <dl>
        <dt>姓(<span class="description mts-required">*</span>):</dt>
        <dd><input type="text" name="customer[sei]" value="<?php echo esc_html($oCustomer->sei) ?>">
            <?php $this->outItemError('sei') ?></dd>
        <dt>名(<span class="description mts-required">*</span>):</dt>
        <dd><input type="text" name="customer[mei]" value="<?php echo esc_html($oCustomer->mei) ?>">
            <?php $this->outItemError('mei') ?></dd>
        <dt>セイ:</dt>
        <dd><input type="text" name="customer[sei_kana]" value="<?php echo esc_html($oCustomer->sei_kana) ?>">
            <?php $this->outItemError('sei_kana') ?></dd>
        <dt>メイ:</dt>
        <dd><input type="text" name="customer[mei_kana]" value="<?php echo esc_html($oCustomer->mei_kana) ?>">
            <?php $this->outItemError('mei_kana') ?></dd>
        <dt>Eメール(<span class="description mts-required">*</span>):</dt>
        <dd><input type="text" name="customer[email]" value="<?php echo esc_html($oCustomer->email) ?>"><br>
            <input type="text" name="customer[email2]" value="<?php echo esc_html($oCustomer->email2) ?>">(確認用)
            <?php $this->outItemError('email'); $this->outItemError('email2'); ?></dd>
        <dt>携帯連絡先(<span class="description mts-required">*</span>):</dt>
        <dd><input type="text" name="customer[mobile]" value="<?php echo esc_html($oCustomer->mobile) ?>">
            <?php $this->outItemError('mobile') ?></dd>
        <dt>交通手段(<span class="description mts-required">*</span>):</dt>
        <dd>
            <div class="check-transport">
                <label><input type="checkbox" name="customer[transport_bus]" value="バス"<?php
                    echo $oCustomer->transport_bus == 'バス' ? ' checked="checked"' : '' ?>>バス</label>
            </div>
            <div class="check-transport">
                <label><input type="checkbox" name="customer[transport_train]" value="電車"<?php
                    echo $oCustomer->transport_train == '電車' ? ' checked="checked"' : '' ?>>電車</label>
            </div>
            <div class="check-transport">
                <label><input type="checkbox" name="customer[transport_car]" value="マイカー"<?php
                    echo $oCustomer->transport_car == 'マイカー' ? ' checked="checked"' : '' ?>>マイカー</label>
            </div>
            <?php $this->outItemError('transport_car') ?></dd>
        <dt>移動時間:</dt>
        <dd>
            <select name="customer[travel_time]">
                <option value="10"<?php echo $oCustomer->travel_time == 10 ? ' selected' : '' ?>>10</option>
                <option value="20"<?php echo $oCustomer->travel_time == 20 ? ' selected' : '' ?>>20</option>
                <option value="30"<?php echo $oCustomer->travel_time == 30 ? ' selected' : '' ?>>30</option>
                <option value="40"<?php echo $oCustomer->travel_time == 40 ? ' selected' : '' ?>>40</option>
                <option value="50"<?php echo $oCustomer->travel_time == 50 ? ' selected' : '' ?>>50</option>
                <option value="60"<?php echo $oCustomer->travel_time == 60 ? ' selected' : '' ?>>60</option>
            </select>分
            <?php $this->outItemError('travel_time') ?></dd>
        <dt>クーポンID(12345):</dt>
            <dd><input type="text" name="customer[coupon]" value="<?php echo esc_html($oCustomer->coupon) ?>">
                <?php if (isset($oCustomer->error['coupon'])) {
                    echo sprintf('<div class="mts-error">%s</div>', $oCustomer->error['coupon']);
            } ?></dd>
    </dl>

<?php
}

入力確認におけるエラーは「$oCustomer->error」に、キー項目の配列とエラーコードがセットされます。

confirmationView()

// 予約確認フォーム
public function confirmationView($oCustomer)
    {
?>
    <dl>
        <dt>姓:</dt>
        <dd><?php echo esc_html($oCustomer->sei) ?></dd>
        <dt>名:</dt>
        <dd><?php echo esc_html($oCustomer->mei) ?></dd>
        <dt>セイ:</dt>
        <dd><?php echo esc_html($oCustomer->sei_kana) ?></dd>
        <dt>メイ:</dt>
        <dd><?php echo esc_html($oCustomer->mei_kana) ?></dd>
        <dt>Eメール:</dt>
        <dd><?php echo esc_html($oCustomer->email) ?></dd>
        <dt>携帯連絡先:</dt>
        <dd><?php echo esc_html($oCustomer->mobile) ?></dd>
        <dt>交通手段:</dt>
        <dd><?php
            echo $oCustomer->transport_bus == 'バス' ? 'バス<br>' : '';
            echo $oCustomer->transport_train == '電車' ? '電車<br>' : '';
            echo $oCustomer->transport_car == 'マイカー' ? 'マイカー<br>' : ''; ?></dd>
        <dt>移動時間:</dt>
        <dd><?php echo esc_html($oCustomer->travel_time) ?></dd>
        <dt>クーポン:</dt>
        <dd><?php echo $this->varCoupon($oCustomer->coupon) ?></dd>
    </dl>

<?php
 }

adminView()

// 管理画面 予約入力・編集画面
public function adminView($oCustomer)
{
?>
    <div class="mtsbe-table-title">予約申込者</div>
    <table id="customer-entry-table" class="form-table mts-meta-table">
        <tr>
            <th><label for="customer-sei">名前<span class="description mts-required">(必須)</span></label></th>
            <td><label for="customer-sei" class="mts-small-label">姓</label><input id="customer-sei" class="mts-small" type="text" name="customer[sei]" value="<?php echo esc_html($oCustomer->sei) ?>">
                <label for="customer-mei" class="mts-small-label">名</label><input id="customer-mei" class="mts-small" type="text" name="customer[mei]" value="<?php echo esc_html($oCustomer->mei) ?>">
            </td>
        </tr>
        <tr>
            <th><label for="customer-sei-kana">フリガナ</label></th>
            <td>
                <label for="customer-sei-kana" class="mts-small-label">セイ</label><input id="customer-sei-kana" class="mts-small" type="text" name="customer[sei_kana]" value="<?php echo esc_html($oCustomer->sei_kana) ?>">
                <label for="customer-mei-kana" class="mts-small-label">メイ</label><input id="customer-mei-kana" class="mts-small" type="text" name="customer[mei_kana]" value="<?php echo esc_html($oCustomer->mei_kana) ?>">
           </td>
        </tr>
        <tr>
            <th><label for="customer-email">Eメール<span class="description mts-required">(必須)</span></label></th>
            <td>
                <input id="customer-email" type="text" class="mts-fat" name="customer[email]" value="<?php echo esc_html($oCustomer->email) ?>">
                <input type="hidden" name="customer[lang]" value="">
            </td>
        </tr>
        <tr>
            <th><label for="customer-mobile">携帯電話番号<span class="description mts-required">(必須)</span></label></th>
            <td>
                <input id="customer-mobile" type="text" class="mts-middle-small" name="customer[mobile]" value="<?php echo esc_html($oCustomer->mobile) ?>">
            </td>
        </tr>
        <tr>
            <th><label for="customer-transport_bus">移動手段</label></th>
            <td>
                <div class="check-transport">
                    <input type="hidden" name="customer[transport_bus]" value="">
                    <label><input id="customer-transport_bus" type="checkbox" name="customer[transport_bus]" value="バス"<?php
                        echo $oCustomer->transport_bus == 'バス' ? ' checked="checked"' : '' ?>>バス</label>
                </div>
                <div class="check-transport">
                    <input type="hidden" name="customer[transport_train]" value="">
                    <label><input type="checkbox" name="customer[transport_train]" value="電車"<?php
                        echo $oCustomer->transport_train == '電車' ? ' checked="checked"' : '' ?>>電車</label>
                </div>
                <div class="check-transport">
                    <input type="hidden" name="customer[transport_car]" value="">
                    <label><input type="checkbox" name="customer[transport_car]" value="マイカー"<?php
                        echo $oCustomer->transport_car == 'マイカー' ? ' checked="checked"' : '' ?>>マイカー</label>
                </div>
            </td>
        </tr>
        <tr>
            <th><label for="customer-travel-time">移動時間</label></th>
            <td>
                <select id="customer-trabel-tiem" name="customer[travel_time]">
                    <option value="10"<?php echo $oCustomer->travel_time == 10 ? ' selected' : '' ?>>10</option>
                    <option value="20"<?php echo $oCustomer->travel_time == 20 ? ' selected' : '' ?>>20</option>
                    <option value="30"<?php echo $oCustomer->travel_time == 30 ? ' selected' : '' ?>>30</option>
                    <option value="40"<?php echo $oCustomer->travel_time == 40 ? ' selected' : '' ?>>40</option>
                    <option value="50"<?php echo $oCustomer->travel_time == 50 ? ' selected' : '' ?>>50</option>
                    <option value="60"<?php echo $oCustomer->travel_time == 60 ? ' selected' : '' ?>>60</option>
                </select>分
            </td>
        </tr>
        <tr>
            <th><label for="customer-coupon">クーポン</label></th>
            <td>
                <input id="customer-coupon" type="text" class="mts-middle-small" name="customer[coupon]" value="<?php echo esc_html($oCustomer->coupon) ?>">
            </td>
        </tr>
    </table>

<?php
 }

入力データのチェック、メール変数の書き換え

これらは入力されたデータを処理する流れの中で、必要に応じて呼び出されます。独自の処理を用意する場合、WordPressのフィルター機能を利用して予めコンストラクタの中で所定のフィルター名を利用してメソッドを登録しておきます。

例はフィルター関数を登録するコンストラクタ、クーポンコードの入力チェックするメソッド、及び予約確認フォーム、メールへ表示するデータの変換メソッドになります。

クラス定義とコンストラクタ

class TemplateCustomer extends CustomerView
{
    private $lang;

    public function __construct($lang='')
    {
         parent::__construct();
         $this->lang = $lang;

        // 入力データバリデーション追加処理
        add_filter('mtsbe-customer-validation', array($this, 'validation'));

        // メールの変数書き換え
        add_filter('mts-customer-variable-coupon', array($this, 'varCoupon'));
    }

    // 以下各メソッド を組み込んで下さい。
}

validation()

// 入力データのチェック、確認用
public function validation($oCustomer)
{
    // 全角半角変換
    $oCustomer->coupon = trim(mb_convert_kana($oCustomer->coupon, 'as'));

    // クーポンコードの入力チェック
    if (!preg_match('/^[0-9]*$/', $oCustomer->coupon)) {
        $oCustomer->setError('coupon', '半角数字を入力して下さい。');
    }

    return;
}

varCoupon()

// メールに埋込む変数の書き換え
public function varCoupon($val)
{
    if ($val == '12345') {
        return '適用されます。';
    }

    return '適用されません。';
}

(160426)