Choice in Custom Module not recognizing selected value, defaults to final else statement

cos

#1

Im trying to create a header for multiple brands within an organization. The user would select the brand from a dropdown in the UI, rendering the correct header and logo. Currently the module always renders the markup in the final else statement and does not respect the user selection in the UI

{% choice "brand" label="Select a brand", value='MPG', choices='MPG, MPGS, MP, RM, EXP', 
export_to_template_context="True" %}

{% if widget_data.brand.value == "MPG" %} 

<!-- logo -->
<nav id="nav">
    <a href="{{ widget.mpg_link }}" target="_blank">
        <img id="logo-normal" src="{{ widget.mpg_logo.src }}" width="{{ widget.mpg_logo.width }}" height="{{ 
widget.mpg_logo.height }}" alt="{{ widget.mpg_logo.alt }}" title="{{ widget_data.brand.value }}">
   </a>
</nav>
<div id="nav-spacer"></div>
    
{% elif widget_data.brand.value == "MPGS" %} 

<!-- logo -->
<nav id="nav">
    <a href="{{ widget.mpgs_link }}" target="_blank">
        <img id="logo-normal" src="{{ widget.mpgs_logo.src }}" width="{{ widget.mpgs_logo.width }}" height="{{ 
 widget.mpgs_logo.height }}" alt="{{ widget.mpgs_logo.alt }}" title="{{ widget_data.department.value }}">
   </a>
</nav>
<div id="nav-spacer"></div>

{% elif widget_data.brand.value == "MP" %} 

<!-- logo -->
<nav id="nav">
    <a href="{{ widget.mp_link }}" target="_blank">
        <img id="logo-normal" src="{{ widget.mp_logo.src }}" width="{{ widget.mp_logo.width }}" height="{{ 
widget.mp_logo.height }}" alt="{{ widget.mp_logo.alt }}" title="{{ widget_data.brand.value }}">
   </a>
</nav>
<div id="nav-spacer"></div>

{% elif widget_data.brand.value == "RM" %} 

<!-- logo -->
<nav id="nav">
    <a href="{{ widget.rm_link }}" target="_blank">
        <img id="logo-normal" src="{{ widget.rm_logo.src }}" width="{{ widget.rm_logo.width }}" height="{{ 
widget.rm_logo.height }}" alt="{{ widget.rm_logo.alt }}" title="{{ widget_data.brand.value }}">
   </a>
</nav>
<div id="nav-spacer"></div>
{% else %}
<nav id="nav">
    <a href="{{ widget.rm_link }}" target="_blank">
        <img id="logo-normal" src="{{ widget.rm_logo.src }}" width="{{ widget.rm_logo.width }}" height="{{ 
widget.rm_logo.height }}" alt="{{ widget.rm_logo.alt }}" title="{{ widget_data.brand.value }}">
   </a>
</nav>
     <div id="nav-spacer"></div>
  {% endif %}

#2

Hi @fly.space.age,

Can you send me a link to the module in question so that I can take a look?


#3

https://app.hubspot.com/design-manager/2942250/?folder=Custom%20Modules

Name of module = Header w Logo | Brand Choice (BROKEN)

I was able to get this module working as a Custom Hubl but not did not retain the data for the images and links that were created in the Choice Module UI


#4

Hi @fly.space.age,

Not sure if this matches what you were trying to accomplish exactly, but I made a few tweaks that seemed to get things working. I've included links to the test module and page below. Long story short, your if statements should be

{% if widget.brand == "MPG" %}

instead of

{% if widget_data.brand.value == "MPG" %}

https://app.hubspot.com/design-manager/2942250/modules/5596207504
https://app.hubspot.com/content/2942250/edit/5596197481/content


#5

Yes thank you for helping out!