Getting two slider recommendations in same variation

Follow

Ben Zitney

• October 15, 2021 23:25
• Edited

Has anyone been able to mash pieces of the Slider & Tabbed rec templates to get 2 rec sliders in the same variation?

I'm trying to modify the Slider template using the ${#First Tab} & ${#Second Tab} tags from the Tabbed template to let me get two rows of recs, each with their own strategy.

I'm able to get the two sets of recs to show up, but after a couple hours of experimenting, I'm not able to get both sets of recs to work as functional sliders. At best, I was able to get one to work, but never both.

I tried to use some of the advice from the first answer here: https://stackoverflow.com/questions/32118999/how-can-i-have-multiple-swiper-slideshows-on-a-single-page/56988509, but the DY setup for the slider.js sliders is (understandably) a little more complicated than the simpler solution shown on that thread, and I wasn't able to make it work. Although that may have been something wrong with what I was doing.

Anyone have any advice on how to get this to work? If not, what's the most straightforward method you've used to get two rec sliders into the same variation?

0

• 

  Permanently deleted user

  • October 18, 2021 20:13

  Hey Ben Zitney,

  Adding ${#First Tab} & ${#Second Tab} tags from the Tabbed template is the correct approach. Like you said, this will let you get two rows of recs, each with their own strategy.

  Getting both recs work as functional sliders will require HTML/CSS/JS updates to the OOTB Slider template. See below.

  HTML updates:

  1. Duplicate the existing HTML to create a second recs tray
  2. Change the outer div's id (dy-recommendations-${dyVariationId}) to a class attribute and add additional class names to each of the trays: 'first' and 'second', respectively
  3. Change the ${#Recommendations} tags to ${#First Tab} and ${#Second Tab}, respectively. Make sure to set these variables types as 'Strategy Title'. This will allow you to select a strategy from the strategies created in your section:
     

  CSS updates:

  1. Change all #dy-recommendations-${dyVariationId} to .dy-recommendations-${dyVariationId}. That will apply the slider's CSS rules to both widgets:
     

  JavaScript updates:

  1. Change line 7 to query the recs container by class name (instead of id)
  2. Duplicate lines 7-8 and to query the 'second' recs tray. Include the added class names 'first' & 'second' to each of the queries
  3. Init the second recs slider from within initSlider(), passing the container's element, respectively to the getSliderOptions() function:
     
  4. Update getSliderOptions() to accept a parameter 'cont'. Then update the 'navigation' and 'pagination' objects to point to the 'cont' parameter. That will configure the scrolling settings for each of the recs trays:
     

  Let me know if you have questions. I can add the sample code in a separate comment.

  0

  Comment actions Permalink
• 

  Ben Zitney

  • October 18, 2021 21:05

  @... you are my savior! Thank you!!!!

  0

  Comment actions Permalink
• 

  Ben Zitney

  • October 18, 2021 22:47
  • Edited

  Note for anyone using this solution in the future: I also had to update the following section:

  Before

    settings.forEach(function(item) {
      var el = container.querySelector(item.el);
      for (var key in item.data) {
        if (item.data[key]) {
          el.classList.add(key);
        }
      }
    });

  After

  settings.forEach(function(item) {
      var containers = [container, containerTwo];
      containers.forEach(function(cont){
        var el = cont.querySelector(item.el);
        for (var key in item.data) {
          if (item.data[key]) {
            el.classList.add(key);
          }
        }
      });
  });

  0

  Comment actions Permalink

Please sign in to leave a comment.