Hide recommendations blocks when they are no products in the recommendations

Follow

Manuel Fuechslin

• July 16, 2020 06:04

We use multiply recommendation blocks on the Page. They all work pretty fine. But there is one issue where i don't know how i can fix it and make it better.

For Example, we have multiple recommendation lines on the Page.

1.) You could also like this

2.) Customers also bought

3.) Recently viewed

4.) More of this brand.

Now my issue is that, when I have a Product where there are not so many Products of one brand. The Block 4.) Will be empty and not show any Product. How can I hide the whole block? Does anybody have a function where i can hide the whole block if the block can not be filled with Reco's?

https://www.ochsnersport.ch/de/shop/roxy-xoxo-light-damen-snowboard-1920-multicolor-00002001772707-p.html

 

 

0

• 

  Reinis Volosins

  • July 16, 2020 11:02
  • Edited

  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();

  1

  Comment actions Permalink
• 

  Manuel Fuechslin

  • August 11, 2020 14:34

  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?

   

   

  0

  Comment actions Permalink
• 

  Manuel Fuechslin

  • August 11, 2020 15:18

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

  0

  Comment actions Permalink

Please sign in to leave a comment.