Passing variables to partial templates

[albertsg]

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.

[LPM]

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]

Hello @LPM, 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.

[LPM]

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]

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