<p>There is no "syntax" for it since you don't parse these files with PHP.
You'll have to declare your variables inside a twig file</p>

<h1>First Approach</h1>

<h3>Twig</h3>

<pre><code>&lt;script&gt;
    var myVariable = {{ theme|json_encode|raw }}
&lt;/script&gt;
</code></pre>

<h3>Javascript</h3>

<pre><code>jQuery(document).ready(function(){
    var uspicon1 = myVariable.usp_1_icon;
    var uspicon2 = myVariable.usp_2_icon;
    var uspicon3 = myVariable.usp_3_icon;
    var uspicon4 = myVariable.usp_4_icon;
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);  
    jQuery('.icon3').addClass(uspicon3);  
    jQuery('.icon4').addClass(uspicon4); 
});
</code></pre>

<h1>Second Approach</h1>

<p>Or you move your Javascript inside a Twig file</p>

<pre><code>{% js %}
jQuery(document).ready(function(){
    var uspicon1 = "{{ theme.usp_1_icon }}";
    var uspicon2 = "{{ theme.usp_2_icon }}";
    var uspicon3 = "{{ theme.usp_3_icon }}";
    var uspicon4 = "{{ theme.usp_4_icon }}";
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);
    jQuery('.icon3').addClass(uspicon3);
    jQuery('.icon4').addClass(uspicon4);
});
{% endjs %}
</code></pre>

<p>You can as well attach the attributes in your html - that makes it much easier</p>

<h1>Third Approach</h1>

<h3>Twig</h3>

<pre><code>&lt;div class="icon4" data-icon="{{theme.usp_4_icon}}"&gt;&lt;/div&gt;
</code></pre>

<h3>Javascript</h3>

<pre><code>var element = jQuery('.icon4')
element.addClass(element.data('class'));
</code></pre>

CC BY-SA 3.0
2018-04-18T09:34:38.433Z
2018-04-18T09:34:38.433Z
Robin Schambach
<p>Im trying to put my  code in a included theme.js file. It wont recognize my variables anymore.</p>

<p>Working in .rain file within the html code:</p>

<pre><code>&lt;script&gt;
  jQuery(document).ready(function(){
    var uspicon1 = "{{ theme.usp_1_icon }}";
    var uspicon2 = "{{ theme.usp_2_icon }}";
    var uspicon3 = "{{ theme.usp_3_icon }}";
    var uspicon4 = "{{ theme.usp_4_icon }}";
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);  
    jQuery('.icon3').addClass(uspicon3);  
    jQuery('.icon4').addClass(uspicon4); 
  });
&lt;/script&gt;
</code></pre>

<p>Not working with an include .js file:</p>

<pre><code>  jQuery(document).ready(function(){
    var uspicon1 = "{{ theme.usp_1_icon }}";
    var uspicon2 = "{{ theme.usp_2_icon }}";
    var uspicon3 = "{{ theme.usp_3_icon }}";
    var uspicon4 = "{{ theme.usp_4_icon }}";
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);  
    jQuery('.icon3').addClass(uspicon3);  
    jQuery('.icon4').addClass(uspicon4); 
  });
</code></pre>

<p>Practicly the same without the script tags. I tested a console.log() and it works fine. I'm guessing it wont recognize my {{ variables }} in .js file.</p>

<p>Anybody know what the syntax is?</p>

<templating><variable><jquery>
Twig variables wont work in an include js file?
# Twig variables wont work in an include js file?

(Asked by: username_0 on 2018-04-18)

Im trying to put my  code in a included theme.js file. It wont recognize my variables anymore.
Working in .rain file within the html code:


Not working with an include .js file:
  jQuery(document).ready(function(){
    var uspicon1 = "{{ theme.usp_1_icon }}";
    var uspicon2 = "{{ theme.usp_2_icon }}";
    var uspicon3 = "{{ theme.usp_3_icon }}";
    var uspicon4 = "{{ theme.usp_4_icon }}";
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);  
    jQuery('.icon3').addClass(uspicon3);  
    jQuery('.icon4').addClass(uspicon4); 
  });

Practicly the same without the script tags. I tested a console.log() and it works fine. I'm guessing it wont recognize my {{ variables }} in .js file.
Anybody know what the syntax is?

**Tags:** templating, variable, jquery


---

## 1 answers

### Answer by username_1 on 2018-04-18. Score: 4

There is no "syntax" for it since you don't parse these files with PHP.
You'll have to declare your variables inside a twig file
First Approach
Twig


Javascript
jQuery(document).ready(function(){
    var uspicon1 = myVariable.usp_1_icon;
    var uspicon2 = myVariable.usp_2_icon;
    var uspicon3 = myVariable.usp_3_icon;
    var uspicon4 = myVariable.usp_4_icon;
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);  
    jQuery('.icon3').addClass(uspicon3);  
    jQuery('.icon4').addClass(uspicon4); 
});

Second Approach
Or you move your Javascript inside a Twig file
{% js %}
jQuery(document).ready(function(){
    var uspicon1 = "{{ theme.usp_1_icon }}";
    var uspicon2 = "{{ theme.usp_2_icon }}";
    var uspicon3 = "{{ theme.usp_3_icon }}";
    var uspicon4 = "{{ theme.usp_4_icon }}";
    jQuery('.icon1').addClass(uspicon1);
    jQuery('.icon2').addClass(uspicon2);
    jQuery('.icon3').addClass(uspicon3);
    jQuery('.icon4').addClass(uspicon4);
});
{% endjs %}

You can as well attach the attributes in your html - that makes it much easier
Third Approach
Twig


Javascript
var element = jQuery('.icon4')
element.addClass(element.data('class'));


---

