検索フォームの実装

次に検索フォームを実装します。サンプルサイトの製品紹介ページの左カラムには検索フォームがブロックで配置してあります。「製品名」「製品カテゴリ」「ページ毎の件数」の項目で絞り込みができるようになっています。また、ここでもAJAXによる画面遷移を伴わない検索結果の表示が実装されています。

1.Viewsの「製品紹介ページ」の設定画面から「フィルターの条件」を確認します。この「フィルターの条件」では表示させるコンテンツの抽出条件を設定できます。

現在は「コンテンツ: 掲載ステータス (= はい)」と「コンテンツ: コンテンツタイプ (= 製品紹介)」が設定されています。

これは、「掲載が許可されている、製品紹介コンテンツタイプのコンテンツ」を表示するという設定になっています。

「フィルターの条件」の「を追加」ボタンをクリックします。

2.「フィルター条件を追加」ウィンドウが開き、さまざまな条件を追加できます。ウィンドウをスクロールしてどのような条件があるのかを一通り確認すると、非常に細かい抽出条件での絞り込みが可能なのがわかります。

まずは「タイトル」にチェックを入れ、「対象」を「このpage(上書き)」を選択して「適用」をクリックします。

3.「設定フィルター条件:コンテンツ:タイトル」ウィンドウが開きます。

今回は「製品紹介」コンテンツのタイトルによる絞り込み機能を実装するのが目的です。これには、ログインをしていないサイト訪問者がタイトルによる絞り込み機能を利用できる設定にする必要があります。そのため、「このフィルターを訪問者へ表示し、変更できるようにする」チェックボックスにチェックを入れます。

4.「設定フィルター条件:コンテンツ:タイトル」ウィンドウが開きますので、ここでは訪問者向けのフォームの設定を行います。「ラベル」に「製品名」を入力し、「オペレーター」メニューから「含む」を選択し「適用」「保存」ボタンをクリックします。

※「オペレーター」メニューではさまざまな一致条件を選択可能です。初期設定では「等しい」となっています。「等しい」が設定されていると、フォームに「猫」と入力して検索した場合には完全一致したコンテンツのみが表示されるので、「DRUPAL猫(白)」や「DRUPAL猫(黒)」などは検索結果に表示されません。そのため、ここでは「含む」を選択します。これにより、「猫」という文字列を製品名に含むコンテンツが検索結果に表示されるようになります。

5.「製品紹介」ページを確認します。製品一覧の上部に検索フォームが実装されました。製品名に「猫」と入力して検索をクリックします。

すると、製品名に猫を含む、2つのコンテンツが絞り込み表示されました。画面の遷移もなくAJAXで実装されているのが確認できます。次に「製品カテゴリ」による絞り込み機能を実装します。

6.先ほど同様に「フィルターの条件」画面から「タクソノミータームを含む」にチェックを入れ「適用」をクリックします。

7.新たなウィンドウが開きますので、「ボキャブラリー」で「製品カテゴリ」を選択し、「選択タイプ」で「ドロップダウン」を選択し「適用して続ける」ボタンをクリックします。

8.「設定フィルター条件:コンテンツ:タクソノミータームを含む」ウィンドウが開きます。「このフィルターを訪問者へ表示し、変更できるようにする」にチェックを入れ「適用」ボタンをクリックします。

9「設定フィルター条件:コンテンツ:タクソノミーを含む」ウィンドウが開きます、「ラベル」に「製品カテゴリ」と入力し「適用」「保存」ボタンをクリックします。

10.製品カテゴリによる絞り込み機能が実装されました。次に、ページ毎に表示される件数も同様に訪問者が選択できるように設定します。

11.再びViewsの「製品紹介」ページの設定ページで、「ページャー」セクションの「ページ分け、8件のアイテム」リンクをクリックします。

12.「製品紹介ページ: ページャーオプション」ウィンドウを下までスクロールし、「ユーザーにこのビューにいくつのアイテムが表示されるかを管理することを許可します。」にチェックを入れます。設定項目が開きますので「ページあたり項目数の選択肢」に「8, 16, 24, 32」と入力します。これは、表示件数を選択する際の選択肢として利用されます。ここに設定する件数は、初期表示が8件なので、その倍数である「8, 16, 24, 32」などである必要があります。

「Allow user to display all items」にもチェックを入れて「適用」「保存」をクリックします。