Sharing Macros between Modules?

[cbeyer]

Okay! Here’s the situation. I’m building a set of templates, and I’m using the new design manager beta (which I love, by the way). I’m creating modules at the upper level, to make it easy for our content people to edit, but I have smaller shared elements that I’m not totally sure how to handle.

There’s a little box with an icon (a little play icon) and some text (needs to be editable -- it’s a timestamp in some places, the words “Now Playing” in another, etc). It has fairly specific markup and CSS needed (for the sake of the argument, let’s say the icon animates). I’m calling it a “Video Flag”.

My first thought was to use the new module system and make this Video Flag a module, so that the CSS is attached to the markup. However, when I tried to include the Video Flag module inside another module (“Videos List”), I got the error that

"module" is disabled in this context

So, fine. My next thought was to create a Macros file, and create the Video Flag markup as a macro (at that point, I’d given up on keeping the CSS with it -- I can add that to the stylesheet for all the pages if I have to, although if there’s a way to keep them all together I’d be excited about that). I figured I could probably import the template with the macros into my module HTML, but no luck there either --

"import" is disabled in this context

SO. I can create the macro directly at the top of the module, but I also want to use it in another module on the same page, and I don’t want to define it twice if I don’t have to. I tried defining the macro in the index.html file, for use in the modules, but that didn’t seem to work either.

What’s the best way to approach this? It seemed like nesting modules would be the best solution, but hubl doesn’t want me to do that. I could also just do the obvious thing, and write the dang code in both modules, but that’s not fun

[tjoyce]

@cbeyer - Very common question and I think we all would like the ability to nest modules without running into scoping issues. Usually, what I do to solve this is to have just a flex column that allows your users to drop in modules as they want, in the order they want.

This isn’t a perfect solution and definitely limits your ability to create modules on a more atomic level but, it’s kinda the best you got (hopefully, for now).

---

If this answer helped, please, mark as solved

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[cbeyer]

@tjoyce Hmmm. Makes sense, and I’m relieved to hear this is a common question. Regardless, thanks!

I’m not totally sure what you mean though about the flex column -- would I have to split up my other modules around this one, so that they’re stacked? In my ideal world, this one is absolute-positioned within the other ones.

To complicate matters, I was hoping to use this within one of the amazing new repeating field groups (i.e. there’s a field in a video-fields-group for “video duration”, the duration string gets passed to the “video flag” as a parameter or something, and then the parent module loops through all the videos-fields-groups).

It might be that I just have to do this the simple-but-not-as-elegant-as-I-think-it-should-be way

[andre9000]

Actually it seems possible now. If you have a design you want to reuse, you can make it a macro that you import to other modules.

Example macro.html:

{% macro bar(heading, subheading) %}
<h1>{{ heading }}</h1><p>{{ subheading }}</p>
{% endmacro %}

Example module.html:

{% import "Custom/macros.html" as foo %}

<div>
some content goes here
{{ foo.bar(module.heading, module.subheading) }}
</div>

--------------------------

If you want to avoid passing countless parameters to the macro, you can also do it like this:

Example macro.html:

{% macro bar(obj) %}
<h1>{{ obj.heading }}</h1><p>{{ obj.subheading }}</p>
{% endmacro %}

Example module.html:

{% import "Custom/macros.html" as foo %}

<div>
some content goes here
{{ foo.bar(module.heading_and_subheading) }}
</div>

‘heading_and_subheading’ would be a group in the module that contains ‘heading’ and ‘subheading’. You pass that group directly to the macro.

You’d just need to enforce standards in naming accross the different modules that use that macro.

Note I tested this with Email modules, not page modules.

[arinker]

Import is working now for page modules, but a warning pops up, stating that using 'import’ is not recommended in this context.

**

**

I totally disagree with that warning. The usage of import in modules is absolutely necessary to reuse common macros in modules. Otherwise you will get poorly maintainable code!

This should be reflected in the docs as well. I would be happy to provide some usage scenarios and examples to illustrate this.

[dcronk]

Couldn’t agree more, importing macros into modules seems like a must for re-usability in the system. With the deprication of nested modules, there needs to be some source of code that can be reused globally so we can develop more efficiently. @arinker Are you using it this way along with the warning and found no issues? With updating my site, I’m not wanting to go down any rabbit holes that I’m going to regret when HubSpot decides this isn’t supported. Thanks.

[arinker]

@dcronk

Sorry for the late response. I just came across your question today.

I’m working with import in modules for month now. I did not find any pitfalls until now. It just works.

Best,

Arno

[dperolio]

This seems to still be a thing. It works fine, but it does give a warning in modules. I’m not sure if that would prevent a theme from being submitted to the marketplace, if that’s of concern to you.

I’ve found a better solution for my use-case though, and that is to just import the macros in a shared template base, and then they can be accessed “globally”, even inside of modules. Works great, except for the module previewer.