HubSpot Ideas

albertsg

Passing variables to partial templates

Currently, when adding a partial template into an HTML file, we cannot pass any variable/props to it, making it quite limited when it comes to reusing code in our projects.

 

Let me give you an example to better understand what I mean.

 

Imagine you have a partial template that includes a navigation element. This navigation element is shared accross pages but some items are highlighted according to what page you are visiting. 

Imagine it looks like this:

 

Item 1 | Item 2 | Item 3

 

When you are visiting different pages, the navigation item should work as follows:

 

Page 1 --> Item 1 | Item 2 | Item 3

Page 2 --> Item 1 | Item 2 | Item 3

Page 3 --> Item 1 | Item 2 | Item 3

 

As you can see in the previous example, the items inside the navigation are "highlighted" according to the page we visit.

 

Now imagine we have different templates for each page but the navigation element is the same, so it makes sense to have it in a partial template and include it in each template instead of coding it three times.

 

The problem comes when I want this partial template to behave differently according to the page I'm visiting. 

At this moment we can achieve this by, for exampe, checking the URL and adding some logic based on that, but it's not really scalable.

 

What would be awesome (and in my opinion a game changer when it comes to developing pages in Hubspot CMS) is to be able to pass variables (like props in React) to the partial templates. 

 

In the previous example, would be nice to do something like this:

 

 

 

{% include "./components/nav.html"  props='item1' %}

 

 

And inside the partial template I could do something like:
 

 

<div class="{% if props == 'item1' %} active {% endif %}"> </div>​

 

 
And thanks to the previous code, I could reuse my partial template anywhere in my code and change its behaviour simply by passing a variable to it.
 

 

6 Replies
dannio
Top Contributor | Diamond Partner

I realised that working on a similar problem you can access variables defined in the parent template inside partials. 

 

I made a choice field in the base of my template to determine the header type and accessed it in the partial fine.

 

Something like this:

{% choice "type_of_header" label='Choose the type of header', value='Transparent', choices='Transparent, White', no_wrapper=True, export_to_template_context=True %}

{% block header %}
  {% global_partial path='./partials/header.html' %}
{% endblock header %}

 

And outputting the value in the global header.html like so:

{{ widget_data.type_of_header.value }}

 

Outputs the correct value

albertsg
Guide

Hello @dannio, thanks for the comment! 

 

Agree, what you described in your comment works fine (we also do this in some of our pages), but I believe it's not ideal if we want to use the partial template in other templates.  Some of the reasons:

 

- Widgets in the parent templates can be named differently between templates or have a different structure.

- If the partial is used in other templates, the variable it tries to access might not always come from a widget -- imagine the partial requires a boolean and in one template comes from a widget and in another one from a different element. 

- If another developer works with the partial template, getting the variable from a parent template might not be the best practise to better understand the code.

 

Basically, the idea behind passing variables to partial templates is to make them more reusable in other templates.

dannio
Top Contributor | Diamond Partner

Yeah, I basically only use this method for global partials like headers and footers since it can be easily traced back. 

 

For the usage you're describing, wouldn't it be easier to make it into a module with an option set as a field?

albertsg
Guide

@dannio a module is an option also, yes, but not sure if some elements are a proper fit for a module. 

 

For example, if we code a navigation or footer that will be shared across templates, I'm not sure if a module is the best way to code those elements. Makes more sense to have them as partial templates.

 

Another example (and this is something we do on our pages), is to update the blog template based on some variable (see this article where I explain it in detail). In this case, using modules to load different templates is not a good idea so we need partial templates. In those templates we access some variables in the parent template, but being able to pass parameters to the partial template would make the code cleaner, reusable and easy to understand.

 

 

mmannymu
Member

I have some problem

EdCupaioli
Contributor

@dannio I've encountered the exact same scenario and your solution works, however I wanted to add the rest of the owl for how to use it within the UI. 

 

After you add the snippet to your template, create a page with that particular template. 

Select the contents icon, then select the hidden modules dropdown to reveal the template context module you created: 

Screenshot 2024-06-24 at 5.02.02 PM.png

 

Select the target module (Choose the type of header) and make your changes from there. 

 

Once you have the value you can add the Hubl for the choice value in your template files: 

{{ widget_data.type_of_header.value }}

However, this will only function in template files. If you want to pull the data into a module, you will need to use the content.widgets Hubl:

{{ content.widgets.type_of_header.body.value }}

 

Futher reading: 

export_to_template_context