カラーミーショップ　レビュー機能の使い方とカスタマイズ

このエントリーをはてなブックマークに追加
Pocket

カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。

このページではショップにレビュー機能を設置する方法を紹介します。

カラーミーショップでレビュー機能を使う方法

レビュー機能はカラーミーショップの通常機能なので、有料プランの追加などは必要ありません。リンクやレビューを表示するタグを設置するだけで使用可能です。

レビュー機能をテンプレートに設置する

レビューは投稿も内容の表示も別ページとなっているので、基本的にはリンクを貼り付けるだけで実装可能です。

<!-- 投稿画面へのリンク -->
<a href="<{$review_send_url}>">レビューを投稿</a>

<!-- 閲覧画面へのリンク -->
<a href="<{$review_lst_url}>">レビューを見る</a>

レビュー内容を商品詳細ページに表示する場合

リンクではなく、商品詳細ページにレビューの内容を表示する場合は、カラーミータグを使います。使用できるタグは以下の通り。詳細はカラーミーマニュアルにも記載されています。

タグ名 機能
id レビューID
nickname 投稿者ニックネーム
sex 性別
nendai 年代
star 評価数
title レビュータイトル
comment レビュー内容
img_url 投稿画像URL
date 投稿日時
res_comment ショップからの返信
res_date ショップからの返信日時

以下のようなコードを設置することでシンプルなレビューを表示することができます。

<!-- レビューがあれば表示 -->
<{if $reviewlist != ""}>
    <{section name=num loop=$reviewlist}>
        <dl>
            <dt>日付</dt>
            <dd><{$reviewlist[num].date}></dd>
            <dt>タイトル</dt>
            <dd><{$reviewlist[num].title}></dd>
            <dt>点数</dt>
            <dd><{$reviewlist[num].star}></dd>
            <dt>コメント</dt>
            <dd><{$reviewlist[num].comment}></dd>
        </dl>
    <{/section}>
<{/if}>

レビュー投稿ボタンを設置

同時にレビュー投稿用ボタンも用意しておくとUX的にも効果的なコンテンツを作成可能できます。カラーミーキットを使えばボタンUIのスタイルがあらかじめ用意されているので、aタグにclassをつけるだけでボタンを設置可能。

<!-- カラーミーキットを使った例 -->
<a href="<{$review_send_url}>" class="btn btn-lg btn-block">レビューを投稿する</a>

レビューを投稿するボタン