商品検索を追加する [HTML5テンプレート用]

2015-12-01 09:20

商品検索を自由記入欄やhtmlタグ利用可能エリアに追加できます。

STEP1 htmlタグをコピーする

下記のhtmlタグをコピーしてください。

<form class="search_form" method="get" action="/product-list">
<input type="search" value="" name="keyword" class="largesize searchform" style="width: 150px;" />
<span class="global_btn"><input type="submit" value="検索" name="Submit" class="searchinput btn_size_small btn_color_common"></span>
</form>

STEP2 htmlタグを貼り付ける

コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]画面から
[自由記入欄][htmlタグ利用可能エリア]に貼り付けて下さい。

横幅について
初期設定でinputタグの.searchformクラスにwidth: 250px;が指定されています。
<input type="search" value="" name="keyword" class="largesize searchform" style="width: 150px;" />
style="width: 150px;"を指定することで、検索文字入力エリアの横幅を調整していますので、横幅を調整される場合は、この数値を変更してください。
文言について
検索文字入力欄に表示される「商品をキーワードで探す」はご自身で変更可能です。
<input type="search" value="" name="keyword" class="largesize searchform" style="width: 150px;" />
placeholder="商品をキーワードで探す" 部分の文言を変更してください。
ボタンについて
検索ボタンに表示されす「検索」はご自身で変更可能です。
<input type="submit" value="検索" name="Submit" class="searchinput btn_size_small btn_color_common">
value="検索" 部分の文言を変更してください。
検索文字や絞込み保持について
FORMタグに class="search_form" を付けると、検索文字や絞り込みも状態も動的に保持される
例)
・在庫ありのみに絞り込んだ状態で商品検索すると、在庫ありのみが保持された状態で商品検索される