Rapid Reviews / Product: stars in grid

Product: stars in grid

Star ratings on colleciton pages require liquid in your card/grid snippets.

You can also use this same setup for individual featured products that are not in grids.

You may often choose to pair this with the Product: stars in grid app block instead of manually inserting the required core script below.

Options

Selector Attribute Output Description
.rapid_reviews_stars_badge data-count ★★★★☆ (20) Reviews count as number like data-count="20". Use this when you need to manually specify the count, like in a collection page grid item.
data-r ★★★★☆ 20 Reviews Show reviews label from translations.
data-rco ★★★★☆ (20) Show reviews count only. This may be helpful when you have a product grid on a product detail page, like a row of recommended products at the bottom of a product detail page. Sometimes showing the full label in a product grid causes wrapping, so it is undesireable.
data-label ★★★★☆ 20 Reviewerinos Show custom reviews label, like data-label="Reviewerinos".
data-rh Hide reviews count and label.
data-q ★★★★☆ 20 Reviews 7 Questions Show questions label from translations.
q_count ★★★★☆ 20 Reviews 7 Questions Questions count as number like data-q_count="20"
data-q_label ★★★★☆ 20 Reviews 7 Quandries Show custom questions label, like data-label="Quandries".
data-qh Hide questions count and label.

~CE

<!-- 
  COLLECTION PAGE LIQUID
  CORE SCRIPT NEEDED ON PAGE (FROM BOTTOM OF THIS EXAMPLE CODE SECTION)
  THIS WOULD BE AN EXAMPLE FOR ADDING PRODUCT RATINGS TO A COLLECTION PAGE PRODUCT LIST 
-->
{% liquid
  assign avg = product.metafields.rapid_reviews.counts.value.r.rating.avg
  unless avg 
    assign avg = 0
  endunless
  assign count = product.metafields.rapid_reviews.counts.value.r.counts.core.total
  unless count
    assign count = 0
  endunless
%}
{% if count > 0 %}<div class="rapid_reviews_stars_badge r_grid" data-avg="{{ avg }}" data-count="{{ count }}" data-url="{{ product.url }}" data-rco="1"></div>{% endif %}

<!-- ONLY IF NOT USING APP BLOCK WIDGET "Product: stars in grid" - CORE SCRIPT NEEDED ON PAGE -->
<script>
  ;(function(){
    if (window.r_u_loaded) return; window.r_u_loaded = 1;
    var rvsc = document.createElement('script'); rvsc.type = 'text/javascript'; rvsc.async = 'true';
    rvsc.src = 'https://apps.belkapp.com/api/reviews/files/{{ shop.permanent_domain }}/rapid-reviews-core';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(rvsc, s);
  })();
</script>

<!-- 
  ADDITIONAL CONFIGURATION BELOW 
-->

<!-- 
  COLLECTION PAGE LIQUID - WITH QUESTIONS
  CORE SCRIPT NEEDED ON PAGE (FROM BOTTOM OF THIS EXAMPLE CODE SECTION)
  THIS WOULD BE AN EXAMPLE FOR ADDING PRODUCT RATINGS TO A COLLECTION PAGE PRODUCT LIST 
-->
{% liquid
  assign avg = product.metafields.rapid_reviews.counts.value.r.rating.avg
  unless avg
    assign avg = 0
  endunless
  assign countReviews = product.metafields.rapid_reviews.counts.value.r.counts.core.total
  unless countReviews
    assign countReviews = 0
  endunless
  assign countQuestions = product.metafields.rapid_reviews.counts.value.q.counts.core.total
  unless countQuestions
    assign countQuestions = 0
  endunless
%}
{% if countReviews > 0 and countQuestions > 0 %}<div class="rapid_reviews_stars_badge" data-avg="{{ avg }}" data-count="{{ countReviews }}" data-url="{{ product.url }}" data-q="1" data-q_count="{{ countQuestions }}"></div>{% endif %}

<!-- 
  MANUAL INIT AFTER CORE SCRIPT EXECUTED
  E.G. MAYBE YOU HAVE A MODAL THAT IS TRIGGERED ON CLICK
-->
<script>
  window.rr_drawStarsBadge()
</script>

<!-- 
  IN THE CASE WHERE YOU NEED TO PRE-RENDER STARS WITHOUT JAVASCRIPT
  E.G. MAYBE YOU'RE USING AUTO-SCROLL ON COLLECTION PAGES
-->
{% liquid
  assign avg = product.metafields.rapid_reviews.counts.value.r.rating.avg
  unless avg 
    assign avg = 0
  endunless
  assign count = product.metafields.rapid_reviews.counts.value.r.counts.core.total
  unless count
    assign count = 0
  endunless
%}
{% if count > 0 %}
  {%- assign width = avg | divided_by: 5.0 | times: 100 -%}
  <div class="rapid_reviews_stars_badge r_grid" data-avg="{{ avg }}" data-count="{{ count }}" data-url="{{ product.url }}" rd="1">
    <a href="{{ product.url }}" tabindex="0" aria-label="Product rating {{ count }} reviews">
      <span class="r_stars">
        <span class="r_stars_inner">
          <span class="r_stars_on" style="width:{{ width }}%"></span>
        </span>
      </span>
      <span class="r_count">({{ count }})</span>
    </a>
  </div>
{% endif %}
HTML