7

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>

9 Answers 9

8

Try to use

<![CDATA[...]]>

tags around your JS code.

1
8

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>
6

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>
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: Use a partial for the angular.js part and disaple fluid parsing in there

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>
1

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>
2
  • ...and where does {startCDATA} and {endCDATA} come from? Jun 28, 2017 at 6:43
  • 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. Dec 10, 2018 at 16:37
1

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>}"/>

0

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>
1
  • if you use the inline format ({file.publicUrl->f:format.raw()}) it might be easier to read. Sep 26, 2018 at 5:32
0

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>
0

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à

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.