jsonを使ったレビューデータの表示(平均値、合計値)


サイト内でレビューの平均値、レビューの合計値を取得、表示するためのコードを追加します。

1️⃣表示用に用意するコード

2️⃣基本的な取得用コード

3️⃣取得した値を表示させるコード

4️⃣上記一部のパラメータを利用した例

5️⃣取得した数値にテキストを追加した例


表示用に用意するコード

<div class="○○○"></div>

📖 ○○○は任意のクラス名を入力します。(例 ".ukomi_review_average"や".ukomi_review_total"など)

📖 表示用コードは<body></body>タグ内<script></script>タグ外、任意の場所に入力します。

基本的な取得用コード
<script>
$.ajax({
     url: "<https://api.u-komi.com/products/API_KEY/PRODUCT_ID/false/review_summary>",
     contentType: "application/json",
     type: "POST",
})
.done(function (json) {
     "この中に下記(★)の処理が入ります"
});
</script>

☝ 【API_KEY】はU-KOMI管理画面から確認できるAPIキーを入力します。

☝ 【PRODUCT_ID】は商品IDを入力します

json(上記基本的な取得用コード)タグを設置する際はU-KOMIタグとjQueryタグ( [jQuery v1.12.4以上](<https://developers.google.com/speed/libraries/#jquery>) )の後に設置する必要があります。

(★)取得した値を表示させるコード
var ▲▲▲ = ×××;
$('○○○').html(▲▲▲)

☝ ▲▲▲は任意の変数名を目的に応じて入力します。(例 "average"や"total"など)

☝ ×××は目的に合わせて以下のコードを入力します。

📖 json.data.average_ratings.toFixed(2) ➡ レビューの平均値を少数点第二位まで取得 json.data.total_reviews ➡ レビュー総数を収得

☝ ○○○は先程表示用のコードで入力した任意のクラス名を入力します。(例 ".ukomi_review_average"や".ukomi_review_total"など)

上記一部のパラメータを利用した例(レビュー合計値を取得し表示するコード)
<script>
    $.ajax({
       url: "<https://api.u-komi.com/products/API_KEY/PRODUCT_ID/false/review_summary>",
       contentType: "application/json",
       type: "POST",
    })
    .done(function (json) {
       var total = json.data.total_reviews;
       $('.ukomi_review_total').html(total)
    });
 </script>

☝ 【API_KEY】はU-KOMI管理画面から確認できるAPIキーを入力します。

☝ 【PRODUCT_ID】は商品IDを入力します。

取得した数値にテキストを追加した例(レビュー平均値を取得し表示するコード)
<div class="ukomi_review_average"></div>

<script>
    $.ajax({
       url: "<https://api.u-komi.com/products/API_KEY/PRODUCT_ID/false/review_summary>",
       contentType: "application/json",
       type: "POST",
    })
   .done(function (json) {
                var average = json.data.average_ratings.toFixed(2);
                $('.ukomi_review_average').html(`この${average}の前後にテキストやhtmlタグを自由に加えられます。`)
            });
 </script>

☝ 【API_KEY】はU-KOMI管理画面から確認できるAPIキーを入力します。

☝ 【PRODUCT_ID】は商品IDを入力します。