CMS Development

andre9000
Contributor

Different versions of global module

Hi, I have a global module for the navigation bar. Now I want to have 2 different versions of it. It stays basically the same, but Navbar B should have a different Logo and different Links than A. But since besides the content they are identical, I don't want to just copy paste the module. Also a local module is no option, since then the editors need to fill all navbar content every time they create a new page. I only want 2 version of the navbar be available for them.

 

However, for a global module there can only be 1 version - the same content is used for all templates that use this global module.

 

How can I do this? I was thinking of making the navbar a local module, and then creating 2 global modules (1 for A, 1 for B), and then just input different content for both global modules. However, if I try to load the local module in the global one, I get this error:

Error:"module" is disabled in this context
0 Upvotes
14 Replies 14
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - I think your approach is a bit over-engineered. What you can do is (in your global nav module) just add a "choice" field from the right sidebar and have your 2 options be Navbar A or Navbar B. Then, you can add both of your navbars to the same module and just have the content creator choose which one to use from the dropdown.

navab.png

HTML + HUBL
{% if module.choice_field == 'nava' %}
    <div>Nav A is chosen so this is showing</div>
{% endif %}
{% if module.choice_field == 'navb' %}
    <div>Nav B is chosen so this is showing</div>
{% endif %}

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.

andre9000
Contributor

Different versions of global module

Hi tjoyce, thanks for the long answer. Unfortunately I think this won't work, since if the editor changes the choice in the global module, it will change on all pages - I want it to be selectable on page level. But on page level it is not possible to do changes in a global module.

 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - Sorry if that was unclear, this is the solution for page level. Here's a screenshot of that working in the page editor. Your content editor should never have to go into the global module to change the settings. They will click the module instance button on the left in the Page Editor and choose the navbar from there, while editing the page.

demo.png

0 Upvotes
andre9000
Contributor

Different versions of global module

Hey, thanks for taking the time. If I understand correctly, your suggested solution describes how to select the nav bar on page level. The question was more how to create the 2 global modules. I see 2 options:

1. Make it 2 global modules - not optimal, since it requires copy paste and will create duplicate code. 

2. Make it a local module: not good, because content needs to be set on page level every time.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - The functionality you are looking for is:

1. A content editor builds or edits a page

2. They should be able to choose which navigation (or header) to show on that page they are currently editing

 

I understand that you're asking "how to create the 2 global modules" but, you said yourself in your response - "1. Make it 2 global modules - not optimal, since it requires copy paste and will create duplicate code."

 

I agree with you, 2 global modules is not optimal. You need to create 1 global module that switches content (on a page level) based on which option the content editor chose for that page. The if statement in my response, in conjunction with a simple dropdown (in the screenshot I posted) for them to choose which nav to show, is the correct apprach to your desired functionality.

0 Upvotes
andre9000
Contributor

Different versions of global module

hey,

adding a switch to a global module doesn't work, since the switch can not be accessed on page level. Also adding the switch on template level doesn't work, since it is still not possible to change the global module.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - The dropdown screenshot in my previous post is taken from the page level...

0 Upvotes
andre9000
Contributor

Different versions of global module

Yeah, but it needs to be passed to the global module which holds the markup & fields for the 2 nav versions, which is not possible as far as I can see. 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - No, you would modify your current global module that has the nav markup to support the dropdown itself.

0 Upvotes
andre9000
Contributor

Different versions of global module

But the value for the dropdown in the global module will be set globally - it is not possible to use a value from page level for a global modules. Unless I'm seeing something wrong here. 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - If you add a field to your global module (keep it simple like a text field), you can set a default value on a global level. However, when you create a page based off of that template that has the global module in it, if you click on the modules on the left side of the page editor, you can override the default value of that field.

 

Try it out 😄

0 Upvotes
andre9000
Contributor

Different versions of global module

So this is the solution I came up with (heavily simplified):

 

 

{% set a = {
  'h1': 'A'
} %}

{% set b = {
  'h1': 'B'
} %}

{% set nav = {} %}
{% if module.nav == 'a' %}
  {% set nav = a %}
{% elif module.nav == 'b' %}
  {% set nav = b %}
{% endif %}



<nav>
  <h1>{{ nav.h1 }}</h1>
</nav>

 

module.nav is an option field on page level (can eiter be 'a' or 'b').

 

This is not optimal since content editors can now not set the content of the 2 nav versions anymore. However I still prefer it over having to maintain 2 global modules that only differ in content.

 

Thanks for your help 🙂

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Different versions of global module

@andre9000 - Can't you also add a text field for them to input the h1 text as well? The amount of dynamic content the page editor can have is endless

0 Upvotes
andre9000
Contributor

Different versions of global module

Thanks for being so patient 🙂

 

I think what you actually suggest is to use a local module, not a global one. Global ones can not be edited on page level:

Screen Shot 2018-08-27 at 5.57.47 PM.png

 

It would still be possible, but then unfortunately I will have to hardcode all the field values in the module (there won't be an interface for the editors to set the content for nav bars A and B). However, it's the best approach I can come up with right now. I will post this solution in a few min!

0 Upvotes