[楽天]ショップ内 検索窓 javascriptを使ってコンボボックスとの連動

公開日:  最終更新日:2014/10/13

[楽天]ショップ内 検索窓 javascriptを使ってコンボボックスとの連動

先日に引き続きショップ内検索窓についてです。

Javascriptと組み合わせたサンプルを紹介します。

スポンサードリンク

楽天内でも有名なこちらのショップ 爽快ドラッグ
ショップオブザイヤー2012で総合1位を受賞しているショップになります。

こちらのショップを参考に検索窓についてサンプル作成してみました。
動きとしては コンボボックスでよく入力されるキーワード、入力してほしいキーワードさらに、価格帯の選択が出来るようになっています。

サンプル(実際に検索は出来ません)









セレクトボックスで選択された内容に応じて
その後の検索ページに飛ばす条件をjavascriptで制御しています。

セール品、限定品の場合は 隣にあるキーワード用テキストボックスに選択した内容をセット

送料無料(サンプルソースでは5000円以上が送料無料とします)の場合は minの値に5000をセット

価格帯 選択した価格帯に応じたmin,maxの値をセットしています。
(min,maxの項目についはhidden 隠し項目になっています)

価格などの項目を別に分けてレイアウトすれば良いかもしれませんが、スペースが限られている場合や、入力の手間削減、人気キーワードを予め表示など使い勝手が良い検索窓になっている気がします。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑