Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-18T09:34:38.433Z
Answers.LastActivityDate: 2018-04-18T09:34:38.433Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Tags: <templating><variable><jquery>
Title: Twig variables wont work in an include js file?
ThreadText: # 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:
  
  ```
  <script>
    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); 
    });
  </script>
  
  ```
  
  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
  
  ```
  <script>
      var myVariable = {{ theme|json_encode|raw }}
  </script>
  
  ```
  
  ### 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
  
  ```
  <div class="icon4" data-icon="{{theme.usp_4_icon}}"></div>
  
  ```
  
  ### Javascript
  
  ```
  var element = jQuery('.icon4')
  element.addClass(element.data('class'));
  
  ```
  
  
  ---
  
  