Using template variables in JavaScript


How do we go about using the variables defined within a template in JavaScript?

Let’s say I have the following line: jQuery("input[name='completion_redirect']").attr( "value", "*{Get name=myVariableComesHere}*" );

How would I go ahead implementing something like this?

I didn’t find any documentation to support JavaScript.

Hi Kendell,

Sorry for the late reply! There’s a feature called JS Variables, which can pass values from a template to its script. It’s documented here: Get and Set | Tangible Loops & Logic

You can pass a string/text value, like this:

<Set js=variable_name>Hello</Set>

Or other value type like number:

<Set js=variable_name type=number>123</Set>

And access it from the Script section:

console.log( variable_name )

The above will output the value in the developer’s console.

1 Like

Hi @eliot,

Thank you for your reply on this. I tried it and it works well.

Awesome. I love it!


I’m trying to use a JS script in a L&L template, beginning with the simple variable mentioned above but it doesn’t work:

My template:

<Set js=my_var>TEST</Set>
  (function($) {
      $(window).on('load', function() {
          $.imageMapProHighlightShape('NZ Map Single Project', my_var);

I get this error in frontend:
Uncaught ReferenceError: my_var is not defined

My next step would be to loop through Taxonomy Terms and run a JS function for each.
I tried the following without success:

  (function($) {
      $(window).on('load', function() {
        <Loop Taxonomy=my_tax>
          $.imageMapProHighlightShape('My Map', '{Field title}');

I think the script has to go in the script tab for it to pass the variable properly. That has worked for me.

Screenshot 2022-10-31 at 6.36.33 pm

Thank you for the tip @thepauly, i might give it a try.

Anticipating the next step of my project (see above, loop through Taxonomy Terms and run a JS function for each), i guessed it would be more difficult to handle with L&L than PHP code directly, so i made this that works fine:

$terms = get_the_terms( get_the_ID(), 'my_tax' ); 

$output = '<script type="text/javascript">
    (function($) {
        $(window).on("load", function() {'; 
            foreach ( $terms as $term ) :
                $output .= 'console.log("' . $term->name . '");
                    $.imageMapProHighlightShape("My Map", "' . $term->name . '");
        $output .= '});

echo $output;

I’m still curious to know if the same is doable with L&L and how.