商品検索App
商品をキーワードで検索できる検索フォームが利用できるAppsです。
テンプレートのデザインに応じて柔軟にフォームをデザインしていただけるように、検索用のURLをテンプレート変数として用意しております。
ブロック
if ページ
タグ | 説明 |
---|---|
{block:IndexPageSearch} | トップページの検索キーワードがある |
{block:NoIndexPageSearch} | トップページの検索キーワードがない |
if Apps
タグ | 説明 |
---|---|
{block:AppsSearch} | 商品検索Appをインストールしている |
変数
ページ
タグ | 説明 |
---|---|
{IndexPageSearch} | 検索キーワード |
{SearchPageURL} | 検索フォームのURL。 GETパラメータ q=***(検索キーワード) が必要です。 |
ローカライズテキスト
タグ | 説明 |
---|---|
{lang:ItemSearchResult} | "[検索キーワード]"の検索結果 |
検索フォームの設置方法
ショップの全ページからアクセスできるよう、ヘッダーやグローバルナビゲーションに配置することが望ましいです。
- formのactionにテンプレート変数 {SearchPageURL} を指定
- 検索ワード入力inputのnameに "q" を指定
- 検索ワード入力inputのvalueにテンプレート変数 {IndexPageSearch} を指定
例)
{block:AppsSearch}
<form action="{SearchPageURL}" method="get">
<input type="text" name="q" placeholder="商品を検索" value="{IndexPageSearch}"/>
<button type="submit">検索</button>
</form>
{/block:AppsSearch}
検索結果一覧ページ
検索結果はトップページ {block:IndexPage} 内に表示されます。
テンプレート変数 {lang:ItemSearchResult} を利用して、検索に利用されたキーワードを表示することができます。
例)
{block:IndexPage}
...
{block:IndexPageSearch}
<p>{lang:ItemSearchResult}</p>
{/block:IndexPageSearch}
...
{/block:IndexPage}
動作のチェック
- 検索フォームが表示できていること
- 指定したキーワードで検索ができること
- 該当しない場合の表示ができること
- 該当した場合の表示ができること