Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

Preview Badges installation on any Collection (js generated)

Modified on: Tue, 30 Apr, 2019 at 4:36 PM


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 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 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



Did you find it helpful? Yes No

Can you please tell us how we can improve this article?

More articles in Preview Badge