How to escape curly bracket "{" in TYPO3 Fluid template?

Question

I've a mixed HTML / JS template, when I'm working with JS arrays, Fluid tries to make autosubstitutions.

Is there a way to escape curly brackets in Fluid template ?

UPD :

Actual working syntax to escape JS parts is :

<script type="text/javascript">/*<![CDATA[*/
/*]]>*/
var llKeyOne = '{f:translate(key:"key1")}';
var llKeyTwo = '{f:translate(key:"key2")}';
/*<![CDATA[*/
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*]]>*/</script>

Submersible

Answer 1

Try to use

<![CDATA[...]]>

tags around your JS code.

Sidon

Right. I just found the answer of Bastian Waidelich forge.typo3.org/issues/8879 Now it works, thanks. – Submersible

Answer 2

The CDATA solution stopped working in 8.7

I managed to solve the problem using alias in a usecase that heavily mixes javascript and fluid. {l} stands for left (open curly bracket) and {r} stands for right (close curly bracket):

<f:alias map="{l: '{', r: '}'}">
    var alter = {};
    <f:for each="{alterDB}" as="a">
        if (!alter[{a.einsatz}]) { alter[{a.einsatz}] = {}; }
        alter[{a.einsatz}][alter[{a.einsatz}].length] = {l} label: "{a.bezeichnung} ({a.kuerzel})", value: {a.uid} {r};
    </f:for>
</f:alias>

Vesica

Answer 3

Since it didn't worked for me in TYPO3 v8.7.16 with the <![CDATA[]]> solution above, I wanted to share my own solution. My "hack" to escape the brackets is to wrap those with a <f:format> viewhelper.

My goal was to output this in the frontend (400 and swing are fluid variables):

<ul data-animate="{duration:400, easing:'swing'}">
    ...
</ul>

I did this in the Fluidtemplate and it worked perfectly:

<ul data-animate="<f:format.raw>{</f:format.raw>duration: {data.myfield1}, easing:'{data.myfield2}'<f:format.raw>}</f:format.raw>">
    ...
</ul>

Keloid

Answer 4

Solution working in TYPO3 9.x / 9.5.x

To avoid too much markup around curly braces which has a "not so nice" impact on the summary markup (readability and IDE support / highlighting) here an additional solution.

Possible limitation: In our case the fluid template only contained fluid template variables within the templates head section followed by the entire markup which is processed/rendered by angular.js.

So we've created a partial for the angular.js part and included those inside the main fluid template.

Example:

The included partial file now starts using a {parsing off} statement (see example below).

Partial (simplified):

{parsing off} <!-- This solved all our issues -->

<div ng-show="showSlider">
    <div class="slider" data-test="slider-wrapper">
        <div class="row">
            <div class="slide-indicator-mask col-lg-12">
                <div class="slider-scope page-{{firstSlide}}"></div>
            </div>
    </div>
</div>

Allineallis

Answer 5

Use a fluid-Variable to add "![CDATA[" into your script.

I use the the tag-notation of fluid in javascript, because the syntax-highlighting works better with it.

<script type="text/javascript">/*{startCDATA}*/

var llKeyOne = '<f:translate key="key1" />';
var llKeyTwo = '<f:translate key="key2" />';
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*{endCDATA}*/</script>

I solved the bracket-problem with TYPO3-fluid and angulars-expressions in my dynamic template in the same way

<f:alias map="{ang: {s: '{{', e: '}}'}}">
...    
    <div class="{ang.s}{class}-{subclass}{ang.e}">...
</f:alias>

Pekan

...and where does {startCDATA} and {endCDATA} come from? – Bedeck

In TYPO3 8.7 for me now works something like that: <script type="text/javascript"> /*<f:format.cdata>*/ viewConfig: { /*</f:format.cdata>*/ startPage: '<f:uri.page />' /*<f:format.cdata>*/ } /*</f:format.cdata>*/ </script> It's kinda ridiculous, but at least it does what is expected to. – Unending

Answer 6

Maybe too late but I found also one funny solution.

When I was integrating google seach structured data I found there this settings which should go to the template

<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>

And this is the easiest way I found for integration there

<meta itemprop="target" content="https://query.example.com/search?q={<f:format.raw>search_term_string</f:format.raw>}"/>

Coypu

In inline notation it would likely make problems: <meta itemprop="target" content="https://query.example.com/search?q={{'search_term_string' -> format.raw()}}"/>. So DON'T use this notation in this case, actually that's one of the problems around curly brackets in fluid. – Middlings

Answer 7

The last answer helpt me insert the files public url of an YouTube Video in TYPO3 fluid template using Video-js with Video-js YouTube extension.

After adding an new video in fileadmin and posting {file.publicUrl} in fluid returns an error. wrapping it inside f:format will do the job!

<f:format.raw>{file.publicUrl}</f:format.raw>

This is the whole code for getting YouTube Videos:

<f:if condition="{file.originalFile.properties.extension} == 'youtube'
    <video
        id="vid1"
        class="video-jS"
        data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<f:format.raw>{file.publicUrl}</f:format.raw>"}] }'
    >
    </video>
</f:if>

Soraya

if you use the inline format ({file.publicUrl->f:format.raw()}) it might be easier to read. – Compress

Answer 8

For the issue with a data attribute like

<ul data-animate="{duration:400, easing:'swing'}">
    ...
</ul>

the easiest solution I found was to simply swap single quotes and double quotes, like

<ul data-animate='{"duration":"400", "easing":"swing"}'>
    ...
</ul>

Pilliwinks

Answer 9

on the way to include a newsletter background I had to add Microsoft VML to my fluid. This also has parts that fluid tried to process. My way: I defined a fluid variable:

page.10 = FLUIDTEMPLATE
page.10.variables.msxml = TEXT
page.10.variables.msxml.value (
                <!--[if gte mso 9]>
                <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                <v:fill type="tile" src="http://reguengo.com.dedi87.your-server.de/fileadmin/templates/imgs/fgp_reguengo_bg.gif" color="#7bceeb"/>
                </v:background>
                <![endif]-->
            )

and inserted:

<f:format.raw>{msxml}</f:format.raw>

voilà

Gates