ブログ

2015.12.18

カラーミーでイマドキの商品ページを作る3つのポイント

Web制作ツール

キャプチャ
こんにちは、宇野です。
大き目の商品画像にオプションごとの在庫表示とカートへ入れるボタン。
最近このようなデザインの商品ページを持つECサイトを多く見かけるようになってきましたね。

ところが、いざ自分のECサイトにデザインを取り入れようと思ってもショップASPを使っていると上手くいかないことも多いです。今回はこのようなデザインをカラーミーショップで実現するための3つのポイントをご紹介します。



目次
1.商品ごとにブランドロゴ画像を表示する。
2.オプションごとに[カートへ入れる]ボタンを表示する。
3.オプションごとに在庫を表示する。

1.商品ごとにブランドロゴ画像を表示する。

商品ごとにブランドロゴ画像を表示
まずはこちら、商品ページでブランド名と一緒にブランドロゴも表示することで視認性をあげて分かりやすくしています。
ただし、カラーミーでこのデザインを実現しようにもブランドロゴを管理する機能はカラーミーにはありません。
苦肉の策としてブランドをカテゴリとして登録し、カテゴリイメージにブランドロゴをセット。後は商品登録時にカテゴリを設定して商品ページでカテゴリイメージを表示すれば商品ページにブランドロゴが表示でき、、、ないです。
商品ページには商品に設定されているカテゴリのイメージを表示するカスタムタグがありません。

どうするか。

幸い商品ページではカテゴリとカテゴリイメージURLのリストはカスタムタグで取得可能です。ただし、商品のカテゴリとマッチさせることはできません。
そこで、パンくずリスト用の大カテゴリーURL($bid_link)を使います。
パンくずリスト用の大カテゴリーURLにはカテゴリIDが含まれていますので、まずはカテゴリIDを抜き出します。
抜き出したカテゴリIDをキーにカテゴリリストからカテゴリイメージURLを取得してimgタグで表示する。
これでブランドロゴを商品ページに表示させることができます。


2.オプションごとに[カートへ入れる]ボタンを表示する。

オプションごとにカートへ入れるボタンを表示
つづいてこちら、オプションごとに[カートへ入れるボタン]を表示することで簡単にカートへ入れることが出来るようになっています。
オプションがある商品の場合、カラーミーの一般的な操作方法は
1.セレクトボックス or ラジオボタンでオプションを選択。
2.[カートへ入れる]ボタン押下。
となります。
しかし、この操作方法ではオプション選択とボタン押下の2アクションが必要となってしまいます。
1アクションでカートへ商品を入れれるようにしたい!

どうするか。

カラーミーではオプションを選択してカートへ入れるボタンを押した際に、[option]という値に選択されたオプションの情報を格納して送信しています。そこで、[カートへ入れる]ボタンが押されたときのonclickイベントで、[option]に押されたボタンのオプション情報を格納します。


3.オプションごとに在庫数を表示する。

オプションごとに在庫数を表示
最後はこちら、カラーミーはオプション表示画面が用意されており、オプションごとの在庫をそちらの画面で確認することが可能ですが、画面遷移が発生するためユーザーにとっては不親切なUIです。
どうせなら商品ページで1度に確認したいですよね。しかし、カラーミーの商品ページカスタムタグを見てもオプションごとの在庫数は見当たりません。
そう、カラーミーでは商品詳細ページでオプションごとの在庫数を表示することは出来ないのです。

どうするか。

オプションごとの表示数はオプション表示画面では確認することが出来ます。そこで、商品ページ表示時にあわせてオプション表示画面もロードし、オプションごとの在庫数をスクレイピングで取得します。


おわりに

カラーミーは便利な機能がたくさんある反面、デザイン上の制約も多くあります。しかし、今回ご紹介したようにやり方を工夫することで自由度の高いデザインを実現することは可能です。
今回のご紹介したやり方を参考に是非トライされてみてはいかがでしょうか。

« » もどる

提供サービス

最新情報をお届け

メールアドレスを登録していただくと、おすすめ情報やアクシスブログの更新情報をお届けいたします。

メールフォームからの
お問い合わせ

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

メールでのお問い合わせ・ご相談

専用のお問い合わせフォームよりご連絡ください

お問い合わせフォーム

お電話でのお問い合わせ・ご相談

0120-439-241