FutureShop2 FAQ

お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日9:30〜18:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 634
  • 公開日時 : 2017/10/12 18:14
  • 更新日時 : 2018/02/20 13:25
  • 印刷

商品検索フォームを設置したいです。

サポートカテゴリー : 

回答

管理画面から商品検索フォームのHTMLタグを取得できます。

 

商品検索フォームの設置方法


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

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

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

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で取得した商品検索フォームタグでは、

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

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



 

(1) 検索フォームサンプル(CSS)を記述する

まず下記の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/

 

 

(2)商品検索フォームサンプル(HTMLタグ)を設置する

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

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

 

<form action="http://契約ドメイン/fs/店舗KEY/GoodsSearchList.html" method="get">
<input type="hidden" name="_e_k" value="A" />
<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」「任意の画像パス(検索するボタン画像)」は、適宜差し替えてください。

アンケート:ご意見をお聞かせください

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日9:30~18:00)お電話でのお問い合わせ(平日9:30~18:00)
  • メールフォームをご利用くださいお問い合わせフォーム

ページ
トップへ