Troubleshooting Preview Badges | Judge.me

Troubleshooting Preview Badges

Hide Preview Badges on Product Pages > Related Products

If a snippet (e.g. snippets/product-info.liquid) is generating both, products on collection pages and related products (product page), but the preview badge should only show on collection pages but not product 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 %}

Improving the look of Preview badges on mobile phones

Sometimes on 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 collection pages ("Show More" products)

By default, if you click on Show More (Collection pages), products without reviews will not show any badges, even if you enabled the setting to do so. This is because we don't include metafields for products that don't have any reviews.

This will only be an issue if you select to show empty Preview Badges (not a default setting). The settings is: Hide empty preview badges: We will *not hide* the badge if a product has no reviews.

"Show more" products can receive empty Preview Badges via a script.

Example script

<script>
  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);                                     
    });
  });

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.