Setup Preview Badge for products rendered by JavaScript (AJAX) | Judge.me

Setup Preview Badge for products rendered by JavaScript (AJAX)

In some cases, your collection pages can have pagination or infinite scroll, which load more products using JavaScript without reloading the whole page. Then our Preview Badge need an extra theme fix to work proper.

We have different solutions depending on how you load more products with JavaScript.

Case 1 - By fetching and parsing the collection page

If your JS fetches the whole collection page again and extracts the needed content out of it, our fix is straightforward because you should already have most of our widget's HTML content needed.

The fix will be as easy as adding 2 JavaScript lines into the position following the JavaScript code of your theme that renders more products. The 2 JavaScript lines that you'd need to add:

judgeme.badge();
judgeme.customizeBadges();

Case 2 - By fetching from a different server

If your JS fetches product data from a different server, you couldn't have our widget's HTML content, but you should have the product handles.

Our fix for this case is a little more complicated and can work for Shopify merchants only. You'd need to call our special JS function:

if (window.jdgm && jdgm.batchRenderBadges) {
  jdgm.batchRenderBadges(productDetails)
}

// productDetails is an JS array of objects like this: 
//   [{ productHandle: 'handle-1', badgePlaceholder: domEle1 }, { productHandle: 'handle-2', badgePlaceholder: domEle2 }]