Das Widget "Auszeichnungen, Siegel oder Zertifikate" ist, wie der Name bereits sagt, ein Widget für Shop-Auszeichnungen bzw. Trust-Badges oder Sicherheits-Zertifikate.
ThemeWare® "Auszeichnungen, Siegel oder Zertifikate"-Widget
Konfiguration
Das Widget "Auszeichnungen, Siegel oder Zertifikate" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Inhalt
- Passe die Überschrift über den Textbaustein
twt.widget.awards.headlinean. - Passe den Text über den Textbaustein
twt.widget.awards.contentan.- Beide werden nur angezeigt, wenn die Option "Zusatztext anzeigen" aktiviert ist.
- Das mitgelieferte SSL-Siegel beschriftest du über
twt.widget.awards.sslSeal.alt/.title. - Für individuelle Logos pflegst du Title, Alt-Text (verlinkt und nicht verlinkt) und alternative URL über
twt.widget.awards.customImage1–6.*(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
Barrierefreiheit
Bilder wie z. B. Zertifikate oder Siegel, die über die Theme-Konfiguration integriert werden, erhalten leider nicht automatisch den in der Meidenverwaltung hinterlegten alt-Text. Damit diese Bilder trotzdem barrierefrei eingebunden werden können, stellt ThemeWare® hierfür separate Textbausteine bereit, die du individuell nutzen kannst.
Title
Den Tooltip-Text (title-Attribut) kannst du über folgenden Textbaustein pflegen:
twt.widget.awards.customImage1.titletwt.widget.awards.customImage2.titletwt.widget.awards.customImage3.titletwt.widget.awards.customImage4.titletwt.widget.awards.customImage5.titletwt.widget.awards.customImage6.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Alt-Attribut
Der beschreibende Text steht immer im alt-Attribut des Bildes. Welcher Textbaustein dafür herangezogen wird, hängt davon ab, ob das Bild verlinkt ist oder nicht:
- Nicht verlinktes Bild
- Der
alt-Text beschreibt das Bild selbst und wird über den Baustein...customImageX.altgepflegt.
- Der
- Verlinktes Bild
- Der
alt-Text beschreibt das Ziel des Links, denn hier trägt der Link die eigentliche Bedeutung. Dafür wird der Baustein...customImageX.ariaLabelverwendet.
- Der
Hinweis: Ein aria-label am <a>-Tag wird nicht mehr ausgegeben. Das entspricht der 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.
Tipp: Gestalte deine alt-Texte ausführlicher, konkreter und kontextbezogener als beispielsweise den titel-Text.
Statt nur "SSL-verschlüsselt", könntest du z. B. schreiben: "Ihre Daten sind durch SSL-Verschlüsselung geschützt". So profitieren auch Screenreader-Nutzer und es wirkt gleichzeitig vertrauensvoller für alle Besucher.
Optionen
- Zusatztext anzeigen
- Blendet Überschrift und Text ein (Textbausteine
twt.widget.awards.headline/twt.widget.awards.content).
- Blendet Überschrift und Text ein (Textbausteine
- Standard SSL-Siegel anzeigen
- Zeigt das mitgelieferte SSL-Siegel an (verfügbar in Deutsch und Englisch).
Zusammenfassung
Theme-Konfiguration
- Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate"
- Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate" => Abschnitt "Basiskonfiguration" => "Zusatztext anzeigen" / "Standard SSL-Siegel anzeigen"
Textbausteine
- Überschrift
twt.widget.awards.headline
- Text
twt.widget.awards.content
- SSL-Siegel
- Alt-Attribut:
twt.widget.awards.sslSeal.alt - Title-Attribute:
twt.widget.awards.sslSeal.title
- Alt-Attribut:
- Titel für individuelle Logos
twt.widget.awards.customImage1.titletwt.widget.awards.customImage2.titletwt.widget.awards.customImage3.titletwt.widget.awards.customImage4.titletwt.widget.awards.customImage5.titletwt.widget.awards.customImage6.title
- Alternative URLs für individuelle Logos
twt.widget.awards.customImage1.urltwt.widget.awards.customImage2.urltwt.widget.awards.customImage3.urltwt.widget.awards.customImage4.urltwt.widget.awards.customImage5.urltwt.widget.awards.customImage6.url
- Alt-Attribut (wird verwendet, wenn das Bild nicht verlinkt ist)
twt.widget.awards.customImage1.alttwt.widget.awards.customImage2.alttwt.widget.awards.customImage3.alttwt.widget.awards.customImage4.alttwt.widget.awards.customImage5.alttwt.widget.awards.customImage6.alt
- Alt-Attribut (wird verwendet, wenn das Bild verlinkt ist)
twt.widget.awards.customImage1.ariaLabeltwt.widget.awards.customImage2.ariaLabeltwt.widget.awards.customImage3.ariaLabeltwt.widget.awards.customImage4.ariaLabeltwt.widget.awards.customImage5.ariaLabeltwt.widget.awards.customImage6.ariaLabel