Schlagwort: Typo3 Fluid

DCE: Select field (manuelle Liste) mit if in Fluid abfragen

An dieser simplen Aufgabe bin ich einige Zeit gesessen. Wenn man z.B. im DCE für die Backend-Fields die Möglichkeit braucht mehrere Optionen auszuwählen.

Die Aufgabenstellung bei mir war:

Für eine Gruppe von Autohäusern stehen drei Automarken zu Verfügung. Für jeden Standort sollten die angebotenen Marken am Standort gewählt werden können.

Ich habe das Content Element mit der Extension DCE, die ich wirklich gerne verwende, erstellt. Als Feld habe ich ein Select-Feld verwendet, definiert als manuelle Liste mit drei Einträgen:

<config>
    <type>select</type>
    <items type="array">
        <numIndex index="0" type="array">
            <numIndex index="0">Peugeot</numIndex>
            <numIndex index="1">0</numIndex>
        </numIndex>
        <numIndex index="1" type="array">
            <numIndex index="0">Citroen</numIndex>
            <numIndex index="1">1</numIndex>
        </numIndex>
        <numIndex index="2" type="array">
            <numIndex index="0">Mazda</numIndex>
            <numIndex index="1">2</numIndex>
        </numIndex>
    </items>
    <minitems>0</minitems>
    <maxitems>3</maxitems>
    <dce_load_schema>1</dce_load_schema>
</config>

 

Im Fluidtemplate wollte ich die Abfrage mittels einem IF-Konstrukt lösen:

<f:if condition="{field.hersteller} == 0">
  <f:then>
    <img src="fileadmin/templates/pics/peugeot-logo.svg" />
  </f:then>
</f:if>
<f:if condition="{field.hersteller} == 1">
  <f:then>
    <img src="fileadmin/templates/pics/citroen-logo.svg" />
  </f:then>
</f:if>
<f:if condition="{field.hersteller} == 2">
  <f:then>
    <img src="fileadmin/templates/pics/mazda-logo.svg" />
  </f:then>
</f:if>

Das klappte aber nicht – hat die manuelle Liste des Elementes mehr als zwei Optionen lässt sie sich mittels Fluid IF so nicht mehr abfragen. (Bei zwei Optionen kann auf wahr/falsch abgefragt werden.)

Und das klappte deswegen nicht, da ein Fluid-Debug zeigte, dass die Variable kein Array ist, sondern ein String:

hersteller => '0,1,2' (5 chars)

Die Lösung:

Um diesen String nun umzuwandeln hilft dce:explode (danke an die Hilfe von Armin und Erik im #dce-Channel von Slack):

<f:for each="{field.hersteller -> dce:explode(delimiter:',')}" as="autologos">
  <f:if condition="{autologos} == 0">
    <f:then>
      <img src="fileadmin/templates/pics/peugeot-logo.svg" />  
    </f:then>
  </f:if>
  <f:if condition="{autologos} == 1">
    <f:then>
      <img src="fileadmin/templates/pics/citroen-logo.svg" />
    </f:then>
  </f:if>
  <f:if condition="{autologos} == 2">
    <f:then>
      <img src="fileadmin/templates/pics/mazda-logo.svg" />
    </f:then>
  </f:if>
</f:for>

 

Namespace nicht vergessen: 
{namespace dce=ArminVieweg\Dce\ViewHelpers}

Typo3 Fluid: if Viewhelper (if – then – elseif – else)

Mit Typo3 8 wurde Fluid als Standalone Plugin weiterentwickelt und einigen Änderungen und Erweiterungen unterzogen. Da die Frage immer wieder mal auftaucht – hier eine kurze Übersicht die der if Viewhelper in Typo3 Fluid aufgebaut ist. Einmal in Typo3 7 und früher, einmal in Typo3 ab Version 8.

Fluid if Viewhelper in Typo3 7 und früher

Hier gab es das elseif-Konstrukt noch nicht, und man musste die if-Conditions in der Regel verschachteln:

<f:if condition="{variable} == 'bestimmterWert'">
    <f:then>
       // dann führe folgendes aus
    </f:then>
    <f:else>
        <f:if condition="{andereVariable} == 'bestimmterWert'">
            <f:then>
                // dann führe folgendes aus
            </f:then>
           <f:else>
               // dann führe diese Anweisungen aus
           </f:else>
        </f:if>
    </f:else>
</f:if>

Eine Ausnahme gab es, um ohne die if-Verschachtelung auszukommen – man konnte via Arrays die logische UND-Verknüpfung (&&) wie folgt nachbauen, und sich somit das Verschachteln der if-Anweisungen sparen:

<f:if condition="{0: jahre, 1: monate} == {0: vergleichsJahr, 1: vergleichsMonat}">
// dann führe folgendes aus
</f:if>

 

Fluid if-Viewhelper in Typo3 8 und höher

<f:if condition="{variable} == 'bestimmterWert'">
     <f:then>
          // dann führe folgendes aus
     </f:then>
     <f:else if="{andereVariable} == 'bestimmterWert'">
          // dann führe folgendes aus
     </f:else>
     <f:else>
         // für den Rest führe folgendes aus..
     </f:else>
</f:if>

Möglich ist auch, diese Abfragen mit logischen UND bzw. ODER in kürzerer Schreibweise zu schreiben:

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">
// Done if both variable one and two evaluate to true,
// or if either variable three or four do.
</f:if>

Weitere Beispiele:

<f:if condition="{variable} || {andereVariable}">
    // dann führe folgendes aus
</f:if>

Ist wahr, wenn eine der beiden Variablen gesetzt ist.

 

Inline Schreibweise von if-Conditions:

If – Abfragen können auch inline geschrieben werden. Das ist z.B. sinnvoll, wenn in Fluid-Templates je nach gesetzten Variablen oder bei bestimmten Varialben-Werten bestimmte CSS-Klassen ausgegeben werden sollen.

 

Beispielsweise wenn im Backend bei Inhaltselementen im Reiter „Erscheinungsbild“ bestimmte Layouts, Frames oder Abstände ausgewählt werden.

Hier die generelle Schreibweise:

{f:if(condition: variable1, then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" gesetzt ist
{f:if(condition: '{variable1} == "Yes"', then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" dem String "Yes" entspricht

{f:if(condition: '{variable1} == 1', then: 'bestimmterWert')}

// Hier wird die Variable "bestimmterWert" ausgegeben, wenn die Variable "variable1" der Zahl 1 entspricht.
{f:if(condition: '{variable1} == 1', then: 'bestimmterWert', else: 'andererWert')}

// Wenn die Variable "variable1" der Zahl 1 entspricht wird "bestimmterWert" ausgegeben, in allen anderen Fällen "andererWert".