Iteration in einer Schleife

Nicole Kalinowski

Hallo zusammen,

ich komme an einem Punkt mit Fluid nicht zurecht. Es geht darum, im BE für ein Review-Element die Anzahl von Sternen auszuwählen, die dann im FE ausgeben werden. Ich habe dafür in einem ContentBlock über einen identifire "starrate" vom Typ "SelectNumber" ein Selectbox mit fünf Einträge (one star, two stars ...). Zurückgegeben wird als value je nach Auswahl die Zahl 1 bis 5.

Wird nun im Backend "3" gewählt, möchte ich, dass das SVG 3x ausgegeben wird, wird "5" gewählt, soll das SVG 5x ausgegeben werden. Eigentlich müsste doch der nachstehende Code funktionieren. Allerdings bekomme ich dann die Meldung "The argument "each" was registered with type "array", but is of type "double" in view helper "TYPO3Fluid\Fluid\ViewHelpers\ForViewHelper"." Debugge ich {item.starrate} bekomme ich die richtige Zahl als integer ausgegeben (nicht als double).

<div class="reviewslider_stars">
    <f:for each="{0..item.starrate - 1}" as="i">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
            <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>
        </svg>
    </f:for>
</div>

Ich dachte, es sei ganz simple, eine solche Ausgabe zu generieren 😅

Gruß Nicole

Wolfgang Wagner

Ich stehe irgendwie auf dem Schlauch, aber diese Syntax mit {0.. im each-Parameter sagt mir gar nichts. Ich finde dazu nicht mal was in der Doku.

Mogens Fiebrandt

In {item.starrate} wird nur der ausgewählte Wert gespeichert. Wie Du im Debug gesehen hast, sollte dies ein Int sein.

Eine For-Schleife macht also keinen Sinn, da ansonsten versucht wird über den Integer-Wert zu iterieren. Was natürlich nicht geht. 😉

Die Fehlermeldung, dass es sich um ein Double handeln soll, liegt sicherlich an dem Fehler in dem Each-Attribut.

Ich würde an Deiner Stelle eher fünf .svg Dateien anlegen:

Star1.svg
Star2.svg
.....
Star5.svg

Und dann eher so das richtige Svg laden:

<div class="reviewslider_stars">
    <f:image src="EXT:myext/Resources/Public/Images/Star{item.starrate}.svg" alt="alt text" />
</div>

Philipp

Probier mal das in Klammern zu wrappen
<f:for each="{0..{item.starrate - 1}}" as="i">

Wolfgang Wagner

Kann mal jemand was zu dieser {0..X} Syntax erzählen? Ist das irgendwo zu finden?

Philipp

Wolfgang Wagner Laut Chat gpt wird dadurch ein Array erzeugt. Also in dem Fall von 0 bis Zielzahl minus 1. Doku dazu habe ich jetzt auch nicht gefunden.

Wolfgang Wagner

Ja, aber man findet dazu nichts, weder in der Doku noch sonst irgendwo. ChatGPT kann auch keine Quellen nennen.

Mogens Fiebrandt

Der For-ViewHelper in Fluid löst das auch nicht auf. Da hat ChatGPT wohl quatsch erzählt.

Philipp

Mogens Fiebrandt ja anscheinend hat er sich zu sehr vom Code leiten lassen den ich rein kopiert habe und dachte das geht so 😂 in anderen Programmiersprachen gibt es so eine Schreibweise aber.
Vielleicht muss man sich hier einfach einen Viewhelper bauen der einfach ein Array mit den benötigten Zahlen zurück liefert. In php sollte das mit einer normalen for schleife ja gut gehen.

Mogens Fiebrandt

Um ganz sicher zu gehen hab ich das auch nochmal getestet. Geht nicht.

Wolfgang Wagner

Dachte ich mir.

Ich hab sowas auch mal für ein Testimonal-Element folgendermaßen umgesetzt:

<f:if condition="{item.rating}">
  <f:for each="{0:1, 1:2, 2:3, 3:4, 4:5}" as="star" iteration="i">
    <f:if condition="{i.index} < {item.rating}">
      <i class="bi bi-star-fill"></i>
    </f:if>
  </f:for>
</f:if>

Da ist mir auch nichts besseres eingefallen.

Mogens Fiebrandt

@Philipp Ja. Geht sicherlich auch mit nem ViewHelper. Ist aber sicherlich mehr Aufwand als Wolfgangs Lösung. Die finde ich sogar noch besser als meine. (Was eher selten vorkommt. 🤣)

Auf das obige Beispiel umgebaut, müsste das dann ja sicherlich eher so aussehen:

  <f:if condition="{item.starrate}">
    <f:for each="{0:1, 1:2, 2:3, 3:4, 4:5}" as="star" iteration="i">
      <f:if condition="{i.index} < {item.starrate}">
        <f:then>
          <f:comment>Stern ausgeben (Gefüllt)</f:comment>
        </f:then>
        <f:else>
          <f:comment>Stern ausgeben (Ungefüllt)</f:comment>
        </f:else>
      </f:if>
    </f:for>
  </f:if>

Philipp

Mogens Fiebrandt Ist aber sicherlich mehr Aufwand als Wolfgangs Lösung.

Das tolle bei TYPO3 ist, dass es immer mehrere Lösungen gibt 😉

Mogens Fiebrandt

Das ist richtig. Finde ich auch gut.

Das Problem hier ist allerdings ja, dass immer 5 Sterne ausgegeben werden sollen. Man müsste vom ViewHelper also immer ein Array der Länge 5 bekommen und im jeweiligen Array-Element sehen können, welcher Typ Stern ausgegeben werden soll. Dann brauch man wieder eine If-Abfrage im Fluid.
Daher würde ich in diesem Fall das ganze mit Fluid lösen, obwohl ich sonst immer dazu raten würde Logik in ViewHelper auszulagern.

Nicole Kalinowski

Danke für eure Beiträge. Ich habe mir beim Code oben tatsächlich Hilfe von ChatGPT geholt, weil ich in der Doku nicht weitergekommen bin. Und da ich die Schreibweise 0..x nicht unbekannt vorkam und auch gut erläutert wurde, habe ich dem ganzen vertraut. Hingegen kam mir die von ChatGPT vorgeschlagene Lösung über eigene vh zu kompliziert vor. 😅

Ich habe durch den Beitrag hier mal wieder einiges gelernt – z.B. auch, dass man über integer nicht iterieren kann. Die Lösung von Wolfgang macht genau das, was ich möchte – ich danke euch allen.

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS