Can I create a module selector in my template for use in the visual page builder?

[markgonz]

Is it possible to create a section in my visual template where page creators can edit/pick/add a global component? In this case it is for the page header and navigation.  The idea is when a page editor creates a page with this template, they will need to add the appropriate global header (there are a few different types).

[miljkovicmisa]

Heyyy @markgonz , hope everything is okay, just checking in to see if you managed get this to work?

If my answer was helpful please mark it as a solution.

[miljkovicmisa · Accepted solution]

Hello @markgonz ,
hi @dennisedson thanks for tagging me,

It is definatelly possible to do that.
1. You will create a regular global module that you'll put in the header let's say of every template you want it to appear
2. Then in the module create a multiple choice field with all the options you want.
3. Next for each choice you created make the fields you need and group them accordingly, in each group, enable the conditional option and set it to be the value of the respective choice.
4. Finally in the html window create conditional statements for each choice and output the group items accordingly.

So to illustrate all of the above here are some screenshots in the above order:

1.Creating an inserting the global module:
1.1 Create module

1.2 Create partial

1.3 Insert module in partial

2. Create a multiple choice field in the new module with all the options you want.

2.1 Create the choice field:

2.2 Add Options

3. Make the fields you need and group them accordingly

3.1 Create fields for first group

3.2 group the fields in first group by clicking the "group" link next to the "add field" option and selecting all the fields you want, then click "create group" orange button. Reapeat this step for every choice.

You will end up with something like below:

 3.3 Enable the coditional (this will help the content editor so only the group of the selected choice will show in the editor)

- Click the "edit" link when you hover a group then go way down to see this section
- Enable the "display conditions" toggle
- For condition select the choice field you created
- Select "is equal to"
- Write the value of the option that corresponds to the group( option_one --> Group header 1)
The result for group one looks like this:

Do the same for every group changing the last value to the appropriate choice value that corresponds to the group.


4. The hubl code. Note this may vary in your case depending on the choice values and other fields, here I created just a demonstration, your case will be differrent if you need help with any specifics don't hesitate to share your code and I'll try to do my best and help you out, but it should be straightforward.

<!-- here we check if user selected the first choice and show header no 1 -->
{% if module.choice_field eq 'header_one' %}
  <!-- this is my code for header no 1 -->
  {% logo
    override_inherited_src="{{ module.group_for_header_1.logo_for_header_1.override_inherited_src }}"
    src="{{ module.group_for_header_1.logo_for_header_1.src }}"
    alt="{{ module.group_for_header_1.logo_for_header_1.alt }}"
    width="{{ module.group_for_header_1.logo_for_header_1.width }}"
    height="{{ module.group_for_header_1.logo_for_header_1.height }}"
    suppress_company_name="{{ module.group_for_header_1.logo_for_header_1.suppress_company_name }}"
  %}
  {% inline_rich_text field="group_for_header_1.rich_text_for_header_1" value="{{ module.group_for_header_1.rich_text_for_header_1 }}" %}

<!-- here we check if user selected the first choice and show header no 2 -->
{% elif module.choice_field eq 'header_two' %}
  
  <!-- this is my code for header no 2 -->
  {% set href = module.group_for_header_2.link_for_header_2.url.href %}
  {% if module.group_for_header_2.link_for_header_2.url.type is equalto "EMAIL_ADDRESS" %}
    {% set href = "mailto:" + href %}
  {% endif %}
  {% set rel = [] %}
  {% if module.group_for_header_2.link_for_header_2.no_follow %}
    {% do rel.append("nofollow") %}
  {% endif %}
  {% if module.group_for_header_2.link_for_header_2.open_in_new_tab %}
    {% do rel.append("noopener") %}
  {% endif %}
  <a href="{{ href }}"
    {% if module.group_for_header_2.link_for_header_2.open_in_new_tab %}target="_blank"{% endif %}
    {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
    >
    Link text
  </a>
  {% cta guid="{{ module.group_for_header_2.cta_for_header_2 }}" %}

{% endif %}

If my answer was helpful please mark it as a solution.

[dennisedson]

@markgonz 

You should be able to do this.  Create your global module.  Create a page and throw it in there.

@miljkovicmisa  probably could explain better than I 😜