イベントカレンダークリックで申し込みフォームに遷移→日付時間をフィールドにセット

2021年7月13日

WordPressのイベントカレンダープラグイン「Event Organiser」が便利だなあと思い、
最近「Event Organiser カレンダーのパーマリンクを変更する方法３つ」という記事を書きました。
この記事でカレンダー内のパーマリンクを変更する方法を書いたのですが、今回はさらにそれを応用したものとなります。

今回のミッションは

「イベントカレンダークリックで申し込みフォームに遷移し、クリックした日付と時間をフォームの「日付」「時間」のフィールドにセットする」

です。
要するに、カレンダーをクリックしたら、その日付がセットされててお申し込みしやすくなっているのです。

予約フォームは、お問い合わせフォームでいつもお世話になっている「MW WP Form」プラグインで作りました。
URLパラメータでセットしたいデータを持ってきて、フィールドにセットします。

今回、日付はdatepickerというJSプラグインを使用したものが用いられており、セットするにはdatepickerのメソッドを使うこととなりました。
時間は<select>タグだったので、「MW WP Form」の機能を用いてセットすることができます。

ちなみに、今回作る申し込みフォームは予約フォームとは違います。ブッキングさせたい場合は予約システムのプラグインを使う必要がありますので、ご了承ください。

カレンダーのリンク先URLを変更する

下記記事に書いた通り、カレンダーのリンクはフィルターフックを使って変更することができます。

Event Organiser カレンダーのパーマリンクを変更する方法３つ

// カレンダーのリンク先を指定
add_filter('eventorganiser_calendar_event_link', function ($link) {
  $arr = explode('/', $link);
  if (end($arr) === '') {
    array_pop($arr);
  }
  $slug = end($arr);
  $post = get_page_by_path($slug, 'OBJECT', 'event');

  $startDate = eo_get_the_start('Y年m月d日', $post->ID);
  $startTime = eo_get_the_start('H:i', $post->ID);
  $permalink = 'contact/?'.urlencode('希望日').'=' . urlencode($startDate) . '&'.urlencode('希望時間').'=' . urlencode($startTime);
  return $permalink;
});

「パーマリンク設定」は、「基本」「数字ベース」以外にしておいてください。URL末尾にスラッグが使用されるものであることが前提です。

本来のパーマリンクを取得し、スラッグを取得します。
スラッグからpostデータ（$post）を取得し、postデータからイベント開始日を取得します。

このフィルターフックを書いた後、パーマリンクを更新してください。（設定のパーマリンク設定からそのまま「更新」ボタンを押すだけ）

Event Organiserで、開始日を取得する

$postが取得できれば、実はこれだけの情報が取得できます。

["event_id"]
["occurrence_id"]
["StartDate"]
["StartTime"]
["EndDate"]
["FinishTime"]
["event_occurrence"]

いずれも「$post -> StartDate」などで取得できます
…が、開始時間は文字列型で「"17:30:00"」のような形になっています。秒までいらないし、フォームにセットするときに少し微妙です。

Event Organiserが用意している関数[eo_get_the_start]を使えば、もう少し柔軟に取得できます。

eo_get_the_start( $format, $post_id, $occurrence_id, $deprecated )

取得するときにフォーマットを指定することができ、

eo_get_the_start('Y年m月d日', $post->ID);

とすれば「2021年07月30日」など、任意の形で取得することができます。

ちなみに、Event OrganiserのFunctionsは[eo_get_the_start]以外にもたくさんありますが、
何かやりたかったら、Event Organiser Codex からそれっぽい名前のFunctionsを探して読んでみる…という方法しか今の所ないかもしれません。

なんにせよ、探せばいろいろありそうだなあ…という印象ではあります。

開始日と同じく、開始時間もフォーマットを'H:i'にすれば取得できます。
これらを使って、パーマリンクのパラメータに仕込みます。

/contact?希望日=2021年08月31日&希望時間=17%3A30

申し込みフォーム側の設定

「MW WP Form」の基本的な使い方は省略しますが、開始日と開始時間のところは下記のような感じになっています。

開始日（希望日）
[mwform_text name="希望日" class="datepicker js-setday"]
※datepickerはDatepickerというカレンダーJSを使うためのクラス（あらかじめ読み込んでいます）、js-setdayはこのあとパラメータをセットするためのクラス（後述）です。
開始時間（希望時間）
[mwform_select name="希望時間" children="時間を選択してください,10::00,10::30,11::00,11::30,12::00,12::30,13::00,13::30,14::00,14::30,15::00,15::30,16::00,16::30,17::00,17::30,18::00,18::30,19::00"]
※半角コロンを文字列として使いたい場合は::と入力します。

「MW WP Form」の「URL引数を有効にする」にチェックを入れておきます。これでURLパラメータが有効になります。

開始時間をフィールドへセット

my_mwform_valueを使って、パラメータから任意のvalueをセットする機能が「MW WP Form」に用意されており、
開始時間は、functions.phpに下記のようにフィルターフックを書くことでセットできます。
「mwform_value_mw-wp-form-100」の100のところは、「MW WP Form」のフォーム識別子のkeyを入れます。

// お問い合わせパラメータ引き継ぎ
function my_mwform_value($value, $name) {
  // パラメータ「希望時間」引き継ぎ
  if($name === '希望時間' && !empty($_GET['希望時間']) && !is_array($_GET['希望時間'])){
    $time = $_GET['希望時間'];
    return $time;
  }
}
add_filter('mwform_value_mw-wp-form-100', 'my_mwform_value', 10, 2);

最初、valueをセットするものだけできるのかと思っていたので、selectタグだと無理かな…と思いましたが、
やってみたらいけました。

開始日をフィールドへセット(datepicker使用)

Datepickerは、初期値をセットする方法に一癖あります。valueに入れても反映されません。
setDateを使うと初期値を設定できるようです。

$('.datepicker').datepicker({
  dateFormat: 'yy年mm月dd日'
});
function getKibouDay(){
  param = param.replace('?','');
  const arr = param.split('&');
  const kibouStr = arr.find(e => {
    const num = e.indexOf('=');
    const res = e.slice(0,num);
    return res === '希望日';
  })
  const str = kibouStr.slice(kibouStr.lastIndexOf('=') + 1)
  return str;
}
let param = decodeURI(location.search);
if(param){
  // is-setdayクラスのついてるdatepickerにパラメータの日付をセットする
  $(".datepicker.js-setday").datepicker("setDate", getKibouDay());
}

ちなみに、オプションで過去を選べないようにしている場合は、テスト時にうっかり過去日付を選ばないようにしましょう。
こんなことでハマるのは私だけかと思いますが…。

「戻る」後のdatepickerのデータが消える

ちなみに、datepickerを使っている場合、「MW WP Form」の「戻る」ボタンで戻ったときに、設定した値が消えてしまうという現象がおきました。

いろいろ調査した末に解決できなかったのですが、ブラウザの「戻る」で戻ったら消えずに残っていました。
確認画面をなくす、あるいは確認画面から戻る場合はブラウザバックで戻るよう誘導する必要があるかもしれません。

まとめ

「Event Organiser」も「MW WP Form」も、カスタマイズ性に優れていて非常に使いやすいプラグインです。
今後もおせわになります。

Blog