When a page is loaded, the Clerk.js library automatically runs the function Clerk.renderBlocks('.clerk');to render all Clerk.io Content on that page.

This function can also be run after the initial page load, to show products in an Ajax Popup.

  1. Since the function takes any class or ID as argument, start my replacing your Ajax Popup recommendations class clerk with another class. This is to prevent all Clerk.io content to be rendered again.
    An example:
<span
   class="clerk-popup"
   data-template="@powerstep-recommendations"
   data-products="[123]">

   2. In your Ajax Popup code, simply run the function on this class as a part of your
       existing Ajax script, or in its own script:

<script type="text/javascript">
   Clerk.renderBlocks('.clerk-popup');
</script>

Now you can show recommendations in your Ajax Popup, after the initial page load!

Did this answer your question?