Problem with double curly bracket

[visdom]

Hi there,
I was referred to this forum after unsuccessful attempt to resolve my issue from support ticket. Ticket reference number: 2487656.
I came across a problem in using hubL today, it seems like the issue caused by hubspot syntax (the double curly bracket).

Situation:

Trying to implement algolia into hubspot.

Problem:

One of the script syntax in algolia is using double curly bracket as a text to access the actual variable value. However, because hubL is using double curly bracket as variable, it is trying to process that curly bracket in hubL way, which resulting in ignoring it/outputing empty value.

Algolia script usage example:

search.addWidget(
instantsearch.widgets.infiniteHits({ 
templates: { 
item: `<p>{{ object_key }}</p>` }, 
}) 
);

Expected result (in html):

<p>Key</p>

Actual result:

<p></p>

(Because object_key is non valid variable in hubL)

After dig in a little bit more. We can simplify the case by saying that hubL doesn’t allow double curly bracket as a text.
I tried to do a simple console log to print “{{” but it’s throwing me an error instead.

Sample code 1:

console.log(“I want to print {{.”);

Sample code 2:

console.log(“I want to print {{ . }}”);

In sample 1, it will return a syntax error saying “Uncaught SyntaxError: Unexpected token .”

Where as sample 2 will return "I want to print ".

Sample 2 can’t find the variable with dot in it, so it is showing empty.
My question would be:
Is there any way I can print double bracket as a text?
Say I want to console log “I want to print {{ }}”. How should I do that? I tried using {% raw %} for this, but I got no luck.
Looking forward to hearing from you.

[JasminLin]

Hey @visdom , the {% raw %} block to escape hubL delimiters should be able to print out {{ }} as text. I tried it on my end and it works - this is my example code I used in the HubSpot template:

{% raw %}
var string = "i want to print {{ }}";
console.log(string);
{% endraw %}

And the HubSpot hosted page console tab prints out ‘i want to print {{ }}’. Could you link me to your example HubSpot page where you are trying to implement this?

[visdom]

Hi JasminLin,

Thank you for your reply.

I have tried your raw tag method.
Unfortunately it doesn’t work in my module.
However, it works if I separate the JS file to be on its own and then include it in the module.

I find this quite unusual since it is the exact same code. I’ll try to explain it a bit better by what I mean.
Case 1:
- Create its own JS file (my-script.js)

- Write the console log script in there.

{% raw %}
var string = "i want to print {{ }}";
console.log(string);
{% endraw %}

- Include it in the module that has been assigned to the page template.

Result of case 1:
“i want to print {{ }}” will show in console.

Case 2:

- Create a new module (where it has html, css, and js section)

- Write that same code in the JS section.

- Include this module to a page template.

Result of case 2:
Uncaught SyntaxError: Unexpected token %

I’m assuming that’s because module JS has a layer of script that wraps whatever is in there.
Does that mean raw tag is not supported in module JS?
If it is, what is the reason it is not supported?

Looking forward to hearing from you. Cheers!

[JasminLin]

Hey @visdom , ah okay so you are trying to put it in the JS section of a custom module. In the custom module’s CSS and JS section, hubL is not supported so the {% raw %} tag wouldn’t work there. If this is the case, the only way to achieve that is to write the codes in <script> tags in the HTML+HUBL section of the custom module instead of putting it in the JS section.

[visdom]

Hi JasminLim,

Thanks for the clarification.
I guess I can live with separate JS file for now.
It’s kind of weird that JS section in module doesn’t support HubL but still trying to interpret {{ }} as a variable.
Not sure if it’s a bug in hubspot, but you guys might want to update the documentation regarding {% raw %} tag.

Thanks for your help! Cheers!