Making a module inside an if statement visible to page editors

SOLVE
andreasmb
Contributor

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.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!

0 Upvotes
3 Accepted solutions

Accepted Solutions
ndwilliams3
Solution
Key Advisor

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>
  
 

 

View solution in original post

Jsum
Solution
Key Advisor

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 %}

View solution in original post

ndwilliams3
Solution
Key Advisor

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.

View solution in original post

12 Replies 12
Jsum
Key Advisor

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.

0 Upvotes
ndwilliams3
Solution
Key Advisor

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>
  
 

 

View solution in original post

Jsum
Key Advisor
That is clever. I have not given any thought to using css or js to mess with hubspots editor styling. Good one!
0 Upvotes
andreasmb
Contributor

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!

0 Upvotes
Jsum
Key Advisor

@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.

0 Upvotes
ndwilliams3
Key Advisor

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>
  
 

 

0 Upvotes
ndwilliams3
Key Advisor

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%}
andreasmb
Contributor

I think that would work. Brilliant!

0 Upvotes
andreasmb
Contributor

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 }}
0 Upvotes
Jsum
Solution
Key Advisor

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 %}

View solution in original post

ndwilliams3
Solution
Key Advisor

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.

View solution in original post

njeffrey
Participant

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

0 Upvotes