Das Widget "Versandarten" ist ein Widget mit welchem du die von dir angebotenen Versandarten mit Logos anzeigen lassen kannst.
ThemeWare® "Versandanbieter-Logos"-Widget
Konfiguration
Das Widget "Versandanbieter-Logos" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Inhalt
- Passe die Überschrift über den Textbaustein
twt.widget.shipping.headlinean. - Optional: Passe den Link der Logos über den Textbaustein
twt.widget.shipping.linkan. - Für individuelle Logos pflegst du Alt- und Title-Texte über
twt.widget.shipping.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
Versandarten konfigurieren
Die eigentlichen Versandarten konfigurierst du in Shopware 6 über die entsprechende Verwaltung in den Shopware-Einstellungen ("Einstellungen" > "Shop").
Versandanbieter-Logos
Deine Logos für die entsprechenden Versandanbieter kannst du über die Versandarten-Verwaltung in den Shopware-Einstellungen hochladen.
Tipp: In den kostenfreien ThemeWare® Utilities findest du ein Logo-Set mit 40 Pagespeed optimierten Grafiken für Versandanbieter.
Barrierefreiheit
Den Tooltip-Text (title-Attribut) kannst du über folgende Textbausteine pflegen:
twt.widget.shipping.customImage1.titletwt.widget.shipping.customImage2.titletwt.widget.shipping.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.shipping.customImage1.alttwt.widget.shipping.customImage2.alttwt.widget.shipping.customImage3.alt
Bei den automatisch ermittelten Versandart-Logos kommt der alt-Text aus dem Alternativtext des Mediums in Shopware, ersatzweise aus dem Namen der Versandart.
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.shipping.linkAlt(Standard:Versandinformationen 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.shipping.link.
- Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein
- Fallback-Badge anzeigen
- Zeigt für Versandarten ohne hinterlegtes Logo stattdessen ein Text-Badge an.
- Nur benutzerdefinierte Bilder anzeigen
- Zeigt ausschließlich deine eigenen Logos statt der automatisch ermittelten Versandart-Logos.
Zusammenfassung
Theme-Konfiguration
- Tab "Widgets" => Bereich "Versandanbieter-Logos"
- Tab "Widgets" => Bereich "Versandanbieter-Logos" => Abschnitt "Basiskonfiguration" => "Logos verlinken" / "Fallback-Badge anzeigen" / "Nur benutzerdefinierte Bilder anzeigen"
Textbausteine
- Überschrift
twt.widget.shipping.headline
- Link für Logos (optional)
twt.widget.shipping.link
- Individuelle Logos
twt.widget.shipping.customImage1.alttwt.widget.shipping.customImage1.titletwt.widget.shipping.customImage2.alttwt.widget.shipping.customImage2.titletwt.widget.shipping.customImage3.alttwt.widget.shipping.customImage3.title