Step1：商品検索フォームのHTMLタグを取得

構築メニュー＞その他　最下部の
商品検索を行うHTMLタグ欄、「HTMLタグ」ボタンをクリックし、
商品検索フォームのHTMLタグを取得します。

取得したHTMLタグに検索要素として不要なものがある場合、適宜編集してご利用ください。

　例：「商品番号」の検索項目を表示したくない場合…
　下記の行を削除することで「商品番号」の検索項目が削除されます。
　---------------------------------------------------------------------------------------
　商品番号：<input name="goodsno" maxlength="100" type="text" /><br />
　---------------------------------------------------------------------------------------

HTMLタグを編集することで、
「タグ」「商品番号」「キーワード」「価格」の項目を自由に組み合わせ、

店舗に適した検索フォームにカスタマイズすることが可能です。
 

※商品検索結果画面のレイアウトは、 構築メニュー＞ページ設定＞商品ページ設定 にて変更可能です。

その他、検索機能に関する詳細は、下記のヘルプページにも記載しております。

▼ヘルプ：各ページURL・タグ一覧（HTMLタグ）
http://www.future-shop.jp/manual/build/etc/bld-ShopUrlList.html#03

Step2：商品検索フォームを設置したい場所にHTMLタグを記述

構築メニュー＞デザイン設定＞編集＞レイアウト編集　の
商品検索フォームを設置させたい場所に、
Step1で取得したHTMLタグを記述してください。
 

レイアウト調整された「商品検索フォーム」のサンプルを利用する

Step1で取得した商品検索フォームタグでは、

下記左のような商品検索フォームが表示されますので、

レイアウトを調整した「商品検索フォームサンプル」をご用意しました。



 

まず下記のCSSを、構築メニュー＞デザイン設定＞オリジナルCSS/JavaScript編集　の
「オリジナルCSSの編集」内の一番下に貼り付けて下さい。

ul#searchBox{width:98%; margin:10px auto;}
ul#searchBox li, ul#searchBox dl, ul#searchBox dt, ul#searchBox dd{margin:0;}
ul#searchBox li{list-style:none; text-align:center;}
ul#searchBox li.midashi{font-weight:bold; padding:5px; background:#EEE;}
ul#searchBox li.item{border-bottom:#ddd dotted 1px; padding:3px 0px 10px; font-size:12px;}
ul#searchBox li.item dt{padding:5px; font-weight:bold;}
ul#searchBox li.searchBtn{padding:10px 0; border-bottom:3px solid #ddd;}

※色指定に関しては、下記サイトをご参照ください（外部サイト）
▼外部サイト：カラーピッカー
http://www.benricho.org/colors/color_picker/

次に、下記のサンプルHTMLタグを「Step2：商品検索フォームを設置したい場所にHTMLタグを記述」の手順に従い、

検索フォームを表示したい設定欄に記述します。

 

<form action="http://契約ドメイン/fs/店舗KEY/GoodsSearchList.html" method="get">
<input type="hidden" name="_e_k" value="Ａ" />
<ul id="searchBox">
<li class="midashi">商品検索</li>
<li class="item">
<dl>
<dt>
タグ
</dt>
<dd>
<select name="tag">
<option value="">
------------------
</select>
</dd>
</dl>
</li>
<li class="item">
<dl>
<dt>
商品番号
</dt>
<dd>
<input name="goodsno" type="text" maxlength="100" >
</dd>
</dl>
</li>
<li class="item">
<dl>
<dt>
キーワード</dt>
<dd>
<input name="keyword" type="text" maxlength="1000" id="TARGET" >
</dd>
</dl>
</li>
<li class="item">
<dl>
<dt>
価格
</dt>
<dd>
<input name="minprice" type="text" class="price" size="6" maxlength="9">
～
<input name="maxprice" type="text" class="price" size="6" maxlength="9">
円
</dd>
</dl>
</li>
<li class="searchBtn">
<input type="image" name="submit" alt="検索する" src="任意の画像パス（検索するボタン画像）">
</li>
</ul>
</form>

※「契約ドメイン」「店舗KEY」「任意の画像パス（検索するボタン画像）」は、適宜差し替えてください。