Product comparisonは、いくつかの種類のものを比較する時に役に立つjQueryプラグインです。例えば、製品や写真などのデザイン、サービスの比較などです。また、比較の対象は、テキストではなく画像などの視覚的に行うものに向いています。なお、デモページではスマートフォンのデザインの比較が表現されています。このように、製品の比較に最も活用できるプラグインです。では、実装方法について見ていきましょう。
Product comparison
以下、product-comparisonの実際のデモページになります。
Product comparisonの実装は、3つの行程で構築していきます。
- 1. 製品の一覧画面のマークアップ
- 2. 選択項目のプレビューパネルの作成
- 3. 比較結果を表示させる部分の作成（ポップアップウィンドウの作成）
1について、表示する項目の画像をそれぞれ「img」要素でマークアップします。項目名（製品名）は、テキスト入力で表示できます。（具体的なマークアップはプラグイン配布ページへ）
2のプレビューパネルは、選択した項目をプレビューさせるために作成します。プレビュー画面には最大3つの項目を同時に選択でき、表示してくれます。こちらも具体的なマークアップは、プラグイン配布サイトで丁寧に記載されています。
3について、プレビュー画面で2つ以上の項目を選択すると、「Compare」というボタンが現れます。それをクリックすると、比較結果についての詳細画面がポップアップウィンドウで表示されます。マウスオン時の効果も指定されており、デザイン性が高いポップアップになっています。
Product comparisonを使用すると、比較前は画像のみの表示ですっきりとしたページになります。製品のデザインのみが目に飛び込んでくるので、ユーザーに視覚的に呼びかけることができます。また、比較したい製品のみを任意で選択できるので、情報の整理には画期的なプラグインだと思います。
購入画面の一歩手前で、このような比較ページを設けると、ユーザーに合った製品選び、しいては購買欲の促進に役立てることができるのではないでしょうか。
Product comparisonのダウンロードや詳しい使い方は以下からどうぞ。
