大き目の商品画像にオプションごとの在庫表示とカートへ入れるボタン。
最近このようなデザインの商品ページを持つECサイトを多く見かけるようになってきましたね。
ところが、いざ自分のECサイトにデザインを取り入れようと思ってもショップASPを使っていると上手くいかないことも多いです。
今回はこのようなデザインをカラーミーショップで実現するための３つのポイントをご紹介します。
商品ごとにブランドロゴ画像を表示する
まずはこちら、商品ページでブランド名と一緒にブランドロゴも表示することで視認性をあげて分かりやすくしています。
ただし、カラーミーでこのデザインを実現しようにもブランドロゴを管理する機能はカラーミーにはありません。
苦肉の策としてブランドをカテゴリとして登録し、カテゴリイメージにブランドロゴをセット。
後は商品登録時にカテゴリを設定して商品ページでカテゴリイメージを表示すれば商品ページにブランドロゴが表示でき、、、ないです。
商品ページには商品に設定されているカテゴリのイメージを表示するカスタムタグがありません。
幸い商品ページではカテゴリとカテゴリイメージURLのリストはカスタムタグで取得可能です。
ただし、商品のカテゴリとマッチさせることはできません。
そこで、パンくずリスト用の大カテゴリーURL($bid_link)を使います。
パンくずリスト用の大カテゴリーURLにはカテゴリIDが含まれていますので、まずはカテゴリIDを抜き出します。
抜き出したカテゴリIDをキーにカテゴリリストからカテゴリイメージURLを取得してimgタグで表示する。
これでブランドロゴを商品ページに表示させることができます。
<!-- ブランドロゴ -->
<{assign var="category_id" value=$bid_link|regex_replace:"/(.*cbid=)/":""|regex_replace:"/&.*+/":""}>
<{section name=cate loop=$category}>
<{if $category[cate].id|regex_replace:"/,.*+/":"" == $category_id && $category[cate].img_url != ""}>
<div class="brand_logo"><img src="<{$category[cate].img_url}>" /></div>
<{assign var="isFind" value="true"}>
<{/if}>
<{/section}>
<{if $isFind == ""}>
<div class="brand_logo"><img src="<{$category[0].img_url}>" /></div>
<{/if}>
<!-- //ブランドロゴ -->
オプションごとに[カートへ入れる]ボタンを表示する
つづいてこちら、オプションごとに[カートへ入れるボタン]を表示することで簡単にカートへ入れることが出来るようになっています。
オプションがある商品の場合、カラーミーの一般的な操作方法は
- セレクトボックス or ラジオボタンでオプションを選択
- [カートへ入れる]ボタン押下
となります。
しかし、この操作方法ではオプション選択とボタン押下の２アクションが必要となってしまいます。
１アクションでカートへ商品を入れれるようにしたい！
カラーミーではオプションを選択してカートへ入れるボタンを押した際に、[option]という値に選択されたオプションの情報を格納して送信しています。
そこで、[カートへ入れる]ボタンが押されたときのonclickイベントで、[option]に押されたボタンのオプション情報を格納します。
<{section name=nu4m loop=$option_value[0].id}>
<{$option_value[0].name[nu4m]}>
カートに入れる
<{/section}>
オプションごとに在庫数を表示する
最後はカラーミーはオプション表示画面が用意されており、オプションごとの在庫をそちらの画面で確認することが可能ですが、画面遷移が発生するためユーザーにとっては不親切なUIです。
どうせなら商品ページで１度に確認したいですよね。
しかし、カラーミーの商品ページカスタムタグを見てもオプションごとの在庫数は見当たりません。
そう、カラーミーでは商品詳細ページでオプションごとの在庫数を表示することは出来ないのです。
オプションごとの表示数はオプション表示画面では確認することが出来ます。
そこで、商品ページ表示時にあわせてオプション表示画面もロードし、オプションごとの在庫数をスクレイピングで取得します。
おわりに
カラーミーは便利な機能がたくさんある反面、デザイン上の制約も多くあります。
しかし、今回ご紹介したようにやり方を工夫することで自由度の高いデザインを実現することは可能です。
