楽天GOLDページにオリジナルの検索窓を設置したい。
検索窓を自由にカスタマイズしたい。
という悩みを解決します。
デフォルトの検索窓は必要最低限の装飾しかしておらず、正直使いづらいです。
また、検索窓をデザインしてカスタマイズするにはHTML、CSS、JavaScriptの知識が必要となります。
「コピペでかんたんに実装したい！」という方はこれから紹介する検索窓をお試しください。
検索窓の実装イメージ
それでは、実装イメージと同じ検索窓の作り方を解説していきます。
本記事で解説する検索窓のポイント
本記事で実装する検索窓のポイントは下の2つ。
- 検索ワードのクリアボタン
- スマホ、パソコン兼用
検索ワードのクリアボタン
検索したい単語を入力したあと、思い直して別の単語で検索したことはありませんか？
BackSpaceなどの削除キーを押して単語を削除するのは手間がかかります。スマホならなおさらです。
そこで、1クリックで検索ワードを削除できるクリアボタンを実装しました。
地味で細かな機能ですが、お客様はわずらわしい操作から開放され、離脱率の低下につながります。
スマホ、パソコン兼用
スマホ、パソコンの両ページで使用できるようにCSSを設定しています。
お客様が使用するデバイスによって、レスポンシブに検索窓が変形します。
後述するデモにて実際の動作を確認できます。
実装：クリアボタンつきの検索窓
実装に必要なのは下の3つ。
- HTML
- CSS
- JavaScript
HTML
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <body onload="Form_Load()"> | |
| <div id="search_container"> | |
| <form accept-charset="euc-jp" method="get" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_top" name="searchForm"> | |
| <input value="店舗ID" type="hidden" name="sid"> | |
| <div> | |
| <i class="fa fa-search" aria-hidden="true"></i> | |
| <input placeholder="商品を探す" type="text" name="sitem" value="" onkeydown="ClearButton_KeyDown()"> | |
| <i class="fa fa-times-circle clearButton" aria-hidden="true" id="clear_button" onclick="ClearButton_Click()"></i> | |
| <input value="検索" type="submit"> | |
| </div> | |
| </form> | |
| </div> | |
| </body> |
<input name="sid">のvalueに自店舗の店舗ID（6桁の数字）を入力します。
リセットCSSをCDNで読み込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">虫眼鏡と×のアイコンはFont Awesomeを使用しています。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">CSS
| * { | |
| box-sizing: border-box; | |
| -webkit-appearance: none; | |
| } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| height: 100vh; | |
| padding: 10px; | |
| } | |
| #search_container { | |
| width: 100%; | |
| } | |
| form { | |
| margin: auto !important; | |
| } | |
| form>div { | |
| background-color: white; | |
| font-size: 14px; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: start; | |
| justify-content: flex-start; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| width: 100%; | |
| max-width: 425px; | |
| margin: 0 auto; | |
| border: 1px solid #cccccc; | |
| overflow: hidden; | |
| border-radius: 6px; | |
| } | |
| form>div i { | |
| font-size: 18px; | |
| margin: 0 6px 0 10px; | |
| } | |
| form>div .clearButton { | |
| color: #4975f7; | |
| font-size: 18px; | |
| padding: 6px; | |
| margin: 0 6px 0 2px; | |
| cursor: pointer; | |
| visibility: hidden; | |
| } | |
| form>div .clearButton:hover { | |
| color: #1850f5; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| form>div .clearButton { | |
| display: none; | |
| } | |
| } | |
| form>div input[type="text"] { | |
| -ms-flex-positive: 999999; | |
| flex-grow: 999999; | |
| -ms-flex-negative: 1; | |
| flex-shrink: 1; | |
| -ms-flex-preferred-size: 90px; | |
| flex-basis: 90px; | |
| width: 60%; | |
| height: 36px; | |
| padding-left: 3px; | |
| border: none; | |
| box-shadow: none; | |
| outline: none; | |
| } | |
| form>div input[type="submit"] { | |
| color: white; | |
| background-color: #4975f7; | |
| letter-spacing: 1.5px; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-negative: 9999; | |
| flex-shrink: 9999; | |
| -ms-flex-preferred-size: 80px; | |
| flex-basis: 80px; | |
| height: 36px; | |
| padding: 8px 10px 6px; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| form>div input[type="submit"]:hover { | |
| background-color: #1850f5; | |
| } |
Flexboxを使って検索窓の骨組みを作成しています。
<styleタグ>に記述する、または外部CSSから読み込んで使ってください。
JavaScript
| function Form_Load() { | |
| if (this.searchForm.sitem.value.length > 0) { | |
| target = document.getElementById("clear_button"); | |
| target.style.visibility = "visible"; | |
| } | |
| } | |
| function ClearButton_Click() { | |
| this.searchForm.sitem.value = ""; | |
| this.searchForm.sitem.focus(); | |
| target = document.getElementById("clear_button"); | |
| target.style.visibility = "hidden"; | |
| } | |
| function ClearButton_KeyDown() { | |
| target = document.getElementById("clear_button"); | |
| target.style.visibility = "visible"; | |
| } |
JavaScriptで検索ワードのクリアボタンを実装しています。
JavaScriptは<scriptタグ>に記述するか、外部JSとして読み込みます。
クリアボタンが必要ない場合はJavaScriptを省略してください。
デモ：楽天市場の検索窓
実際の動作を確認できるデモです。
See the Pen Search box for rakuten（楽天市場の検索窓） by ざきひー (@zakihiii) on CodePen.0
テキストエリアに検索ワードを入力するとクリアボタンが表示されます。
検索窓をiframeで設置
<iframe src="https://www.rakuten.ne.jp/gold/店舗アカウント/searchbox.html" width="100%" height="38" scrolling="no" frameborder="0"></iframe>RMS、または楽天GOLDにiframeを使って検索窓を設置します。
さあ、楽天の検索窓をカスタマイズしよう
検索ワードのクリアボタンを実装した検索窓を紹介しました。
また、CSSを変更、JavaScriptを追記することで新たな機能を付与することもできます。
店舗によって求めるデザイン、機能は違います。
本記事の検索窓を参考に、自店舗に合ったカスタマイズをしましょう。
コメント