Das Widget "Zahlungsarten" ist ein Widget mit welchem du die von dir angebotenen Zahlungsarten mit Logos anzeigen lassen kannst.
ThemeWare® "Zahlungsanbieter-Logos"-Widget
Konfiguration
Das Widget "Zahlungsanbieter-Logos" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Inhalt
- Passe die Überschrift über den Textbaustein
twt.widget.payment.headlinean. - Optional: Passe den Link der Logos über den Textbaustein
twt.widget.payment.linkan. - Für individuelle Logos pflegst du Alt- und Title-Texte über
twt.widget.payment.customImage1–3.alt/.title(siehe Abschnitt "Barrierefreiheit").
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
Zahlungsarten konfigurieren
Die eigentlichen Zahlungsarten konfigurierst du in Shopware 6 über die entsprechende Verwaltung in den Shopware-Einstellungen ("Einstellungen" > "Shop").
Zahlungsanbieter-Logos
Deine Logos für die entsprechenden Zahlungsanbieter kannst du über die Zahlungsarten-Verwaltung in den Shopware-Einstellungen hochladen.
Tipp: In den kostenfreien ThemeWare® Utilities findest du ein Logo-Set mit 90 Pagespeed optimierten Grafiken für Zahlungsarten.
Barrierefreiheit
Den Tooltip-Text (title-Attribut) kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.titletwt.widget.payment.customImage2.titletwt.widget.payment.customImage3.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Alt-Attribut
Den alt-Text der benutzerdefinierten Logos kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.alttwt.widget.payment.customImage2.alttwt.widget.payment.customImage3.alt
Bei den automatisch ermittelten Zahlungsart-Logos kommt der alt-Text aus dem Alternativtext des Mediums in Shopware, ersatzweise aus dem Namen der Zahlungsart.
Hinweis: Werden die Logos verlinkt, beschreibt der alt-Text nicht mehr das Logo, sondern das Ziel des Links. Dafür wird der Text in folgenden Baustein eingesetzt:
twt.widget.payment.linkAlt(Standard:Zahlungsinformationen zu %name%)
Der Platzhalter %name% wird durch den alt-Text des jeweiligen Logos ersetzt. Ohne Verlinkung greift der Baustein nicht.
Das ist dieselbe Vorgehensweise, die Shopware beim Shop-Logo im Header verwendet: Der Link trägt keine eigene Beschriftung, sondern übernimmt sie aus dem alt-Attribut des Bildes. Ein aria-label wird nicht ausgegeben.
Optionen
- Logos verlinken
- Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein
twt.widget.payment.link.
- Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein
- Fallback-Badge anzeigen
- 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.
Zusammenfassung
Theme-Konfiguration
- Tab "Widgets" => Bereich "Zahlungsanbieter-Logos"
- Tab "Widgets" => Bereich "Zahlungsanbieter-Logos" => Abschnitt "Basiskonfiguration" => "Logos verlinken" / "Fallback-Badge anzeigen" / "Nur benutzerdefinierte Bilder anzeigen"
Textbausteine
- Überschrift
twt.widget.payment.headline
- Link für Logos (optional)
twt.widget.payment.link
- Individuelle Logos
twt.widget.payment.customImage1.alttwt.widget.payment.customImage1.titletwt.widget.payment.customImage2.alttwt.widget.payment.customImage2.titletwt.widget.payment.customImage3.alttwt.widget.payment.customImage3.title