Ausnahmen für Textbaustein-Filter möglich?(SW 6.5 RC1)

[iLuHa]

Hi zusammen,

ich bin gerade dabei ein Theme auf Basis von SW6.5 zu bauen (für die anstehende Umstellung von SW5 auf SW6) für unsere Shops.

Ich möchte im Footer dem Benutzer über Textbausteine einige Freiheiten geben, den Inhalt zu gestalten, ohne dass hierfür das Theme umprogrammiert werden muss.

Nun habe ich folgende Probleme bzw. Fragen.

1. Problem - HTML Filter in Textbausteinen
Wenn ich im Textbaustein ein HTML img Tag hinterlege und speichere, fliegt dieser direkt aus. Da wird wohl der HTML Purifier eingreifen und das herausfiltern, da ul Listen und Basic-Elemente wie strong problemlos funktionieren.

Da mir das img Tag bereits in der Administration herausgefiltert wird, lässt sich das auch nicht über das |raw im Frontend ausgeben.

Beispiel:

<img src="/media/2c/2d/73/1678184323/footer_icons_test.png">

Trage ich dies nun in mein Freitextfeld ein und speichere dieses, ist das Freitextfeld nach dem Abspeichern wieder leer.
Wenn ich nun weiteres HTML mit hinzufügen, wird lediglich der img Tag herausgefiltert.

Lässt sich das irgendwie umgehen oder einstellen?
Kann ich für den HTML Purifier irgendwelche Ausnahmen definieren oder ähnliches?
Welche alternative Möglichkeit würde es geben, dem User eine Möglichkeit zu bieten, auch Bilder im Frontend verwenden und tauschen zu können?

2. Problem - Font Awesome SVGs in Textbausteinen
Das gleiche Problem habe ich auch, wenn ich versuche die Font Awesome SVGs in einem Textbaustein zu verwenden, auch dieses wird herausgefiltert.

Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/>
</svg>

Über die Twig Funktion

{% sw_icon ... %}

komme ich da ja leider auch nicht weiter, da Twig in den Textbausteinen auch nicht funktioniert.

3. Frage - theme.json Config Field Translation
Ich habe über die theme.json einige config fields erstellt, die zur Steuerung gewisser Sachen im Template da sind.
Wenn ich hier nun ein Text-Feld verwende, ist dieses aber nicht übersetzbar. Gibt es eine Möglichkeit das Feld übersetzbar zu machen, oder wird es das sinnvollste sein, hierfür einfach die Textbausteine zu verwenden?

[Laudenz]

Ich antworte mal auf dein erstes Problem:
Lass den Benutzer doch nur den Link zu dem Bild in den Textbaustein eintragen, keine HTML-Tags.
In TWIG fragst du an entsprechender Stelle ab, ob der besagte Textbaustein einen Wert hat. Falls ja, kannst du den HTML img Tag in TWIG schreiben und als src den Textbaustein angeben.

Grüße

[iLuHa]

Das würde aber auch nur in dem Fall funktionieren, wenn der Textbaustein immer rein nur für dieses eine Bild verwendet wird.
Oder für eine fest definierte Struktur wie

<p>[text]</p> <!-- Freitextfeld 1 -->
<img src="[img]"> <!-- Freitextfeld 2 -->
<p>[text]</p> <!-- Freitextfeld 3 -->

---

Konkretes Beispiel:
Im Footer sollen die Icons für Versand angezeigt werden, aber nicht wie die Standard Funktion, dass alle Images der Versandarten dargestellt werden, sondern es sollen nur gewisse Icons angezeigt werden, die man selbst festlegen möchte.

Ich könnte hier natürlich wie vorgeschlagen ein Textbaustein für den „src“ angeben und darstellen lassen.
Aber wenn der Benutzer hier nun mehrere einzelne Bilder verwenden möchte (z.B. wegen Responsive Verhalten der Icons usw.) müsste ich ja eine feste Anzahl an Textbausteinen für die jeweiligen „src“ zur Verfügung stellen.

Sauberer wäre es an der Stelle, wenn der User einfach per HTML selbst die Bilder dort einfügen könnte.

---

Ich möchte dem User da möglichst viel Freiraum bieten, damit ich bei Änderungen das Template nicht anfassen muss hierfür.

Deshalb wäre es mir eig. am liebsten, wenn ich hier irgendwie den Filter etwas entschärfen könnte und z.B. SVGs und IMG Tags zulassen bzw. aus dem Filter ausschließen könnte.

[iLuHa]

Okay, also wie man img Tags zulässt habe ich nun herausfinden können.

Hierfür muss man die entsprechende Stelle für den html_sanitizer in der shopware.yaml überschreiben / ergänzen → platform/shopware.yaml at trunk · shopware/platform · GitHub

Wenn ich dort bei basic > tags img hinzufüge und zusätzlich bei basic > attributes das src, dann funktioniert es, dass die img Tags nicht mehr aus den Snippets gefiltert werden.

Bei den SVGs habe ich weiterhin das Problem.
Das lässt sich wohl nicht darüber freischalten, dass ich svg bei den basic > tags ergänze

Hier erhalte ich dann beim Speichern des Snippets die Fehlermeldung:

Die Textbausteine für "[snippet-name]" konnten nicht gespeichert werden.
Error Message: "User Warning: Element 'svg' is not supported (for information on implementing this, see the support forums) "

Für den Fall werde ich wohl einfach zusätzlich die Font Awesome WebFonts mit einbinden, damit diese über die <i ...></i> Tags in den Textbausteinen verwendet werden können.

Die nicht übersetzbaren Felder in der theme.json werde ich wohl ebenfalls in die Textbausteine auslagern.

Wobei es sich bei der Filter der img Elemente um ein Fehlverhalten von SW 6.5 handeln dürfte.
Habe hierzu ein Ticket im Issue Tracker eröffnet, welches sich auch bereits „in Bearbeitung“ befindet. → Shopware Issuetracker

[Thorsten-A]

Nur zur Ergänzung/Info falls noch von Interesse.
Mit sw6.4.20 konnte ich erfolgreich img und svg tags in Textbausteinen einbauen und verwenden (siehe unten mein Beispiel).

Mein Test-Beispiel HTML-Quellcode für Textbaustein „mySvgEnvelope“:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">Shopware 6 Icon – envelope<path d="M3.74379366,5 L10.8530753,9.97649716 C11.5417156,10.4585454 12.4582844,10.4585454 13.1469247,9.97649716 L20.2562063,5 L3.74379366,5 Z M22,6.22065556 L14.2938494,11.614961 C12.9165688,12.5790574 11.0834312,12.5790574 9.70615062,11.614961 L2,6.22065556 L2,18 C2,18.5522847 2.44771525,19 3,19 L21,19 C21.5522847,19 22,18.5522847 22,18 L22,6.22065556 Z M3,3 L21,3 C22.6568542,3 24,4.34314575 24,6 L24,18 C24,19.6568542 22.6568542,21 21,21 L3,21 C1.34314575,21 2.02906125e-16,19.6568542 0,18 L0,6 C-2.02906125e-16,4.34314575 1.34314575,3 3,3 Z" fill-rule="evenodd" fill="#e5007d"></path></svg>

[iLuHa]

@Thorsten-A
Hey, ja mir ist mittlerweile auch aufgefallen dass es wohl am RC von SW 6.5.0.0 liegt.

Habe hierfür auch schon ein Ticket im Issuetracker aufgemacht → Shopware Issuetracker

Da wird wohl einiges rausgefiltert, was vorher mit SW6.4.X möglich war.

Unter anderem target und rel Attribute in a Tags.
Ebenso img und svg Tags.

Liegt wohl daran dass da was am HTML Purifier verändert wurde und nun die Standard Einstellungen vom HTML Purifier greifen, was aber recht strikt eingestellt zu sein scheint.