Rapid Reviews / Stars: reviews preview

Stars: reviews preview

The Stars: reviews preview app block is to be used with a product grid. It will show a list of latest/featured reviews when hovering over a star rating.

This widget requires two things:

  1. The scripts below
  2. Active star rating selectors that include the data-id attribute by using the Product: stars near title or Product: stars in grid

~CE

{% liquid
  assign thisProduct = null
  assign thisProduct = product
  unless thisProduct
    assign thisProduct = card_product
  endunless
%}
{%- if thisProduct %}
  <div class="rapid_reviews_stars_badge" data-entity_id="{{ product.id }}"></div>

  <script>
    function setPreviewData (entityId, data) {
      window.rr_stars_preview_data = window.rr_stars_preview_data || {};
      window.rr_stars_preview_data[entityId] = data
    }
    setPreviewData({{ thisProduct.id }}, {{ thisProduct.metafields.rapid_reviews.data.value.r | json }})
  </script>
{% endif %}

<script>
  ;(function(){
    if (window.r_sp_loaded) return; window.r_sp_loaded = 1;
    var rvsc = document.createElement('script'); rvsc.type = 'text/javascript'; rvsc.async = 'true';
    rvsc.src = 'https://belk.ngrok.io/api/reviews/files/{{ shop.permanent_domain }}/rapid-reviews-stars-preview';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(rvsc, s);
  })();
</script>
HTML