数値の範囲をselectで選択
数値で条件を指定する際に、selectで範囲を選べるようにしたいこともよくあります。
今回はその方法を解説します。
以下のような事例を基に解説します。
- 商品の価格を表すために、「entry_price」というベースネームのカスタムフィールドを作っているものとします。
- 検索結果表示用のテンプレートモジュールには、「詳細検索結果」という名前を付けるものとします。
- 以下の表のように、selectで価格帯の選択肢を選べるようにします。
番号 | 下限(OO円以上) | 上限(OO円未満) |
1 | なし | 1,000 |
2 | 1,000 | 3,000 |
3 | 3,000 | 5,000 |
4 | 5,000 | 7,000 |
5 | 7,000 | 10,000 |
6 | 10,000 | なし |
範囲と送信値のリストの定義
selectで数値の範囲を選べるようにしたい場合、まず数値の範囲と、それぞれに対応してCGIに送信する値のリストを定義します。
この定義は、GetQueryParamプラグインの「MTSetRangeList」というタグで行います。
1.MTSetRangeListタグの書き方
MTSetRangeListタグの書き方は、以下のようになります。
「リスト名」のところで、範囲のリストに名前を付けます。
なお、下限または上限だけを指定する場合は、その部分を省略します。
<mt:SetRangeList list_name="リスト名">
送信値1,下限1,上限1
送信値2,下限2,上限2
・・・
送信値n,下限n,上限n
</mt:SetRangeList>
2.MTSetRangeListタグの例
例えば、今取り上げている例で、1番~6番の選択肢のそれぞれについて、フォームからCGIに送信する値を「range01」~「range06」にするとします。
また、この範囲のリストに「range」という名前を付けるとします。
この場合のMTSetRangeListタグの書き方は、以下のようになります。
1番の範囲には下限がないので、「range01,,1000」として、下限を指定していません。
また、6番の範囲には上限がないので、「range06,10000,」として、上限を指定していません。
<mt:SetRangeList list_name="range">
range01,,1000
range02,1000,3000
range03,3000,5000
range04,5000,7000
range05,7000,10000
range06,10000,
</mt:SetRangeList>
なお、MTSetRangeListタグの部分は、検索フォームのテンプレートと、検索結果表示テンプレートの両方で使います。
そこで、MTSetRangeListタグの部分をテンプレートモジュールにしておいて、検索フォーム/検索結果表示の両テンプレートに組み込めるようにすることをお勧めします。
検索フォームにselectを出力
次に、1.で定義したリストを使って、フォームに送信する値と範囲の上限/下限を取り出し、それらを元にして検索フォームにselectを出力します。
1.MTGetRangeListタグ
リストから送信値/下限/上限を取り出すには、GetQueryParamプラグインの「MTGetRangeList」というテンプレートタグを使います。
<mt:GetRangeList list_name="リスト名">
個々の送信値と上限/下限を出力する処理
</mt:GetRangeList>
MTGetRangeListタグのブロックの中では、以下の各変数を使って、フォームから送信する値と、それぞれに対応する下限/上限の値を得ることができます。
なお、変数名に含まれる「__」は半角のアンダースコア2つです。
出力値 | 変数名 |
フォームからの送信値 | __value__ |
下限 | __min__ |
上限 | __max__ |
2.検索フォームの例
MTGetRangeListタグを使って、検索フォームのテンプレートに冒頭の画面のようなselectを出力するには、以下のようにタグを組みます。
なお、範囲のリストを定義する部分(MTSetRangeListタグのブロック)を、「数値範囲」というテンプレートモジュールに入れたものとします。
<form method="get" action="<$mt:RealtimeRebuildCGIPath$>">
<input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
<input type="hidden" name="tmpl_id" value="<$mt:GetTemplateID tmpl_name="詳細検索結果"$>" />
<p>
<$mt:Include module="数値範囲"$>
<label for="entry_price_range">価格</label>
<select id="entry_price_range" name="entry_price_range">
<mt:GetRangeList list_name="range">
<option value="<$mt:GetVar name="__value__"$>">
<mt:If name="__min__">
<$mt:GetVar name="__min__"$>円以上
</mt:If>
~
<mt:If name="__max__">
<$mt:GetVar name="__max__"$>円未満
</mt:If>
</option>
</mt:GetRangeList>
</select>
</p>
<p>
<input type="submit" value="送信" />
</p>
</form>
まず、4行目のMTIncludeタグで、「数値範囲」のテンプレートモジュールを読み込み、範囲のリストを定義します。
そして、7~17行目のMTGetRangeListタグのブロックで、範囲のリストから送信値/下限/上限を1組ずつ順に取り出し、select内の個々のoption用を順に出力します。
9行目では、「<option value="○○">」のタグを出力しています。
「○○」の部分を「<$mt:GetVar name="__value__"$>」にしていますので、value属性には、フォームから送信する値(「range01」など)が出力されます。
10~17行目では、option要素の中身を出力しています。
11行目の「<$mt:GetVar name="__min__"$>円以上」と、15行目の「<$mt:GetVar name="__max__"$>円未満」によって、範囲の下限と上限を元に「1000円以上」「3000円未満」等が出力されます。
「範囲と送信値のリストの定義」の部分で定義したリストでは、下限/上限がない範囲もあります。
それらがない場合(=変数__min__や__max__の値がない場合)は、「○○円以上」や「○○円未満」を出力しないようにします。
そのために、10/12行目や14/16行目にMTIfタグを入れています。
検索結果表示テンプレートの作成
検索結果表示テンプレートでは、フォームから送信された値から、数値の範囲の下限/上限を割り出して、MTSearchConditionCompare等のタグで条件を指定するようにします。
1.MTGetRangeFromValueタグ
送信値を元に、それに対応する上限/下限を読み込むには、GetQueryParamプラグインの「MTGetRangeFromValue」というテンプレートタグを使います。
<mt:GetRangeFromValue list_name="リスト名" value="送信値">
下限/上限を使った処理
</mt:GetRangeFromValue>
「リスト名」に、範囲のリストの名前を指定します。
また、「送信値」には、フォームから送信された値(MTSetRangeタグで、個々の範囲の送信値として指定した値)を入れます。
MTGetRangeFromValueタグのブロックの中では、以下の変数を使って範囲の下限/上限を扱うことができます。
扱う値 | 変数名 |
下限 | __min__ |
上限 | __max__ |
例えば、「範囲と送信値のリストの定義」の部分で挙げた例のように、「range」という名前のリストを定義したとします。
そして、以下のようにテンプレートを組むとします。
<mt:GetRangeFromValue list_name="range" value="range03">
下限/上限を使った処理
</mt:GetRangeFromValue>
この場合、「range」リストの中で、送信値の「range03」に対応する下限/上限の3000/5000が取り出されます。
そして、MTGetRangeFromValueタグのブロックの中では、変数__min__と__max__の値が、それぞれ3000/5000になります。
2.検索結果表示テンプレートの例
ここまでの話に基づいて、2.の検索フォームに対応する検索結果表示テンプレートを作ります。
検索結果表示テンプレートの中で、検索結果を読み込む部分を抜き出すと、以下のようになります。
<$mt:GetQueryParamsToVars$>
<$mt:Include module="数値範囲"$>
<mt:SearchConditions>
<mt:SearchConditionCFSection field="entry_price">
<mt:GetRangeFromValue list_name="range" value="$qp_entry_price_range">
<$mt:SearchConditionCFCompare ge="$__min__" lt="$__max__"$>
</mt:GetRangeFromValue>
</mt:SearchConditionCFSection>
</mt:SearchConditions>
まず、1行目のMTGetQueryParamsToVarsタグで、フォームから送信された値を変数に代入します。
フォームでは、範囲選択のselectに「entry_price_range」というname属性を指定していましたので、そのselectで選ばれた範囲の名前(「range01」等)は、変数qp_entry_price_rangeに代入されます。
次の2行目では、範囲のリストを読み込むために、MTIncludeタグで「数値範囲」のテンプレートモジュールを組み込みます。
4~8行目で、「entry_price」のカスタムフィールドに対して条件を設定しています。
5行目のMTGetRangeFromValueタグで、「range」リストの中から、selectで選択された範囲(変数qp_entry_price_rangeの値)に対応する下限/上限を読み込みます。
そして、その下限/上限(変数__min__/__max__の値)を、MTSearchConditionCFCompareタグに指定しています。