How to access to the ID of the current Custom Module?
SOLVE
I am trying to use more than 1 CM called "Image + Text" module.
The thing is that I would like to style each of the CMs in a different way.
Thus, I need to inject a CSS inside the CM code.
But when I do that, I should find a unique way of doing it.
What I have in mind is to place an ID input in the CM and ask for it on page edit level.
That way the following logic works. But how can I do it without an input parameter?
How to access to the ID of the current Custom Module?
SOLVE
Hi,
I've been doing this for a year or two. If I understand correctly the point here, you can do that:
<div id="my_prefix_id_{{ name }}">Stuff</div>
<style>
#my_prefix_id_{{ name }} {
color: purple;
}
</style>
<script>
document.getElementById('my_prefix_id_{{ name }}').style.color = "purple";
</script>
Here, the code is visible in the source of your page. But if you want the code to appear in its respective files, do this:
<div id="my_prefix_id_{{ name }}">Stuff</div>
{% require_css %}
<style>
#my_prefix_id_{{ name }} {
color: purple;
}
</style>
{% end_require_css %}
{% require_js %}
<script>
// You can use this value in a global js script.
let my_id = 'my_prefix_id_{{ name }}';
</script>
{% end_require_js %}
This isn't currently possible; there isn't a way to dynamically reference the current module. I can totally see the use case for that, though; I've passed this feedback along internally, but if you have the inclination, I would encourage you to check out the Ideas Forum on the HubSpot Community. There, you can create a post including your use case that product and other customers can see.