TYPO3 pass Fluid variable value to the Javascript

Question

In a fluid template I have a fluid variable which value I would like to use in my JavaScript code.

I am using JavaScript inside of fluid template.

My Code:

<!-- value I would use further in my javascript -->
<h1 id="product-model">{product.model}</h1>

<!-- Javascript code (in the same file) -->
<script>
   <![CDATA[
     function printProductWindow() {
       document.title = document.getElementById("product");
       window.print(); 
     } 
   ]]>
</script>

Thanks in advance! Denis

Answer 1

Your element id is wrong:

 document.title = document.getElementById("product-model");

because you have defined it as id="product-model".

Alternative, if your JavaScript is in your FluidTemplate, you can also set the Value there:

<script>
  <![CDATA[
    function printProductWindow() {
      document.title = "]]>{product.model}<![CDATA[";
      window.print(); 
    } 
  ]]>
</script>

But let me warn you: changing the title via JavaScript is not a good practice.

Have an look at the TitleTagViewHelper from the news extension here to see one solution how this can be solved.

Answer 2

you can use the fluid variables in js as well but most of the time you need to use a format viewhelper like <f:format.htmlspecialchars>.

<script>
    <![CDATA[
        function printProductWindow() {
            document.title = '<f:format.htmlspecialchars>{product.model}</f:format.htmlspecialchars>';
            window.print(); 
        }
    ]]>
</script>

Answer 3

Another way would be:

<!-- value I would use further in my javascript -->
<h1>{product.model}</h1>

<!-- Javascript code (in the same file) -->
<script>
     function printProductWindow() {
       <f:format.raw>
       document.title = {product.model};
       window.print(); 
       </f:format.raw>
     } 
</script>

Put the Viewhelper <f:format.raw> to the closest curly brackets which shoul output a variable to get the fluid detection right.

Answer 4

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ThingsToKnow/JsAndInline.html

<f:format.cdata>
   <script type="text/javascript">
      var myLayout;
      $(document).ready(function() {
         myLayout = $('body').layout({
            north__size: 27,
            north__initClosed: false,
            north__initHidden: false,
            center__maskContents: true // IMPORTANT - enable iframe masking
         });
      });
   </script>
</f:format.cdata>

Answer 5

<script>
        function printProductWindow() {
            document.title = <f:format.raw>{product.model}<f:format.raw>;
            window.print(); 
        }
</script>

For TYPO3 8.7.