カラーミーショップ
はスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。
ここでは2017年4月に追加されたばかりの新機能である、「お気に入り」機能の使い方を紹介します。
カラーミーショップでお気に入り商品を使う方法
お気に入り機能はカラーミーショップの標準機能となっているため、特に有料プランの契約などは必要ないようです。
ただ、オススメ商品や売れ筋商品のように管理画面で設定するのではなく、お気に入りボタンを押してもらうことでユーザーごとに表示されます。
なので、お気に入り商品の表示と合わせてお気に入り登録ボタンの設置が必須となっています。
お気に入り商品の使い方
商品の表示方法
お気に入り商品の一覧を表示するには、おすすめ商品や売れ筋商品と同じ書き方でOK。基本的には下記のようなコードになります。使用できるタグについてはカラーミーマニュアルをご覧ください。
<div class="favorite-product">
<!-- お気に入り商品のループ開始 -->
<{section name=num loop=$favorite}>
<div>
<!-- リンク付き商品画像 -->
<a href="<{$favorite[num].link_url}>">
<img src="<{$favorite[num].img_url}>" alt="<{$favorite[num].name}>" />
</a>
<h3>
<!-- リンク付き商品タイトル -->
<a href="<{$favorite[num].link_url}>">
<{$favorite[num].name}>
</a>
</h3>
<!-- 商品の簡易説明 -->
<p>
<{$favorite[num].s_expl}>
</p>
<!-- 販売価格 -->
<p>
<{$favorite[num].price}>
</p>
</div>
<{/section}>
<!-- お気に入り商品のループ終了 -->
</div>
お気に入り追加ボタンの設置方法
お気に入りボタンの設置方法はこちらの公式マニュアルに掲載されています。
設置するには以下のようなボタンのコードを表示したい場所に設置するだけ。設置できるページはHTMLを編集できるページでオプションページ以外ならどこでもOK。
注意点はproduct_idの部分。詳細ページなら公式マニュアルのコードをコピペするだけでOKですが、商品一覧やトップページのおすすめ商品に設置する場合は変更する必要があります。
<!-- 詳細ページに設置する場合 -->
<button type="button"
class="favorite-button"
<{favorite_button_attribute product_id=$product.id added_class="fav-items"}>
>お気に入りボタン</button>
<!-- 商品一覧に設置する場合 -->
<button type="button"
class="favorite-button"
<{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>
>お気に入りボタン</button>
<!-- おすすめ商品に設置する場合 -->
<button type="button"
class="favorite-button"
<{favorite_button_attribute product_id=$recommend[num].id added_class="fav-items"}>
>お気に入りボタン</button>
お気に入りボタンが押された際の挙動
上記のコードを設置しただけでは、お気に入りボタンが押されても何も変化がありません（登録はされています）。このままだと登録したかどうかが全くわからないため、CSSスタイルを使って変化をつけておきましょう。
お気に入りボタンのコードにあるadded_class="fav-items"はボタンが押されたら指定したclassを追加する機能です。この場合、お気に入りボタンを押すと、fav-itemsが追加されます。
これを利用してスタイルの変更が可能というわけです。下記のようなスタイルを作ったら、共通ページのCSS編集エリアに貼り付けておきましょう。
/* 背景を黒く、テキストカラーを白に変更 */
.favorite-button.fav-items{
background-color: #333;
color: #fff;
}
ボタン部分の変化はこのようになります。
おすすめ商品にお気に入りボタンを設置してみる
おすすめ商品に設置する場合はこのようになります。ボタンを追加するだけなので、すでに運用中のページでも簡単に追加することができます。
<div class="favorite-product">
<!-- おすすめ商品のループ開始 -->
<{section name=num loop=$recommend}>
<div>
<!-- リンク付き商品画像 -->
<a href="<{$recommend[num].link_url}>">
<img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name}>" />
</a>
<h3>
<!-- リンク付き商品タイトル -->
<a href="<{$recommend[num].link_url}>">
<{$recommend[num].name}>
</a>
</h3>
<!-- 商品の簡易説明 -->
<p>
<{$recommend[num].s_expl}>
</p>
<!-- 販売価格 -->
<p>
<{$recommend[num].price}>
</p>
<!-- お気に入りボタン -->
<p>
<button type="button"
class="favorite-button"
<{favorite_button_attribute product_id=$recommend[num].id added_class="fav-items"}>
>お気に入りボタン</button>
</p>
</div>
<{/section}>
<!-- おすすめ商品のループ終了 -->
</div>
