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

公開日:  最終更新日:2018/04/29

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

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

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

スポンサードリンク

楽天のショップ内検索をコンボボックスと連動させる方法

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

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

%MINIFYHTML35916487f7a8a0ca9fdb41d9ce81bd3a17%

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









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

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

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

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

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






Your Message

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

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

PAGE TOP ↑