EcoWeb -Website design Services

A Common Problem nowadays faced by many Hubspot Developers is to target many Instances of a single module when we want to target them separately by adding a unique ID we can do many things and can make a HubSpot module more user-friendly.

You can create an ID using the following HubL snippet:

{% set mid = module | pprint | md5 %}

 

Use Cases


  • You can give style options in the module by giving them a unique style for example you can also control the hover style of different instances as per you need
  • Sometimes as a developer you have come across a situation when you have to have more than one slider on a page I am taking the example of the slick slider  it usually create a problem when you target them with the same selector like CSS class for example Unique id can help you to solve this problem.

You can use the unique id like this:

<div id="section-{{ mid }}">
  Write your custom module code here
</div>

{# css #}
{% require_css %}
   #section-{{ mid }} {
      display: block;
      ...
   }
{% end_require_css %}

{# js #}
{% require_js 'footer' %}
<script>
document.addEventListener("DOMContentLoaded", function() {
   var module = document.querySelector('#{section-{{ mid }}');
   // Do things with this instance of module
});
</script>
{% end_require_js %}

 

Output will be something like this:

<div id="section-6219837888e9769f1d695d05b73a8256">
  Write your custom module code here
</div>

{# css #}
{% require_css %}
   #section-6219837888e9769f1d695d05b73a8256 {
      display: block;
      ...
   }
{% end_require_css %}

{# js #}
{% require_js 'footer' %}
<script>
document.addEventListener("DOMContentLoaded", function() {
   var module = document.querySelector('#section-6219837888e9769f1d695d05b73a8256');
   // Do things with this instance of module
});
</script>
{% end_require_js %}