Making a module inside an if statement visible to page editors

[andreasmb]

Hi there,

I'm working on an email template that has a {{rich_text}} module inside an if statement, like this:

{% boolean "show_bottom_callout" label="Show bottom callout", no_wrapper=True, export_to_template_context=True %}

{% if widget_data.show_bottom_callout.value == true %}

  {% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True  %}
    {% widget_attribute "html" %}
    {% end_widget_attribute %}
  {% end_widget_block %}

{% endif %}

Now, when I use this template, the rich text module is not visible/editable until the boolean has been turned on, and the page has been refreshed. This adds confusion for an editor who might not be aware that the text is editable (after refresh).

Rich text element is not visible until toggle is turned on AND the user refreshes the page.Does anyone have a suggestion for how I can show the rich text module to editors even if the boolean is false?

Or is this just a bug?

Thanks for your help!

[ndwilliams3 · Accepted solution]

Here's a hack that uses CSS to hide it when boolean is false. I tested and seems to work not requiring a page refresh.

{% boolean "show_bottom_callout" label="Show bottom callout", no_wrapper=True, export_to_template_context=True %}

<div class="{% if widget_data.show_bottom_callout.value == false %}hide-callout{%endif%}">
  {% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True  %}
    {% widget_attribute "html" %}
    Content
    {% end_widget_attribute %}
  {% end_widget_block %}
  </div>

  <style>
 .hide-callout {
          display: none;
      }    
  </style>
  
 

[Jsum · Accepted solution]

Your missing export_to_template context which exports the module data to the template so it can be called else where.

{% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True, export_to_template_context=True %}
{% widget_attribute "html" %}
 CONTENT RENDERS WHEREVER I PUT THIS STATEMENT, OF COURSE
{% end_widget_attribute %}
{% end_widget_block %}

[ndwilliams3 · Accepted solution]

Here's a hack that uses CSS to hide it when boolean is false. I tested and seems to work not requiring a page refresh.

{% boolean "show_bottom_callout" label="Show bottom callout", no_wrapper=True, export_to_template_context=True %}

<div class="{% if widget_data.show_bottom_callout.value == false %}hide-callout{%endif%}">
  {% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True  %}
    {% widget_attribute "html" %}
    Content
    {% end_widget_attribute %}
  {% end_widget_block %}
  </div>

  <style>
 .hide-callout {
          display: none;
      }    
  </style>
  
 

[andreasmb]

This a pretty good solution, but I'm not sure it would work for an email template. Hubspot inlines the CSS when the HTML is rendered, but I'm not sure if that happens before the Hubl logic is applied or before. 

I suppose I should just test it. Thank you!

[ndwilliams3]

I don't think display is supported across all email clients. I would definately use the built in tester to check it across different clients. Here's the code to inline the CSS directly and bypass the class selector.

{% boolean "show_bottom_callout" label="Show bottom callout", no_wrapper=True, export_to_template_context=True %}

<div style="{% if widget_data.show_bottom_callout.value == false %}display: none;{%endif%}">
  {% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True  %}
    {% widget_attribute "html" %}
    Content
    {% end_widget_attribute %}
  {% end_widget_block %}
  </div>
  
 

[ndwilliams3]

You can also use this

{% boolean "show_bottom_callout" label="Show bottom callout", no_wrapper=True, export_to_template_context=True %}
 {% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True, export_to_template_context=True  %}
    {% widget_attribute "html" %}
    Content
    {% end_widget_attribute %}
  {% end_widget_block %}
{% if widget_data.show_bottom_callout.value == true %}
<div>
{{ widget_data.bottom_callout_content.html }}
  </div>
{%endif%}

[njeffrey]

Great solution. Unfortunately, it doesn't seem to be compatible with Smart Content. 😕

[andreasmb]

I think that would work. Brilliant!

[andreasmb]

Hm... I actually got to try it. Perhaps I'm doing something wrong with the code, but it's not working. 

I placed the rich text module outside the main column of the email, but now it renders there instead... which I should've predicted.

{% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True %}
{% widget_attribute "html" %}
 CONTENT RENDERS WHEREVER I PUT THIS STATEMENT, OF COURSE
{% end_widget_attribute %}
{% end_widget_block %}

This part doesn't actually render anything, but I suppose that doesn't matter. If it did render, I'd have two instances of the same content.

{{ widget_data.bottom_callout_content.html }}

[ndwilliams3 · Accepted solution]

need to add export_to_template_context = true to module.

{% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True, export_to_template_context = true  %}

 The only challenge to this method is you can only edit the "bottom callout content" from the module editor pane on the left as it is a hidden module.

[Jsum · Accepted solution]

Your missing export_to_template context which exports the module data to the template so it can be called else where.

{% widget_block rich_text "bottom_callout_content" overrideable=True, label='Bottom callout content', no_wrapper=True, export_to_template_context=True %}
{% widget_attribute "html" %}
 CONTENT RENDERS WHEREVER I PUT THIS STATEMENT, OF COURSE
{% end_widget_attribute %}
{% end_widget_block %}

[Jsum]

@andreasmb could you place it directly into the template in a hubl or html module? the down side, if it works, is that it would be included in the template code, but it should work.

[Jsum]

That is clever. I have not given any thought to using css or js to mess with hubspots editor styling. Good one!

[Jsum]

Unfortunately that is how this works in hubspot. When you dynamically add modules to the page editor you have to refresh the page to see them.

You could have the module always available and use the boolean to decide whether or not to use it in the page. That could be confusing too though.