🛍️ 商品表示中級

商品レビューバッジの表示

Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。

用途

商品詳細ページで顧客レビューの星評価とレビュー数を視覚的に表示したいとき。Loox または JudgeMe のいずれかを導入済みの場合に使える。

設置場所

snippets/product-rating-badge.liquid に配置し、sections/main-product.liquid または product.liquid の商品情報エリア内で `{% render 'product-rating-badge', product: product %}` で呼び出す。

注意点

Loox と JudgeMe のメタフィールドが商品に設定されていることが前提であり、アプリをストアにインストール済みでないと空のバッジが表示されるだけになる。jm_style 変数は外部で定義されていることを想定しているため、JudgeMe バッジが非表示になる場合は section または theme settings で `jm_style: ""` の初期値を確認する。両アプリのバッジ表示タイミングが異なるため、ページ読み込み後に JavaScript で初期化される仕様に注意する。

タグ:productratingreviewmetafieldlooxjudgeme

コード

9 行 / liquid

{% comment %} 
  Loox
{% endcomment %}
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>

{% comment %} 
  JudgeMe
{% endcomment %}
<div style="{{ jm_style }}" class="jdgm-widget jdgm-preview-badge"  data-id="{{ product.id }}">{{ product.metafields.judgeme.badge }}</div>

出典・ライセンス

Source:: kondasoft/ks-bootshop/snippets/product-rating-badge.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

このコードは kondasoft 著作の MIT ライセンスソースです。原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

商品レビューバッジの表示

コード

出典・ライセンス

関連項目

商品ブロック内のLiquid実行

商品ページの見出し

定期販売プランのデータ属性を動的に生成

商品ページの区切り線

商品画像のプリロード出力

商品バリアント選択ラジオボタン