【クリエイターモード】カテゴリーページなどの商品リストにレビューを表示させたいです。方法を教えてください。

表示例）

【Complete】テンプレートにはソースの初期値に実装されています。

レビューの記述がないデザインテンプレートでは、それぞれの商品リスト内の価格のHTMLの前後など、表示させたい位置ににレビューを表示する変数タグを使用してHTMLを追加してください。

$〇〇〇.list[i].review.star_html　・・・レビューの平均値の星（評価1～5）
$〇〇〇.list[i].review.average　・・・レビューの平均値の数字
$〇〇〇.list[i].review.total_count　・・・レビューの総数の数字

以下は【Complete】のHTMLをもとに作成した例です。
div、class、pなどはお好きな形式に変更してください。

新商品

<{if $new_item.list[i].has_review}>
<div class="item-list-review">
    <{$new_item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$new_item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$new_item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

おすすめ商品

<{if $recommend_item.list[i].has_review}>
<div class="item-list-review">
    <{$recommend_item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$recommend_item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$recommend_item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

スペシャル商品

<{if $special_item.list[i].has_review}>
<div class="item-list-review">
    <{$special_item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$special_item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$special_item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

ランキング

<{if $ranking_item.list[i].has_review}>
<div class="item-list-review">
    <{$ranking_item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$ranking_item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$ranking_item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

最近チェックした商品

<{if $recently_item.list[i].has_review}>
<div class="item-list-review">
    <{$recently_item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$recently_item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$recently_item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

カテゴリー

ショップデザイン / テンプレート選択・編集 / クリエイターモード > 商品カテゴリー 「HTML」のカテゴリーの商品リスト内に記載してください。

<{if $category.item.list[i].has_review}>
<div class="item-list-review">
    <{$category.item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$category.item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$category.item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

商品グループ

ショップデザイン / テンプレート選択・編集 / クリエイターモード > 商品詳細 「HTML」の商品グループの商品リスト内に記載してください。

<{if $item.group.list[i].has_review}>
<div class="item-list-review">
    <{$item.group.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$item.group.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$item.group.list[i].review.total_count}>件]</p>
</div>
<{/if}>

まとめ買い

ショップデザイン / テンプレート選択・編集 / クリエイターモード > まとめ買い割引 「HTML」の商品リスト内に記載してください。

<{if $bulk.item.list[i].has_review}>
<div class="item-list-review">
    <{$bulk.item.list[i].review.star_html}>
    <p class="item-list-review-rate"><{$bulk.item.list[i].review.average}></p>
    <p class="item-list-review-count">[<{$bulk.item.list[i].review.total_count}>件]</p>
</div>
<{/if}>

CSS

レイアウト用のCSSは必要に応じて「全ページ共通」「CSS」に記述してください。

例）

.item-list-review{
	display: flex;
	margin-bottom: 8px;
}

■makeshopサポート
クリエイターモードでレビュー機能を使ってみよう！
https://www.support.makeshop.jp/design/?p=12454?design_board