Manual widget rendering method

Description

retailrocket.markup.render() is a method that allows you to manually control the rendering of markup blocks with recommendations on a web page.

In this article, we will analyze in detail how automatic rendering works, why retailrocket.markup.render() is needed, and how to use it.

How does automatic rendering of markup blocks work?

When the page loads, the main Retail Rocket tracking code performs the following steps:

1. Search for markup blocks: From the moment the tracking code is loaded, it scans the page every 100 milliseconds, looking for elements with the data-retailrocket-markup-block attribute, and continues to do so until the page is fully loaded.
2. Loading layout and recommendations:
   • For each found block, the code:
   • Retrieves the block's layout by its ID
   • Determines the recommendation algorithm specified in the block
   • Requests recommendations and populates the block with content.
3. Stopping the search: After the DOM Content Loaded event (when the HTML is loaded and the DOM fully built), the tracking code stops searching for new blocks.

Important

If a markup block appears on the page after DOMContentLoaded, automatic rendering will not process it. This is where retailrocket.markup.render() is needed.

Why is retailrocket.markup.render() needed?

Automatic rendering only works for blocks that are present on the page before the DOMContentLoaded event. However, on modern websites, situations often arise when blocks are added dynamically or the page is not reloaded. The retailrocket.markup.render() method solves this problem by allowing you to manually initialize and display markup blocks. Here are the key reasons for its use:

• Dynamic addition of blocks after page load: If a block appears after DOMContentLoaded (for example, in a pop-up form loaded via Ajax), the tracking code will not see it. Calling retailrocket.markup.render() forces such a block to render.
• Single Page Application (SPA): In SPA, pages are not reloaded during navigation, and DOMContentLoaded is triggered only once on the first load. With each transition to a new "page", you need to call retailrocket.markup.render() to display the blocks.
• Updating existing blocks: If the content of a block needs to be updated (for example, when the cart state changes), re-calling retailrocket.markup.render() allows the block to be re-rendered with new recommendations.
• Adding blocks by user action: Blocks may not appear immediately, but upon certain actions: scrolling the page, clicking a button, or opening a pop-up. After adding such a block, you need to call retailrocket.markup.render().
• Sites without page reloads: If the site does not refresh the page during transitions (for example, when scrolling or switching tabs), automatic rendering will not work. In such cases, retailrocket.markup.render() must be called manually after adding the blocks.

Note**

The method does not return any value (undefined is returned), which is normal. To ensure that the block is displayed, visually check the page and that the block has the initialized=”true” attribute added.

How to use retailrocket.markup.render()?

To use the method correctly, follow these steps:

1. Remove the initialized="true" attribute: If the block container has the initialized="true" attribute, remove it. This attribute signals that the block has already been rendered, and its presence can block re-rendering.
2. Reset the duplicate filter (if necessary): If you are updating a block and want to show new recommendations, even if they match previous ones, run: delete retailrocket.modules.duplicates;
3. Call the method: retailrocket.markup.render();