Hide Preview Badges on related product pages

If a snippet (e.g. snippets/product-info.liquid) is generating both, products on collection pages and related product pages, but you only want the Preview Badge to display on the collection pages, please add the following code:

{% if template == 'collection' %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
{% endif %}

around {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}

Improve the look of Preview Badge on mobile phones

Sometimes on the very small screen, the preview badges can be split awkwardly into 2 lines. Please add this code to make sure that it is split into 2 lines, 1 for the stars and the other for the number of reviews:

@media (max-width: 500px) {
  .jdgm-prev-badge__text {
    display: block;
  }
}

Empty Preview Badges don't load for additional products on the collection pages ("Show More" products)

By default, if you click on the "Show More" button on the collection pages, products without reviews will not show any Preview Badges, even if the Preview Badge is enabled. This is because we don't include meta fields for products that don't have any reviews.

If you select to show empty Preview Badges (not a default setting), we will not hide the badge if a product has no reviews.

Additional products ("products loading after you click "Show more") can receive empty Preview Badges via a script.

The script will render the badge 3 seconds after you click on Show More. So if the page load is very slow, Preview Badges for "empty products" may still not show up.

document.addEventListener('DOMContentLoaded', function() {
  jdgm.$('.show_more_wrapper').click(function() {
    console.log('click');
    setTimeout(function() {
      var new_empty_badges = $('.jdgm-preview-badge:not(.jdgm--done-setup)');
      console.log(new_empty_badges.length);
      jdgm.asyncEach(new_empty_badges, function($prevBadge) {
        $prevBadge = $($prevBadge);
        if ($prevBadge.find('.jdgm-prev-badge__stars').length <= 0) {
          $prevBadge.append(jdgm.templates.emptyBadge());
          jdgm.buildStarsFor($prevBadge.find('.jdgm-prev-badge__stars'), 0);
        }
      });
    }, 3000);
  });
});