楽天GOLDページにオリジナルの検索窓を設置したい。
検索窓を自由にカスタマイズしたい。
という悩みを解決します。
デフォルトの検索窓は必要最低限の装飾しかしておらず、正直使いづらいです。
また、検索窓をデザインしてカスタマイズするにはHTML、CSS、JavaScriptの知識が必要となります。
「コピペでかんたんに実装したい！」という方はこれから紹介する検索窓をお試しください。
検索窓の実装イメージ
それでは、実装イメージと同じ検索窓の作り方を解説していきます。
本記事で解説する検索窓のポイント
本記事で実装する検索窓のポイントは下の2つ。
- 検索ワードのクリアボタン
- スマホ、パソコン兼用
検索ワードのクリアボタン
検索したい単語を入力したあと、思い直して別の単語で検索したことはありませんか？
BackSpaceなどの削除キーを押して単語を削除するのは手間がかかります。スマホならなおさらです。
そこで、1クリックで検索ワードを削除できるクリアボタンを実装しました。
地味で細かな機能ですが、お客様はわずらわしい操作から開放され、離脱率の低下につながります。
スマホ、パソコン兼用
スマホ、パソコンの両ページで使用できるようにCSSを設定しています。
お客様が使用するデバイスによって、レスポンシブに検索窓が変形します。
後述するデモにて実際の動作を確認できます。
実装：クリアボタンつきの検索窓
実装に必要なのは下の3つ。
- HTML
- CSS
- JavaScript
HTML
<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
Flexboxを使って検索窓の骨組みを作成しています。
<styleタグ>に記述する、または外部CSSから読み込んで使ってください。
JavaScript
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を追記することで新たな機能を付与することもできます。
店舗によって求めるデザイン、機能は違います。
本記事の検索窓を参考に、自店舗に合ったカスタマイズをしましょう。
コメント