自店舗に合うように検索窓をカスタマイズしたい。
Yahooトリプルでも使用できる検索窓を作りたい。
というお悩みを解決します。
Yahooショッピングの検索窓はYahooショッピング側で用意されているため自前で作る必要はありません。
しかし、デフォルトの検索窓は必要最低限の機能とデザインのため、ショップによってはショップデザインに合わないことがあります。
当ページではYahooトリプルページにも設置でき、オリジナルのデザインにできる検索窓のカスタマイズ方法を紹介します。
コピペで実装することが可能ですのでぜひ参考にしてください。
今回紹介する検索窓はJavaScriptを使用するためYahooトリプルへの契約が必須です。
Yahooショッピングの検索窓
Yahooショッピングにおける検索窓には大きく分けて3つの種類があります。
- Yahooストアクリエイターのヘッダー、サイドナビの検索窓パーツ
- Yahooショッピングの独自タグを使った検索窓
- HTMLタグを使った検索窓
今回紹介する検索窓は3つ目のHTMLタグを使った検索窓です。
HTMLタグを使った検索窓の特徴
HTMLタグの検索窓は他の検索窓にはない特徴があります。
- CSS、JavaScriptを使ったカスタマイズができる
- Yahooトリプルページに設置できる
CSS、JavaScriptの知識が必要になりますが、カスタマイズできればショップに合わせたデザイン、機能を付与することが可能です。
今回の検索窓のポイント
今回紹介する検索窓のポイントは2つ。
- スマホ、PC兼用
- 入力済みのテキストを消去するクリアボタンを設置
スマホ、PC兼用の検索窓
<iframeタグ>を用いてスマホ、PCページに共通の検索窓を表示します。
したがって、修正する場合は1つのファイルを修正するだけで済みます。
レスポンシブ対応でスマホ、PCのどちらかでデザインが崩れるといったことはありません。
テキストを消去するクリアボタンを設置
テキストボックスに入力した検索ワードをワンクリックで消去できる消去ボタンを設置しています。
「検索ワードを入力したけど別のキーワードで検索したい」時に再入力しやすくなるため便利です。
Yahooショッピングの検索窓を実装する
Yahooショッピングの検索窓を実装する方法を下の項目ごとに説明していきます。
- HTML
- CSS
- JavaScript
HTML
虫眼鏡アイコンとクリアボタンはFont Awesomeのアイコンを使用しています。<linkタグ>でFont AwesomeのCSSを読み込みます。
アイコンではなくオリジナルの画像を<imgタグ>を用いて設置してもいいですね。
<formタグ>の店舗アカウントには自店舗のアカウントを入力してください。
CSS
display: flexで虫眼鏡、テキストボックス、クリアボタン、検索ボタンを横並びのレイアウトにしています。
JavaScript
JavaScriptはテキストボックスのクリアボタンの挙動と、クリアボタンの表示／非表示の切り替えを制御しています。
クリアボタンはテキストボックスが空欄の場合は非表示ですが、テキストが入力されると表示されます。
<scriptタグ>で上のコードを直接記述する、もしくは外部JSとして読み込んで使ってください。
クリアボタンは検索窓の検索機能自体には関係しませんので、不必要の場合はJavaScript無しというのもアリです。
【デモ】Yahooショッピングの検索窓
実際に上で説明した通り実装したデモを用意しました。
See the Pen Yahooショッピングの検索窓をカスタマイズ by ざきひー (@zakihiii) on CodePen.0
デモにテキストを入力してテキストボックスのクリアボタンが機能するか実際にお試しください。
検索窓を<iframeタグ>で読み込む
ストアクリエイターのヘッダーやYahooトリプルのページに<iframeタグ>で検索窓を表示させれば完了です。
まとめ
今回のYahooショッピングの検索窓のポイント。
- <iframeタグ>を用いてスマホ、PC両方のデバイスに設置できる。
- JavaScriptでテキストボックスのクリアボタンを設置
自店舗でオリジナルの検索窓を設置することは他店舗と差別化できるためおすすめです。
また、自店舗に合わせたデザインに変更したり、お客様が使いやすいようにJavaScriptで機能を追加することも可能です。
ぜひ、当ページで紹介した検索窓のカスタマイズ方法をショップ制作にお役立てください。
コメント