Frontend

Recommendation Widgets

3min

Magento Enterprise Edition (Adobe Commerce) has a feature called Dynamic Blocks. These blocks are not present in Magento’s full page cache, they are rendered after a page load and can be used to show blocks only to certain customer groups. This caused issues with recommendations as the javascript had already fired before these blocks loaded, causing them not to render.

When adding 2 recommendation banners to the same page often the second will not render as the first banner causes Klevu's javascript to fire before it is aware of the second.

To avoid these issues, rather than merchants entering the following to create the recommendations banner

HTML


this has to be changed to

HTML


The first div loads content faster, but may not work in every scenario. The second div will always work, but loads the recommendations banner after the page is rendered.

The manual approach to adding these banners can still be taken, however we have created a widget to add recommendations to the site that will handle this.

To add a recommendations widget (there are other ways, this is just one example):

  • Login to the Admin
  • Navigate to Content > Elements > Widget
  • Click Add Widget
  • From the Type dropdown select Klevu Recommendations.
  • From the Design Theme dropdown select your theme.
  • Click Continue
  • Enter a Widget Title
  • Enter Sort Order (optional)
  • Set Layout Update - i.e. where the widget will appear.
  • Click the Widget Options tab.
  • Enter your Klevu Recommendations ID e.g. k-a123b45c-copy-this-code-6789d01e23f4
  • Enter a Block Title (optional). You can add titles in KMC, however this enables a merchant to use the same banner with different titles on different pages/stores.
  • Select if this widget Requires Power Up. (Yes: will add the extended code above that will work everywhere. No: will add the single line of HTML, loads faster, but may not work in every situation)
  • Click Save

A cache flush may be required to see the output on the frontend.

If you experience any issues with recommendation banners not loading as expected try switching Requires Power Up to Yes