【U-KOMI】おすすめ商品にスターレーティング表示を追加

概要

ご利用方法

1. レコメンドテンプレート編集画面を開く

カラーミーショップをご利用の方

1. レコメンド管理画面にログイン
2. 左メニューにて「表示設定 > カラーミーショップ表示設定」をクリック
3. 表示設定を行うページ「トップページ／商品一覧／商品詳細」いずれかのテキストリンクをクリック
4. 「表示機能」名をクリックして、HTML編集画面へ
   
   

カラーミーショップ以外をご利用の方 または、カラーミーショップで手動タグ設置をしている方

1. レコメンド管理画面にログイン
2. 左メニューにて「表示設定 > テンプレート作成／一覧」をクリック
3. 編集を行う「テンプレート名」の「編集」ボタンをクリックして、HTML編集画面へ
   
   

2. スターレーティング表示用のタグを埋め込む

スターレーティング表示用のタグ

<div class="review-summary-container" 
data-pid="#{code}" data-group="true" data-action="summary" data-popup="false">

基礎JS

<script type="text/javascript">
(function u(){var u=document.createElement("script");u.type="text/javascript",u.async=true,
u.src="//api.u-komi.com/★お客様専用APIキー★/widget.js";
var k=document.getElementsByTagName("script")[0];k.parentNode.insertBefore(u,k)})();
</script>

※「お客様専用APIキー」は、お客様Webサイト内でレビュー表示またはスターレーティング表示しているページのHTML内に記載されたU-KOMIの基礎JSに含まれていますので、そちらをご確認ください。

レコメンドテンプレート記述例　※HTMLはサンプルです

#{if(total,0)}
#{else}
<div id="rcmd_sample_recommend" class="recommend_sample_rcmd_body">
  <h3>この商品を見ている人はこちらの商品もチェックしています</h3>
  <ul class="recommend_sample_rcmd_display">
    #{item(1,10)}
    <li>
      <a href="#{url}">
        <img src="#{image}" alt="#{name}">
        <p class="rcmd_recommend_name">#{name}</p>
        <p class="rcmd_recommend_price">#{comma(mail_price)}円（税込）</p>
        <!-- スターレーティング表示 -->        
        <div class="review-summary-container" data-pid="#{code}" data-group="true" 
data-action="summary" data-popup="false"></div>
      </a>
    </li>
    #{/item}
  </ul>
</div>
<!-- U-KOMI基礎JS -->
<script type="text/javascript">
(function u(){var u=document.createElement("script");u.type="text/javascript",u.async=true,
u.src="//api.u-komi.com/★お客様専用APIキー★/widget.js";
var k=document.getElementsByTagName("script")[0];k.parentNode.insertBefore(u,k)})();
</script>
#{/if}

さぶみっと！レコメンドに関するお問い合わせ

ご不明点などございましたら、お気軽に「さぶみっと！レコメンド」サポート宛て（recommend_support@dragon.jp）にご連絡ください。

サポート受付時間
平日　10時～17時（土日祝日除く）