投稿者「管理者」のアーカイブ

1.8 車両の検索、表示機能の強化

Ver.1.8においてショートコード車両の検索「rental_finder」、および、車両の一覧を表示する「rental_box」と「rental_calendar」を機能強化し、多彩な検索結果を表示できるようになりました。次の図はその表示例です。

表示形式の指定

検索結果を表示する形式は「rentala_finder」のパラメータ「show」へ、表示用のショートコード(rental_box または rental_calendar)を指定します。rental_boxを利用する場合は、さらに表示タイプ(tno)を指定します。

  • カレンダー表示
    検索車両の予約状況をカレンダーで表示します。「1.7 車両の検索・表示機能」ページ下部にある図の出力になります。
    showの設定値(未設定の場合はデフォルト):rental_calendar
  • 詳細一覧表示
    検索車両の画像と詳細情報を組み合わせて表示します。「rental_box その1 車両情報編」にある図の出力になります。
    showの設定値:rental_box
    tnoの設定値(未設定の場合はデフォルト):0
  • 料金表表示
    検索車両の画像と料金設定を組み合わせて表示します。「rental_box その2 料金編」にある図の出力になります。
    showの設定値:rental_box
    tnoの設定値:1
  • フリースタイル
    独自に設定したHTMLとCSSで表示します。例えばこのページの上部のような一覧表示や、車両について詳細を掲載した一覧表示も可能です。
    showの設定値:rental_box
    tnoの設定値:2
    車両データ:紹介項目にテンプレートページを設定

フリースタイルの設定例

ここでは、検索結果を上図のような一覧表示するための設定例を説明します。

自由に表示するためには、以下の作業が必要になります。

  1. テンプレートの設定
    固定ページに入力、下書き保存で登録しておきます。
  2. 使用するテンプレートを設定
    車両データの「車両紹介」項目でテンプレートページを設定します。
  3. rental_finderのパラメータの指定
    rental_finderに所定のパラメータを設定します。
  4. その他
    CSSを利用する場合はスタイルシートに追加編集をしておきます。ここの設定例ではHTMLに直接指定しています。

1.テンプレートの設定と車両データの設定

テンプレートを固定ページに入力して下書き保存し、車両データの紹介でそのページを設定します。下書き保存するのは、公開登録することでテンプレートページが表示されないようにするためです。

固定ページでのテンプレート設定の例です。

車両データの車両紹介のテンプレート設定例です。

検索対象となる車両データの車両紹介は、すべてテンプレートページを設定してください。

2.rental_finderのパラメータ設定

以下は、検索ページにショートコードを設定した入力例です。

[rental_finder show="rental_box" tno="2" name="0" link="0"]

パラメータの「name」は車両の名称タイトルを非表示にする設定、「link」は予約ページのリンクを非表示にする設定です。

「name」や「link」パラメータを設定しない場合を試し、表示を比較するとよいでしょう。

フリースタイルを自在に扱うために

リプレースメントや詳細情報設定など、必要となる機能の解説は以下のページを参照してください。

テンプレートで使用可能なリプレースメント(%で囲った変数名)
rental_boxのリプレースメント

車両の詳細情報の独自編集
▶ 後日公開予定

1.8 予約フォーム連絡・問合せ項目追加

Ver.1.8において、予約者からの問合せを受けるための入力項目を、予約フォームの最後に追加できるようにしました。

利用は「各種設定」で指定します

予約フォームで問合せ項目は、各種設定の「予約フォーム」タブの最初に設定項目が用意されました。

入力文字数と出力の整形について

問合せ項目に入力されたデータがサーバーに送信されたとき、1200文字まで受信しますがそれ以上は足切りします。文字数は半角全角に係わらず1文字としてカウントします。

入力項目はtextareaタグを利用しています。

入力データは上記のように、読点まで改行されない場合があります。

確認画面や予約メールで内容を出力するとき、特にメール文を表示する場合、メーラーは画面サイズに合わせて表示が伸縮するため、判読しにくいことがあります。そこで本システムでは横幅を1行80文字として自動で改行を挿入し、出力します。

この操作の文字幅ですが、半角は1,全角は2として計算します。

受信文字数、表示文字幅の変更

プラグインの「src/MTSCarBooking」ディレクトリに、環境設定ファイル「Config.php」ファイルがあります。

このプログラムファイルの中で「予約フォーム連絡問合せ」とコメントされた下に、配列変数「$noteStyle」があります。

プログラムはこのデータを参照し、入力最大文字数は「max」、1行表示文字幅は「width」とインデックスした値がそれぞれ対応します。

なおプログラムを修正した場合の不具合について、こちらでの対応は作業時間の関係でできませんので、留意して作業を進めてください。

1.7 車両の検索・表示機能

サイトへ訪れた利用者が、利用日付を入力して空き車両を検索、結果から車両を選択して予約フォームへ移動する、という操作の流れを提供します。

利用方法は、ショートコード「rental_finder」をページのコンテンツに設定することで簡単に実現できます。またテキストウィジェットに設定すると、サイドバーなどに設置されたウィジェットに検索ボックスを表示することができます。

出発日・返却日の入力は、jQuery UIのDatepickerを使って表示されたカレンダーから日付を選択します。車両が複数台ある場合は車種を選択して検索する事もできます。

次に、ショートコードのパラメータ、ウィジェットの利用方法を説明します。

ショートコード rental_finder

車両の検索ページは、ショートコードを設定するとそのページで検索ボックスの表示・入力処理、そして検索結果を表示するようになります。

[rental_finder]

ショートコードに追加できるパラメータは次の通りです。

  • vid
    検索対象の車両を限定したい場合、対象の車両IDをカンマ区切りで指定
    初期値:なし
  • gid
    検索対象を車種で限定したい場合、対象の車種のtag_IDまたはスラッグ名を指定
    初期値:なし
  • id
    コンテンツに出力するHTMLのラッパーdivセグメントにセットするidプロパティ
    初期値:なし
  • class
    コンテンツに出力するHTMLのラッパーdivセグメントにセットするclassプロパティ
    初期値:rental-finder
  • widget
    ウィジェットに設定した際「1」にセットするとclass名に「-widget」を追加
    初期値:0
  • page
    検索結果を出力する対象ページのURLで、[rental_finder] が設定されたページ
    初期値:なし
  • finder
    「-1」にセットすると検索入力を非表示にする、「0」にセットすると検索結果を出力するとき検索入力を非表示とする
    初期値:1
  • result
    ウィジェットに設定した際「0」を設定すると検索結果を出力しない
    初期値:1
  • show
    検索結果の表示形式をショートコードの中から指定する
    初期値:rental_calendar
    Ver.1.8 機能追加
  • term
    車種の選択ボックスを表示しない場合は「0」をセットする
    初期値:1
  • description
    検索ボックス上部に表示する説明文のキー名
    初期値:FINDER_DATE_DESCRIPTION
  • lang
    出力文字言語を指定
    初期値:なし

表示デザインについて

操作に必要な、ある程度のCSS設定は「rental-finder.css」ファイルで提供していますが、テーマに合わせてデザインを変更したい場合は当該ファイルを修正するか、テーマで利用する「style.css」ファイルに追加してください。

アップデートではプラグインディレクトリを上書きするため、ラッパーのdivセグメントに「id」や「class」パラメータを設定してstyle.cssファイルにCSSを追加しておくと、再設定の手間が省けます。

ウィジェットに検索ボックスを設定する

テキストウィジェットにショートコードを設定すると、ウィジェットに検索ボックスや検索結果を表示することができるようになります。

検索結果をページのコンテンツに表示したい場合、このショートコードを設定した固定ページを別途用意し、そのページに表示することができるようになります。

ウィジェットを利用する手順

予め、ショートコード「[rental_finder]」を設定した固定ページを公開登録しておきます。このページを表示するURLを確認しておいてください。以下は固定ページに設定するショートコードの例です。

[rental_finder finder="0"]

テキストウィジェットにショートコード「[rental_finder]」を設定し、ウィジェット領域に設置します。以下はテキストウィジェットに設定するショートコードの例です。

[rental_finder page="http://www.example.com/?p=xxx" widget="1" result="0"]

pageに設定するURLは、予め用意した上記固定ページを表示するURLです。

ショートコードタグに囲われた文について

ショートコードのタグに挟まれた文章、例えば

[rental_finder finder="-1" result="0"]レンタル期間を入力して検索してください。[/rental_finder]

のように設定すると、検索の入力項目は非表示の状態となり、代わりにタグに挟まれた文章が出力されます。

車種について

車両データとオプションデータは、それぞれカテゴリーが設定できるように「車種」を共通で登録、各データに設定ができるようになっています。

検索で車種を選択できるようにする場合、「車種」データから車両のために設定したカテゴリーをリストアップするため、車種のスラッグ名の前部に「car_」を追加するか、スラッグ名の後尾に「_car」を追加してください。

jQuery UI のthemeについて

日付入力は入力の手間や誤りを避けるため、カレンダーから日付をクリックして入力、表示するようにしています。この機能はjQuery UIで提供される機能「Datepicker」を利用しています。

jQuery UIでは表示デザインのテーマが提供されていますが、テーマ「smoothness」をjQueryサイトから読み込むように、プログラム内で設定しています。

このテーマ名を書き換えることで、見た目の異なるカレンダーを表示することができます。

利用する場合はPHPプログラムを編集するため、作業はPHP技術者の方を対象としています。

検索結果の表示

検索結果の表示は、ショートコード「rental_calendar」に検索結果を渡して表示しますので、予約状況を含めた予約カレンダーが表示されます。次の図は検索結果の表示例です。

1.6 貸出マージン(貸与休止)日の設定

予約を受け付けると予約期間は予約済みとなり、システムは重複して予約を受け付けないようになります。予約カレンダーでは予約済みマークが表示され、その期間を含む予約はできません。

この貸出期間において、次の予約を受け付ける場合に「なか1日」のマージンを設けたい場合、各種設定の予約条件で「貸与休止日数」を設定します。

この「貸与休止日数」を「1日」に設定すると、予約カレンダーは予約期間の前後に1日のマージンを設定、予約済み状態を表示するようになり、貸し出しされなくなります。

1.5 シーズン料金計算改善

シーズン料金は、スケジュール管理のカレンダーの日付に「High / Low」を設定し、レンタル期間によりレンタル料金を割り増ししたり、あるいは値引する機能として、Ver.1.1で機能追加しました。

» 1.1 割増(値引)料金機能

ところで料金計算の元になるレンタル期間ですが、それまでレンタル期間を時間総数で計算し、料金計算はレンタル時間で求めておりました。

例えばレンタル料金を1日10,000円、2日20,000とした場合、レンタル期間が11時〜翌日10時であれば、料金は時間総数で計算すると23時間10,000円となります。

このようなレンタルを2日の料金とするため、Ver.1.3で料金計算方式として「時間」か「日付」で計算する選択機能を追加しました。これにより計算方式が「日付」で設定されていれば、上の例は2日20,000円となります。

» 1.3 料金計算の方式追加

シーズン料金の計算の仕方

レンタル期間中のシーズン設定により、料金を割り増したり、割引したりすることができます。

例えば週末の土曜日と日曜日に割増料金を設定するため、スケジュールカレンダーで「High」を設定し、料金データのHighシーズンに5,000円を設定したとします。

この場合上記の例では2日間を土曜日、日曜日とすると、2日で30,000円となります。しかし、もし計算方式が時間なら20,000円です。

このように金額が大きく跳ね上がる例があるため、シーズン料金の計算は計算方式が「日付」の場合、返却日のシーズン料金を加算しないようにしました。

シーズン料金計算の改善

しかしながら、0時を過ぎて日付が変わる場合は常に割増し(または割引き)したい場合もあります。

そこでVer.1.5において、シーズン料金の計算で当日に返却する場合を除き、最終日のシーズン料金を計算するか、それとも最終日のシーズン料金は除くか、「料金加算日」の設定で選択できるようにしました。

料金計算がより柔軟に計算できるようになりましたので、レンタル業務にご活用ください。

その他の追加機能

予約フォームや予約の確認表示で、車両データの登録で画像が選択されている場合その画像が表示されます。

一方、オプションデータに画像の設定項目がありますが、これまではデータ登録のみで画像の表示機能はありませんでした。

Ver.1.5から予約フォームや予約の確認において、オプションデータに設定された画像が表示されるようになりました。

なお画像の登録は2つ設定できますが、表示は1つめの項目に登録された画像が表示されます。

特別料金期間のシーズン料金計算の設定 Ver.1.7.3

Ver.1.7.3より前のバージョンにおいてシーズ料金の計算は、特別料金期間中は別途料金を定めるため除外していました。

Ver.1.7.3以降は、料金表管理の設定で、シーズン料金を合計計算に含める設定を用意しました(下図参照)。

(210722)