Common code

[Cadriel]

Hi.

I have a requirement for a common code block that is re-usable across templates and modules. For this example, it's called a button.

The button has complex HTML requirements in this case, so it needs to render and behave differently based on some variables you pass it. For example, classes change depending on its required size.

So - this is a good example whereby we could employ the use of a macro - give it a bunch of arguments, and have it render how we want.

However - buttons get used in a lot of places. Primarily, inside templates - but also inside some modules. For example, we have a module that renders a video - with a button beside it.

You can't import macro's or modules inside other modules.

So, how do I accomplish a goal - whereby I have common code that I need to be able to import in both a template and / or module?

If there is no way, is the expectation to duplicate code across all modules that would need this?

[Jsum]

@Cadriel,

I would first suggest hard coding your button options into your main site stylesheet. Create a general set of style rules for your button(s) then create rules specific to the options. Set these rules under unique names:

.btn.btn-blue {}
.btn.btn-red {}
btn.btn-wide {}
etc.

Then you an use a choice field in any module to allow the user to choose the 'style', and therefore the class names from your stylesheet, directly in the editor. Once you do this once it won't take much time to duplicate through as many moduled as needed. Just a choice field, a url or page field, and link title field. 

Need help? Hire Us Here

[Cadriel]

Hi Jsum,

Thanks for your response! 🙂

However - it doesn't really answer the question. My buttons already work in this way .. you simply apply a class to define an option to the button.

But - I still have to duplicate the code for what you're describing in every single module that I want to use a button in. Is there a way around this?

[Jsum]

Yes @Cadriel a centralized style sheet like I described above. That solves your problem exactly. Don't over think it.

[Cadriel]

I'm not really over thinking it.

The button was an over simplified example. The core question still remains, which is what do we do when we have a need for complex HTML that needs to be re-usable across modules and templates?

It would seem to me that macro's are pretty close to this - but are not re-usable inside modules.

[Jsum · Accepted solution]

On one hand you describing a module perfectly and on the other hand your describing some kind of sub module that doesn't exist. Your not the first person I've seen ask for a way to share code and fields between modules, but it isn't a feature. Still though, I've built tons of templates, at least 50 with the new design manager, and there is very little that you won't find a solution to. 

Look in the hubl docs for macros and calls. Macros work in custom modules, but I'm not sure if importing a macros sheet works, I haven't needed to try that. You can make things pretty messy using this method, but if you customization needs are beyond what the custom module interface allows then this will probably help.

Keep in my that you can use custom module fields to create logic around blocks of HTML, customize class names, elements, etc. If you know what options you need you should have no problem creating a choice field of those options, or multiple choice fields, in the custom module. You will always have to copy and paste your code between modules and recreate fields, at least until they add in a feature that helps with that. 

Need help? Hire Us Here

[Cadriel]

Macros work in custom modules, but only if you write them inside the custom module. You can not import macro's.

I think you hit the nail on the head with your last comment tho - "You will always have to copy and paste your code between modules and recreate fields" - that's pretty much what I was wanting to try to avoid.

Thanks for your help tho - it sounds like what I want to do currently just isn't possible.

Another question for you;

I'm currently building a site in a trial account, but will need to move this into a production account later on.

Is there a way to avoid having to update module id references between accounts after moving templates? What's the best solution to moving templates to new accounts?

[Jsum]

If you have hard coded any references to assets then you might have to update those references. My process is that I build out the module in jsfiddle, then place it in a design manager for the hubl. Sometimes I'm ahead of schedule and don't have portal access so I use my own portal or a test portal to build it out. I copy to the right portal when I have access and I never have an issue with having to update things, but also I allow Hubspot to do what it does which is dynamically link assets.

[Cadriel]

I guess another element to consider is that if I have to duplicate that code in each module, it also means duplicating all of the module fields and groups to meet the requirements of that code.

So not only are you forced to duplicate code, but you're also forced to duplicate fields.