Das Widget "Zahlungsarten" ist ein Widget mit welchem du die von dir angebotenen Zahlungsarten mit Logos anzeigen lassen kannst.
Das Widget "Zahlungsanbieter-Logos" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Passe die Überschrift über den Textbaustein twt.widget.payment.headline an.
Optional: Passe den Link der Logos über den Textbaustein twt.widget.payment.link an.
Für individuelle Logos pflegst du Alt- und Title-Texte über twt.widget.payment.customImage1–3.alt / .title (siehe Abschnitt "Barrierefreiheit").
Die eigentlichen Zahlungsarten konfigurierst du in Shopware 6 über die entsprechende Verwaltung in den Shopware-Einstellungen ("Einstellungen" > "Shop").
Deine Logos für die entsprechenden Zahlungsanbieter kannst du über die Zahlungsarten-Verwaltung in den Shopware-Einstellungen hochladen.
Den Tooltip-Text (title-Attribut) kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.title
twt.widget.payment.customImage2.title
twt.widget.payment.customImage3.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Den alt-Text der Logos kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.alt
twt.widget.payment.customImage2.alt
twt.widget.payment.customImage3.alt
Beschriftung des Links: Als Text wird der title-Text des jeweiligen Logos verwendet, bei den automatisch ermittelten Zahlungsart-Logos der Name der Zahlungsart. Ein aria-label am Link wird nicht ausgegeben: Der versteckte Text ist gleichwertig, weil er als echter Textinhalt vorgelesen wird und zusätzlich von Übersetzungsfunktionen des Browsers erfasst wird.
Logos verlinken
Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein twt.widget.payment.link.
Fallback-Badge anzeigen
Tab "Widgets" => Bereich "Zahlungsanbieter-Logos"
Tab "Widgets" => Bereich "Zahlungsanbieter-Logos" => Abschnitt "Basiskonfiguration" => Logos verlinken / Fallback-Badge anzeigen / Nur benutzerdefinierte Bilder anzeigen
Überschrift
twt.widget.payment.headline
Link für Logos (optional)
Zeigt für Zahlungsarten ohne hinterlegtes Logo stattdessen ein Text-Badge an.
Nur benutzerdefinierte Bilder anzeigen
Zeigt ausschließlich deine eigenen Logos statt der automatisch ermittelten Zahlungsart-Logos.
twt.widget.payment.link
Individuelle Logos
twt.widget.payment.customImage1.alt
twt.widget.payment.customImage1.title
twt.widget.payment.customImage2.alt
twt.widget.payment.customImage2.title
twt.widget.payment.customImage3.alt
twt.widget.payment.customImage3.title
Hinweis: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: Texte bearbeiten und übersetzen
Tipp: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: Shopware Cache leeren / aufwärmen
Tipp: In den kostenfreien ThemeWare® Utilities findest du ein Logo-Set mit 90 Pagespeed optimierten Grafiken für Zahlungsarten.
Hinweis: Werden die Logos verlinkt, bleibt das alt-Attribut des Bildes leer (alt=""), weil das Bild dann nur "dekorativ" ist. Die Beschriftung übernimmt in diesem Fall ein visuell versteckter Text (<span class="visually-hidden">) innerhalb des Links.