絞り込み検索（検索フォーム）-SIRIUS2

 

商品やサービスを事前に登録しておき、価格や評価などで絞り込みながらの検索ができるのが絞り込み検索機能です。

 

有名どころのショッピングサイトでは当たり前のように搭載されてる高度な検索機能、その検索機能がSIRIUS2で標準搭載されるようになりました。

 

SIRIUS2の「絞り込み検索」機能はとても強力で便利なツールではあるんですが、設定項目がとにかく細かいです。

本家のマニュアルページも他のどのツールよりもページ数を割いてます。

 

それゆえマニュアルサイトで使い方を覚えようとしたらページを行ったり来たりしながらの作業になってくるわけで、そのせいで（といったら語弊がありますが）どこを見れば希望通りの設定に変えられるのかがすぐには覚えきれません。

（筆者だけの問題かww）

 

そこで「絞り込み検索」機能に関しては実際のサンプルをお見せしながらどの項目がどの設定をいじればいいのかという”逆引きバージョン風”でご説明してみようかと思います。

 

本家マニュアルと併せてご覧ください。

絞り込み検索は選択肢を絞り込む検索フォーム（ページ）とその検索結果を表示する検索結果（ページ）の2つから構成されてます。

 

まずは『検索フォーム』からご説明していきます。

 

今回サンプルとして用意したのがこちらの絞り込み検索フォーム。

標準搭載のカスタマイズ機能だけで作成したものです。

 

”どんな内容（項目）で検索させるか”を表す［検索項目］（②＋③）は全部で10個まで設定可能。

 

サンプルでは［検索項目］とは別に用意されてる①「カテゴリー」という項目も含めているので見た目上は11個になってます。

 

また②内9個の項目は［検索項目］の中でも『基本検索』という分類に振り分けてあり、③は『詳細検索』という分類に振り分けてます。

（必ずしも分ける必要はありません）

 

検索項目の設定

早速この検索フォーム用の設定画面を見ていきます。

（検索結果の画面については別ページでご紹介します）

 

まずはリボンバーの【コンテンツ】→【絞り込み検索】をクリックし、絞り込み検索設定用の基本画面を開きます。

 

最初にやる作業は”どういった内容の検索項目にするか”。

これが［検索項目］になります。

 

上の基本設定画面赤枠内の『1.検索項目の設定』をクリックすると下のような設定画面が出てきます。

 

検索フォームの表示設定

［検索項目］の設定が済んだら、次は実際の検索フォーム上での検索項目の表示方法の設定に進みます。

 

【2.検索フォームの設定】をクリックすると『検索フォームの構成』タブが選択された状態で表示方法の設定画面が開きます。

 

 

『新規追加』をクリックすると（下の画像）「カテゴリー」「フリー検索」に加えて検索項目で設定した項目が登録対象候補として表示されます。

 

この中から実際の検索フォームに表示させたい項目を登録していきます。

（一時的に非表示にすることもできるので全部登録しちゃって問題ないです）

 

 

とりあえずここでは先の画像赤枠の「水の種類（※水宅配型）」という検索項目をクリックして『基本検索』画面内に取り込んでみます。

（「カテゴリー」と「フリー検索」は特殊なのであとでご説明します）

 

 

続いて取り込んだ項目をクリック→『編集』をクリックすると編集画面が開きます。

（※ここでは都合上”自動”のチェックは外した状態でお見せします）

 

カテゴリー・フリー検索

（最大）10個の検索項目の他に「カテゴリー」と「フリー検索」というのもあります。

 

カテゴリー

「カテゴリー」とはなってますが、必ずしも”カテゴリー分け”に特化した検索項目というわけでもないようです。

というのも編集画面上で項目名を変えられるからです。

 

そのため10個の検索項目以外にもう一つ検索項目を疑似的に増やすことも可能です。

 

フリー検索

こちらも項目名の変更が可能。

 

機能としてはこれまでご紹介してきたような予め用意された選択肢を指定するのではなく、利用者が好きなワードで検索できる検索項目になります。

 

基本検索と詳細検索

検索フォーム上での検索項目の表示方法には大きく分けて2種類あります。

それが「基本検索」と「詳細検索」。

 

前者は『基本検索の構成』内に取り込んだ検索項目が、後者は『詳細検索の構成』内に取り込んだ検索項目が表示されます。

 

「基本検索」に登録した検索項目は最初から常に表示されます。

一方「詳細検索」内の検索項目は”最初から表示”と”必要に応じて表示”の2パターンが選択できます。

 

その「詳細検索」ですが、【2.検索フォームの設定】→【検索フォームのデザイン設定】タブをクリック→『詳細検索の設定』→『初期表示』で表示方法を指定できます。

 

ちなみに上のサンプルは「全て表示する」設定でのレイアウトになります。

 

この設定だと「詳細検索」内の検索項目は最初から表示され、右下に「◯◯を非表示にする」というテキストが表示されます。

このテキストをクリックすると「詳細検索」項目はすべて非表示になります。

 

今度は『初期設定』で「詳細検索を隠す」に設定してみます。

すると今度は「詳細検索」内の項目は最初から非表示になり、「◯◯を表示する」というテキストだけが表示された状態になります。

テキストをクリックすれば「詳細検索」の検索項目が表示されます。

 

「基本検索」と「詳細検索」のそれぞれの項目の移動・順番入れ替えは中央の4つの矢印で即座に変更可能です。

 

検索フォームのレイアウト

検索フォームのレイアウトデザインはある程度カスタマイズできます。

各種調整は【2.検索フォームの設定】→【検索フォームのデザイン設定】画面から行えます。

 

『検索フォームのデザイン設定』の各項目とサンプル表示との連携図がこちら。

ここでは検索ボタンをクリックしたあとに検索結果ページに表示される実際の商品やサービスなどのデータの格納方法についてご説明します。

 

［検索アイテム］を追加するには①『検索アイテム』タブ→②『アイテム追加』をクリックします。

すると下のような③入力画面が開くので順次入力していきます。

 

商品やサービスごとに各［検索アイテム］を順次作成していくと下のサンプル画面のようになります。

 

入力済みの［検索アイテム］を修正するには、修正したい項目を選択（クリック）してから上の画像赤枠内の『アイテムの編集』をクリックします。

 

イメージがつかみやすいよう検索結果画面との連動も先にお見せします。

 

基本設定

【基本設定】タブが検索結果で表示される商品やサービスのメインの表示内容になります。

 

検索項目

個人的には絞り込み検索でちゃんと理解するまでに一番時間がかかったのがこの【検索項目】でした。

 

すでに入力済みの画面でご説明します。

検索項目の選択肢の指定には「自動選択」と「手動で指定」の2種類あります。

 

自動選択

「自動選択」にした場合、検索アイテムに入力した選択肢が自動で表示されます。

（自動的に選択肢として設定されるということです）

 

別のサンプルを用意しました。

たとえば検索アイテム「商品A」の検索項目「大きさ」に選択肢「大きい」を指定したとします。

続いて「商品B」には選択肢「中くらい」を指定したとします。

 

この時点で検索フォーム上には2つの選択肢が”自動で”表示されます。

 

続いて「商品C」には新たに別の選択肢「小さい」を指定したとします。

すると検索フォーム上では3つの選択肢が表示されるようになります。

これが「自動選択」です。

 

「自動選択」は検索アイテムでの指定値をそのまま選択肢として表示してくれるので便利と言えば便利です。

ただし一文字でも異なると別の選択肢として表示されてしまいます。

 

たとえば「商品D」には選択肢「小さい」を指定するつもりが誤って「小さ」と入力したとします。

すると検索フォーム上ではさらに一つ増えて4つの選択肢が表示されてしまいます。

 

こういうときは修正が必要ですが、検索アイテムが少ないうちは間違った箇所を手作業でも簡単に探せます。

しかしながら検索アイテム数が多くなってくると手作業で探し出すのはかなり厳しくなります。

 

こういう時は上の画像の赤枠内『置換』を利用するといいです。

『置換』をクリックすると下のような置換画面が出てきます。

 

検索文字列に「小さ」と入力します。

次に検索対象を絞って「大きさ」という検索項目だけにチェックを入れてほかは外していきます。

これだけでもだいぶすっきりします。

 

これで『検索』をクリックすると「小さ」が含まれるIDだけに絞り込むことができます。

あとはID4番の検索アイテムを開いて「小さ」を「小さい」に修正すれば完了です。

 

こうして手動で修正してもいいし、”置換”本来の役割でもある一括置換もできます。

 

やり方は通常の検索・置換と同様に『置換文字列』に置き換えたいワードを記入して「置換」ボタンをクリックするだけ。

指示ダイアログに従って進めていけば短時間で置換が完了します。

 

手動で指定

これまで説明用に用意したサンプル画面は基本的には「手動で指定」でのやり方による画面です。

つまり予め選択肢を決めておき、その選択肢を検索アイテムに割り振っていくというものです。

 

決められた選択肢しか用意されてないので、検索アイテム内に新しい選択肢を設定したとしても検索フォーム上に新しい選択肢が出ることはありません。

 

新しい選択肢を検索フォーム上に表示したい場合は検索フォームの構成画面内で選択肢の指定欄に追加してやる必要があります。

ここでは検索フォームのレイアウトに関しての独自カスタマイズをいくつかご紹介していきます。

 

検索項目のテキストカラー変更

検索項目のテキストは部分的に太字にしたり色を変えることもできます。

 

サンプル画面を用意しました。

”水の種類”を太字に、”水宅配型”を青系にカラー変更してます。

 

検索項目のテキストに関してですが、『項目名』はHTMLが機能します。

そこでカスタマイズしたいテキストをspanタグでくくってやります。

 

実際のHTMLがこちら。

（クラス名は適当・太字はstrongタグでも処理可能）

 

【2.検索フォームの設定】→【追加スタイル】にテキストカラーを青にするスタイルを追加します。

 

検索項目に関してはこんな感じで他もカスタマイズ可能です。

 

カテゴリーのテキストカラー変更

サンプルでは検索フォームの最上段に置いてるので他の検索項目と同類と間違えやすいですが、独立した項目になります。

 

それゆえここだけは【2.検索フォームの設定】→【検索フォームの構成】→項目「カテゴリー」をクリック→『編集』をクリックで開く『アイテム設定』内でのカスタマイズになります。

 

『項目名』の”カテゴリー”というテキストを先ほどと同じくspanクラスで囲ってやります。

（後ろに続くテキストにもクラスを付与してます）

 

実際には下のようなHTMLになってます。

（クラス名は適当です）

 

 

 

ラジオボタン・アクティブ時のカラー調整

ラジオボタンはチェックボックスに較べるとアクティブ状態がちょっとわかりづらい感じがあります。

 

そこでアクティブ状態をもうちょっと目立つようにカスタマイズしてみました。

 

【2.検索フォームの設定】→【追加スタイル】にラジオボタンの内部に色を付ける設定を書き込みます。

 

選択肢の表示順

『検索アイテム』一覧の青枠内の選択肢をご覧ください。

 

これを検索フォーム上に反映させるとこちらのように表示されます。

ん？ちょっと並び方が変ですね。

 

本来であれば「大きい」「中くらい」「小さい」と並んでほしいところなんですが、なんでこういう並び方になってしまうのか。

 

これ、検索アイテム上でどこをどういじってもこの並びにしかなりません。

でもいろいろ試してみたらどうやら日本語の内部コード順で並び替えが行われているようなんです。

 

というのも表示順を意図した通りに並ばせるときによく使う”半角数字を先頭に付与”してやると、具体的にはそれぞれの選択肢のアタマに1,2,3…と割り振ってやるとちゃんと意図通りに並んでくれるからです。

 

ただ数字が見えたままなのはちょっとみっともないですね。

そこでこの数字のみを非表示にするHTMLとCSSを別途設定してやります。

 

まず検索アイテムの編集で数字部分をspanクラスで囲ってやります。

（クラス名は適当です）

 

続いて【2.検索フォームの設定】→【追加スタイル】に該当クラスを非表示にする設定を書き込みます。

これで数字を消した状態でも思った通りの並び順で表示されるようになります。

 

若干の面倒さはありますが、いまのところこの方法しか思い浮かびません。