Add class to body using Choice

SEmteryd · ‎Nov 9, 2022

I want to add a custom color scheme which will become activated by using a Choice dropdown in the edit section of the website. When they click "Purple" the color scheme changes to purple etc. The CSS is already set up, I just need to add a class in the body depending on the theme the user chooses.
This is the code right know:

INSIDE THE HEAD TAG:

{% choice "theme" label="Select a theme", value='Purple', choices='Yellow, Purple, Green', export_to_template_context="True" %}

or referring to an actual module (this hasn't worked for me and is hidden in the code):

{# {% module "module_166746683164613" path="/template-masterplan/modules/theme-picker", label="Purple", export_to_template_context=True %} #}

BELOW THE HEAD TAG, after </head>:

{% if widget.value == "Purple" %}
<body class="theme-purple_haze">
{% elif widget.value == "Green" %} 
<body class="theme-green_hell">
{% else widget.value == "Yellow" %} 
<body class="root-theme">
{% endif %}

As of right know the if statements does not work because the 'root-theme' class is always acivated despite what is chosen in the Edit section. How can I go about to add the right class, depending on choice?

alyssamwilie · ‎Nov 9, 2022

The variable you want for grabbing the data is {{ widget_data.theme.value }}. You can also cut down on the code by using a [value, label] setup in your choice field, with the value being your class. That way instead of having an if statement you can just put the value directly into the class. Like so:

Choice (use the choice tag, the choice module seems to be deprecated)

 {% choice "theme" label="Select a Theme", value="theme-purple_haze", choices="[[\"theme-purple_haze\", \"Purple\"], [\"theme-green_hell\", \"Green\"], [\"root-theme\", \"Yellow\"]]" %}

Body Class

<body class="{{ widget_data.theme.value }}">

If you wanted to use a custom module instead you could set the class using javascript from within the module.

<script>
  document.querySelector('body').classList.add({{ module.theme|tojson }});
</script>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

alyssamwilie · ‎Nov 9, 2022