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: Wed, 13 Nov, 2019 at 10:20 AM


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



Add the preview badge to the recently viewed section.


1. Enable https://judge.me/settings?jump_to=platform-independent+review+widgets  (Save)


2. Copy the first line 



3. Go to theme.liquid file => paste the code after include judgeme core



4. Go to recently-viewed-template.liquid file 


Paste the placeholder: <div class='jdgm-widget jdgm-preview-badge' data-id='${id}'></div>



(make sure it gets the correct product id)


5. Add the script to the product-template liquid file. (the file associated with the current product page)


<script>



  $(document).ready(function(){

    setTimeout(function(){

      jdgm.loadBadgesInContainer(".recently-viewed-products");

    }, 3000);

  })

  

</script>




(the class is the container of the preview badge - please use inspect to get the class)


Did you find it helpful? Yes No Still have questions? Talk to us here

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

More articles in Preview Badge