Hello
I have a question about using modules. When I use different custom modules in a template, they affect each other(HTML, CSS, JS). Does anybody know how I can solve it?
for example 3module in one landing page.
Thanks
Maryam
I don’t know that you can scope JS, but you can scope CSS with the {% scope_css }% {% end_scope_css%} HUBL tags. That way the CSS will only apply to that module. That HubL and CSS would be placed inside the HubL section of your module and not the CSS section.
You would need to write you Javascript in such a way as to not affect other elements on your page and that when the user interacts with the module the effects are limited to one instance of the module. Generally this is achieved with, for example clicks, selecting parent/children from the clicked element to manipulate instead of selecting elements by class name alone.
Know that if your module is loaded multiple times on a page, the CSS and Javascript is only loaded once in the module.
@LeeBartelme is spot on.
I’d add that what I’d usually do to “scope” my js manually would be to give the parent element of my module an id=“{{name}}” then use a {% require_js %} and target any elements like ‘#{{name}} .child’
Barry Grennan