Hide recommendations blocks when they are no products in the recommendations



  • Reinis Volosins

    Hey Manuel,

    In order, to achieve action - hide recommendations widget, when there are no products in it, You can use a javascript function, which checks product count in the widget and if it's 0, then hide recommendations element.

    To do so, after checking Your link, I can suggest you a function like this.

    function hideEmptyRecommendations() {
    var rootNode = document.getElementById('dy-recommendations-${dyVariationId}');
    // Wait for product wrapper element, which holds a product elements
    DYO.waitForElementAsync('#dy-recommendations-${dyVariationId} .dy-recommendations__slider-wrapper').then(function(elements) {
      // Check if, there are 0 products inside product wrapper element
      if (elements[0].childElementCount === 0) {
        // If so, we set display to none for root element, which means, widget will be hidden.
        rootNode.style.setProperty('display', 'none');

    After You place this function inside Your recommendations Javascript tab, make sure You also call it, using - hideRecommendationsIfEmpty();

    Comment actions Permalink
  • Manuel Fuechslin

    Hello Reinis

    Thanks for your solution. I tried it on our staging environment. But  somehow this does not work.

    How do i have to call it? doesn't this also have to be in the Recomendations Javascript Tab?



    Comment actions Permalink
  • Manuel Fuechslin

    Included it on Production enviroment and it looks like it works. Thanks

    Comment actions Permalink

Please sign in to leave a comment.