商品管理_商品検索ページ

商品管理 ＞ 商品検索ページ

1.概要

本画面では、商品検索ページの表示設定を行います。

2.head内挿入の設定

head内挿入には、商品検索ページの＜head＞タグ内に出力する内容を設定します。

図.head内挿入の設定

3.フリーエリアの設定

フリーエリアには、商品検索ページのフリーエリアに表示するメッセージを設定します。設定したメッセージは、商品検索ページのメインエリアの最上部に表示されます。（HTML入力可）

図.フリーエリアの設定

4.レイアウト

レイアウトでは、検索条件の「カテゴリ」で絞り込みを行った場合の検索結果のレイアウトの設定を行います。チェックを入れると、検索結果のレイアウトが、絞り込みを行ったカテゴリに指定されているレイアウトで表示されます。カテゴリのレイアウトは、商品管理＞商品カテゴリ設定＞各カテゴリ＞レイアウト選択で指定されたレイアウトです。

図.レイアウト

5.ワード検索対象の設定

商品検索ページ内で、登録されている商品を「商品名」や「商品番号」等の項目を指定しての検索（＝ワード検索）を行う際の対象項目を設定します。ワード検索を有効にするには、「表示項目（検索条件）」の「フリーワード」にチェックを入れてください。

図.ワード検索対象

6.表示項目（検索条件）の設定

商品検索ページの検索条件として使用する項目を指定します（複数指定可）。

図.表示項目（検索条件）

6.1.項目概要

表示項目（検索条件）で取り扱う項目の定義は、次の表の通りです。

表.表示項目（検索条件）の項目定義

6.1.1.フリーワード

表示項目（検索条件）の「フリーワード」にチェックを入れると、商品検索ページの検索条件にフリーワード入力欄が追加されます。

図.表示項目（検索条件）のフリーワードにチェックを入れる

図.商品検索ページの検索フォーム

6.1.2.プレースホルダー

プレースホルダーには、お客様が文言を入力しワード検索を行う際に入力の手助けとなるヒント（＝入力例や単語）を表示させることができます。プレースホルダーに入力した文言は次のように表示されます。

図.表示項目（検索条件）のプレースホルダーを入力する

図.設定したプレースホルダーが検索フォームに表示される

6.1.3.表示方法

検索結果の商品表示方法をリスト形式で表示するかサムネイル形式で表示するかを指定します。

6.1.3.1.「リスト」を指定した場合

「リスト」を指定した場合は、検索結果が縦並びで表示されます。

図.「リスト」にした場合の商品検索ページの表示

6.1.3.2.「サムネイル」を指定した場合

「サムネイル」を指定した場合は、検索結果が横並びで表示されます。

図.「サムネイル」にした場合の商品検索ページの表示

7.検索結果の簡易表示

検索結果の簡易表示の設定は、商品検索ページの検索条件エリアの表示を簡易表示するかどうかの設定です（「図.検索結果の簡易表示設定」参照）。

図.検索結果の簡易表示設定

「検索結果の簡易表示」にチェックを入れると、商品検索ページの検索条件が簡易表示されます（「図.検索条件の簡易表示」参照）。「検索結果の簡易表示」の初期値は、チェックなしです。

図.検索条件の簡易表示

8.検索条件詳細（カテゴリグループ）

検索条件詳細（カテゴリグループ）では、表示項目（検索条件）で「カテゴリグループ」にチェックを入れている場合の詳細設定を行います。ここでは、検索条件の選択肢の表示名、タイプ（ラジオボタンかチェックボックスか）、選択必須かどうか、検索方法（AND検索かOR検索か）を設定します。

図.検索条件詳細（カテゴリグループ）の設定例

8.1.項目概要

検索条件詳細（カテゴリグループ）で取り扱う項目の定義は、以下の表の通りです。

表.検索条件詳細（カテゴリグループ）の項目定義

8.2.設定例

ここでは、検索条件詳細（カテゴリグループ）の設定内容が商品検索ページの検索条件にどのように反映されるのかを設定例をもとに紹介します。なお、この設定を商品検索ページに反映させるためには、「表示項目（検索条件）」欄の「カテゴリグループ」にチェックを入れておく必要があります（「5.表示項目（検索条件）の設定」参照）。

8.2.1.管理画面での設定

以下のようにカテゴリグループを2件（「種類」と「長さ」）設定します（「図.検索条件詳細（カテゴリグループ）設定例」参照）。

図.検索条件詳細（カテゴリグループ）設定例

8.2.2.商品検索ページの表示

カテゴリグループ「種類」の選択肢は、カテゴリ1、カテゴリ2です。「選択必須」にチェックを入れているので、商品検索ページでは、カテゴリ1、カテゴリ2のいずれか1つは必須で選択する必要があります。「タイプ」はチェックボックスにしているので、商品検索ページでは、チェックボックス形式で表示されます。チェックボックスの検索方法は「or」のため、「カテゴリ1」と「カテゴリ2」を両方選択して検索した場合は、「カテゴリ1、またはカテゴリ2に属する商品」が検索されます（「図.商品検索ページの検索条件「種類」の表示例」参照）。

図.商品検索ページの検索条件「種類」の表示例

カテゴリグループ「長さ」の選択肢は、カテゴリA、カテゴリBです。「選択必須」にチェックを入れていないので、商品検索ページでは、カテゴリA、カテゴリBの選択は任意です。「タイプ」はラジオボタンにしているので、商品検索ページでは、ラジオボタン形式で表示されます（「図.商品検索ページの検索条件「長さ」の表示例」参照）。

図.商品検索ページの検索条件「長さ」の表示例

9.検索条件詳細（PR設定グループ）

検索条件詳細（PR設定グループ）では、表示項目（検索条件）で「PR設定グループ」にチェックを入れている場合の詳細設定を行います。ここでは、検索条件の選択肢の表示名、タイプ（ラジオボタンかチェックボックスか）、選択必須かどうか、検索方法（AND検索かOR検索か）を設定します。なお、PR項目による商品検索を行う場合は、予め商品管理＞PR設定からPR項目の登録と、商品管理＞登録商品編集から各商品のPR設定を行ってください。

図.検索条件詳細（PR設定グループ）の設定例

9.1.項目概要

検索条件詳細（PR設定グループ）で取り扱う項目の定義は、以下の表の通りです。

表.検索条件詳細（PR設定グループ）の項目定義

9.2.設定例

ここでは、検索条件詳細（PR設定グループ）の設定内容が商品検索ページの検索条件にどのように反映されるのかを設定例をもとに紹介します。なお、この設定を商品検索ページに反映させるためには、「表示項目（検索条件）」欄の「PR設定グループ」にチェックを入れておく必要があります（「5.表示項目（検索条件）の設定」参照）。

9.2.1.管理画面での設定

以下のようにPR設定グループを2件（「原産地（日本・中国）」と「特徴」）設定します（「図.検索条件詳細（PR設定グループ）設定例」参照）。

図.検索条件詳細（PR設定グループ）設定例

9.2.2.商品検索ページの表示

PR設定グループ「原産地（日本・中国）」の選択肢は、原産地-中国、原産地-日本です。「選択必須」にチェックを入れているので、商品検索ページでは、原産地-中国、原産地-日本のいずれか1つは必須で選択する必要があります。「タイプ」はラジオボタンにしているので、商品検索ページでは、ラジオボタン形式で表示されます（「図.商品検索ページの検索条件「原産地（日本・中国）」の表示例」参照）。

図.商品検索ページの検索条件「原産地（日本・中国）」の表示例

PR設定グループ「特徴」の選択肢は、新着、返品OKです。「選択必須」にチェックを入れているので、商品検索ページでは、新着、返品OKのいずれか1つは必ず選択する必要があります。「タイプ」はチェックボックスにしているので、商品検索ページでは、チェックボックス形式で表示されます。チェックボックスの検索方法は「and」のため、「新着」と「返品OK」を両方選択して検索した場合は、「新着、かつ返品OKに設定されている商品」が検索されます（「図.商品検索ページの検索条件「特徴」の表示例」参照）。

図.商品検索ページの検索条件「特徴」の表示例

10.検索条件初期値の設定

商品検索ページの表示項目の初期値を設定します。

図.検索条件初期値

10.1.項目概要

検索条件初期値で取り扱う項目の定義は、次の表の通りです。

表.検索条件初期値の項目定義

11.表示項目（商品一覧）の設定

表示項目（商品一覧）では、商品検索ページの商品一覧に表示する項目を選択します。チェックを入れた項目が商品検索ページの商品一覧に表示されます。

図.表示項目（商品一覧）

11.1.項目概要

表示項目（商品一覧）で取り扱う項目の定義は、次の表の通りです。

表.表示項目（商品一覧）の項目定義

11.1.1.カートに入れるボタンの設定

カートに入れるボタンをクリックした場合の動作を設定します。

図.「カートに入れる」ボタンの非同期処理の選択

11.1.1.1.「非同期処理を使う（ボタン切替タイプ）」で設定した場合

「カートに入れる」ボタンをクリックすると、画面遷移なしで対象商品がカートに追加されます。商品検索ページの「カートに入れる」ボタンは、「カートを見る」ボタンに変わります。

図.「非同期処理を使う(ボタン切替タイプ)」にチェックをいれた場合の表示

11.1.1.2.「非同期処理を使う（ボタン追加タイプ）」で設定した場合

「カートに入れる」ボタンをクリックすると、画面遷移なしで対象商品がカートに追加されます。商品検索ページの「カートに入れる」ボタンの下に、「カートを見る」ボタンが追加されます。

図.「非同期処理を使う(ボタン追加タイプ)」にチェックをいれた場合の表示

11.1.1.3.「非同期処理を使わない」で設定した場合

「カートに入れる」ボタンをクリックすると、カートページに遷移し、対象商品がカートに追加されます。

図.「非同期処理を使わない」にチェックをいれた場合の表示

11.1.2.お気に入りボタンの表示設定

「お気に入りボタン」にチェックを入れると、商品検索ページにお気に入りボタンが表示されます。チェックなしの場合は、お気に入りボタンは表示されません。初期値は、チェックなしです。

図.商品検索ページのお気に入りボタンの表示

11.1.2.1.お気に入りボタンクリック時の動作

お気に入りボタンをクリックすると、お気に入り追加完了ダイアログが表示されます。お気に入り追加完了ダイアログには、お気に入り追加した商品の商品画像と、完了メッセージが表示されます。

図.商品検索ページのお気に入りボタンクリック時

11.1.2.1.1.未ログイン状態でお気に入りボタンをクリックした場合

非会員の場合、または会員が未ログインの状態でお気に入りボタンをクリックした場合、お気に入り追加完了ダイアログには、「ログイン」ボタンと「会員登録」ボタンが表示されます。「ログイン」ボタンをクリックすると、お気に入り追加完了ダイアログが閉じ、マイページの会員ログイン画面へ遷移します。ログイン成功後に一時的に保存された商品がお気に入りに登録され、リダイレクトで自動的に元のカテゴリページへ遷移します。「会員登録」ボタンをクリックすると、お気に入り追加完了ダイアログが閉じ、会員登録画面へ遷移します。会員登録成功後に一時的に保存された商品がお気に入りに登録され、会員登録完了画面に表示される「元のページへ戻る」ボタンをクリックすると元のカテゴリページへ遷移します。

図.未ログイン状態でお気に入りボタンをクリックした場合

11.1.2.1.2.ログイン状態でお気に入りボタンをクリックした場合

会員がログイン済みの状態でお気に入りボタンをクリックした場合、対象商品がお気に入りに登録され、お気に入り追加完了ダイアログが表示されます。お気に入り追加完了ダイアログには、「お気に入り一覧を見る」ボタンが表示され、クリックするとマイページのお気に入り一覧画面へ遷移し、追加した商品を確認できます。

図.ログイン状態でお気に入りボタンをクリックした場合

11.1.2.2.制限事項

お気に入りボタンを表示する設定にした場合でも、ブラウザがIEかつバージョン10以下の場合は「お気に入り」ボタンは、表示されません。

12.画像遅延読み込み機能の設定

商品検索ページの商品一覧の画像の遅延読み込み機能を利用するかどうかを設定します。

「画像遅延読み込み機能」については、「サイト表示速度向上の秘訣」のマニュアルも合わせてご確認下さい。

＞＞「サイト表示速度向上の秘訣」へ

13.機能パーツの設置

商品検索ページに機能パーツを設置する場合は、リストから対象の機能パーツを選択します。複数の機能パーツを設置する場合は、「機能パーツ追加」リンクをクリックしてください。機能パーツ選択用のリストが追加されます。設置した機能パーツを削除する場合は、リストを「未設定」に変更してください。商品検索ページの商品一覧の下部に設置した機能パーツが上から順に表示されます。順番を変更する場合は、リスト内の機能パーツを変更してください。

図.機能パーツの設置