Hola! ¡Tenemos nuestra Comunidad en Español!

JavaScript affecting multiple instances of a module on landing page

SOLVE
New Contributor

I'm trying to code a generic horizontal scroll module that ideally would be used several times on a landing page with the ability to add different content to each instance of the module. 

 

The issue I've run into is that when there are multiple instances of this module on one page they all trigger each other. Since the class/variable names of each instance of the module are the same, when you click the button to scroll one of them it scrolls all of them (see example here).

 

Is it possible to somehow add unique class identifiers for each instance of the module in both HTML/HubL and JavaScript? I've looked into using the {{name}} HubL token to leverage the unique module name but can't figure out a way I could possibly reference this in JavaScript.   

 

I have been able to get the functionality I want by creating two separate modules with different class names and JS variable names (example on this page) but was hoping there might be a way to do this for a generic module that you could easily add different content to it?

 

HTML:

<div class="horizontal-scroll-grid">
  <button class="horizontal-scroll-grid__left-button">
      <i class="horizontal-scroll-grid__button__icon fa fa-chevron-left" role="img" aria-label="Previous" focusable="false"></i>
  </button>
  
  <button class="horizontal-scroll-grid__right-button">
      <i class="horizontal-scroll-grid__button__icon fa fa-chevron-right" role="img" aria-label="Next" focusable="false"></i>
  </button>
  
  <ul class="horizontal-scroll-grid__scroll-grid">
    {% for item in module.scroll_item %}
      <li class="horizontal-scroll-grid__scroll-grid__item" style="background-image: url('{{ item.image.src }}');">
        <a class="horizontal-scroll-grid__scroll-grid__item__link" href="{{ item.link_url }}" alt="Learn more about {{ item.title }}" target="_blank">
            <h4 class="horizontal-scroll-grid__scroll-grid__item__title">{{ item.title }}</h4>
          </a>
      </li>
    {% endfor %}
  </ul>
</div>

Javascript&colon;

/* ==========================================================================
   HORIZONTAL SCROLL GRID MODULE
   ========================================================================== */

$(document).ready(function(){
 
  /* Page Setup
   ========================================================================== */
  // Make sure left scroll button is hidden by default on desktop
  $('.horizontal-scroll-grid__left-button').hide();
  
/* Events
   ========================================================================== */
  var scrollDistance = parseInt($('.horizontal-scroll-grid__scroll-grid__item').width()) + 
                         parseInt($('.horizontal-scroll-grid__scroll-grid').css('grid-column-gap').replace(/[^-\d\.]/g, ''));
  var maxScrollPosition = ($('.horizontal-scroll-grid__scroll-grid li').length - 2);
  var scrollPosition = 0; 
  
  // Handle content scrolling when left button clicked
  $('.horizontal-scroll-grid__left-button').click(function() { 
    event.preventDefault();
    $('.horizontal-scroll-grid__scroll-grid').animate({ scrollLeft: "-=" + scrollDistance + "px" });
    
    scrollPosition--; 
    
    // Hide the left button when there is no more content to scroll, otherwise show
    if (scrollPosition == 0){
      $('.horizontal-scroll-grid__left-button').hide();
    }else if (scrollPosition > 0 && scrollPosition < maxScrollPosition){
      $('.horizontal-scroll-grid__left-button').show();
      $('.horizontal-scroll-grid__right-button').show();
    }
   });
  
  // Handle content scrolling when right button clicked
  $('.horizontal-scroll-grid__right-button').click(function() {
    event.preventDefault();
    $('.horizontal-scroll-grid__scroll-grid').animate({ scrollLeft: "+=" + scrollDistance + "px" });
    
    scrollPosition++; 
    
    // Hide the right button when there is no more content to scroll, otherwise show
    if (scrollPosition == maxScrollPosition){
      $('.horizontal-scroll-grid__right-button').hide();
    }else if (scrollPosition > 0 && scrollPosition < maxScrollPosition){
      $('.horizontal-scroll-grid__left-button').show();
      $('.horizontal-scroll-grid__right-button').show();
    }
  });
  
  // Reset grid when window is resized 
  $(window).resize(function() {
     scrollPosition = 0; 
    scrollDistance = parseInt($('.horizontal-scroll-grid__scroll-grid__item').width()) + 
                       parseInt($('.horizontal-scroll-grid__scroll-grid').css('grid-column-gap').replace(/[^-\d\.]/g, ''));
    
    $('.horizontal-scroll-grid__scroll-grid').scrollLeft(0);
   
    if ($(window).width() < 1024){
      $('.horizontal-scroll-grid__left-button').hide();
      $('.horizontal-scroll-grid__right-button').hide();
    }else{
      $('.horizontal-scroll-grid__left-button').hide();
      $('.horizontal-scroll-grid__right-button').show();
    }
  });
}); 

  

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Advisor

Hey!

 

What I often do in these cases is use {{ mid }} to generate a unique ID for that instance of that module (check out this workaround) and then use that in my JavaScript.

 

You could either pull it in your script by adding the ID to a data attribute or you can add some of your script to <script> tags in the HTML using require_js so that you can access the HubL there. 

 

I hope that helps!

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

2 Replies 2
Highlighted
Regular Advisor

Hey!

 

What I often do in these cases is use {{ mid }} to generate a unique ID for that instance of that module (check out this workaround) and then use that in my JavaScript.

 

You could either pull it in your script by adding the ID to a data attribute or you can add some of your script to <script> tags in the HTML using require_js so that you can access the HubL there. 

 

I hope that helps!

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

New Contributor

Thanks so much, Stephanie! This looks like exactly what I need. 

Reply
0 Upvotes