This article is useful if one wants to add preview badges on js generated collections, like related products, also bought products, recently viewed products.

In this situation Judge.me provides the following global JS methods: 

  1. jdgm.batchRenderBadges(data)
  2. jdgm.batchRenderBadgesWithCallback(data, callback)
  3. jdgm.renderJsBadge(averageRating, reviewCount, badgePlaceholder)

In both 1 and 2, the data is an array of hashes [ { productHandle: 'xxx',  badgePlaceholder: domElemend },  ].  For each handle the badgePlaceholder should be unique (especially if one uses  jdgm.batchRenderBadges ).

In 2, the callback is a function defined by the user and it must have the following parameters (averageRating, reviewCount, badgePlaceholder, productHandle). The badgePlaceholder and productHandle passed to the callback are the same as the ones used in the data.

Example of usage with user-provided callback

Add the badge placeholder where you want the badges to display

<div class='jdgm-badge-placeholder' data-handle='{{ product.handle }}'></div>

    Add js code to render the badges after page is loaded (possible file theme.js or bottom of theme.liquid inside <script> </script> tags)

renderBadge = function(averageRating, reviewCount, badgePlaceholder, productHandle) {
  var $badge;
  $badge = $(badgePlaceholder);
  $badge.text('rating of ' + averageRating + ' from ' + reviewCount + ' reviews');
};

document.addEventListener('DOMContentLoaded', function(){ 
  var data;
  data = $.map($('.jdgm-badge-placeholder'), function(element) {
    var hash = {};
    var $element = $(element);
    hash['productHandle'] = $element.data('handle');
    hash['badgePlaceholder'] ='.jdgm-badge-placeholder[data-handle="' + $element.data('handle') + '"]';
    return hash;
  });
  // wait for a bit to make sure out js is loaded
  setTimeout( function(){
    jdgm.batchRenderBadgesWithCallback(data, renderBadge);
  }, 500);
});

Now your collection will have a textual badge below the product title

Example of usage with Judge.me badges

Add the badge placeholder where he wants the badges to display

<div class='jdgm-badge-placeholder' data-handle='{{ product.handle }}'></div>

    

Add js code to render the badges after page is loaded (possible file theme.js or bottom of theme.liquid inside <script> </script> tags)

document.addEventListener('DOMContentLoaded', function(){ 
  var data;
  data = $.map($('.jdgm-badge-placeholder'), function(element) {
    var hash = {};
    var $element = $(element);
    hash['productHandle'] = $element.data('handle');
    hash['badgePlaceholder'] ='.jdgm-badge-placeholder[data-handle="' + $element.data('handle') + '"]';
    return hash;
  });
  setTimeout( function(){
    jdgm.batchRenderBadges(data);
  }, 500);
});

Your collection will have the Judge.me badges