Das brauchst du
Dateizugriff auf den Ordner themes, Administratorrechte im Back Office und ein installiertes Eltern-Theme. Erstelle vorher eine Sicherung. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Lege unter
/themes/ein Child-Theme mitconfig/theme.ymlundpreview.pngan. Trage intheme.ymlden Ordnernamen alsname, dein aktives Theme alsparentund unterassetsuse_parent_assets: trueein. - Erstelle im Child-Theme die Datei
templates/layouts/layout-both-columns.tplmit{extends file='parent:layouts/layout-both-columns.tpl'}. - Überschreibe darin den Block
hook_before_body_closing_tag. Gib zuerst{$smarty.block.parent}aus und füge danach den unveränderten Einbaucode ein. - Aktiviere das Child-Theme unter Design → Template und Logo. Leere unter Erweiterte Einstellungen → Leistung den Cache.
- Prüfe Startseite, Kategorie, Produkt, Warenkorb und Kasse in einem privaten Fenster und in der mobilen Ansicht.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Classic und Hummingbird enthalten den Block in layouts/layout-both-columns.tpl. Andere Themes können abweichen. Ohne das parent:-Präfix verweist die Vorlage auf sich selbst. Teste die Theme-Aktivierung zuerst in einer Kopie deines Shops. Externe Zahlungsseiten und eingebettete Zahlungsfelder erreicht das Widget nicht.
Häufige Fragen zu PrestaShop
Erscheint das Widget auch im Checkout?
Im Theme Classic ja. Die Checkout-Vorlage erweitert das Standardlayout, und dieses baut auf layouts/layout-both-columns.tpl auf. Dort steht der Block vor dem schließenden body-Tag. Externe Zahlungsseiten und eingebettete Zahlungsfelder erreicht das Widget nicht. Teste den Checkout deshalb vollständig.
Bleibt mein Einbau bei Theme-Updates erhalten?
Ja. Ein Child-Theme übernimmt Vorlagen und Assets vom Eltern-Theme. Du überschreibst nur, was du ändern willst. Das Eltern-Theme kannst du unabhängig davon aktualisieren.
Was gilt im Multistore-Betrieb?
Jeder Shop kann ein eigenes Theme nutzen. Weise dein Child-Theme jedem Shop zu, der das Widget zeigen soll. Haben die Shops eigene Domains, braucht jede Domain ein eigenes Accessonaut-Projekt und damit ein eigenes Child-Theme.
Welche Cache-Einstellungen sind wichtig?
Unter Erweiterte Einstellungen → Leistung steuerst du die Template-Kompilierung. Werden Templates nie neu kompiliert, siehst du Änderungen erst nach dem Leeren des Caches. Beim Einrichten hilft die Einstellung, Templates bei geänderten Dateien neu zu kompilieren.
Muss ich „Combine, Compress and Cache“ abschalten?
Für den Einbau ist das nicht nötig. PrestaShop rät aber, nach dem Einschalten des Smart Cache für JavaScript alles zu testen, bevor die Einstellung aktiv bleibt. Prüfe dabei auch, ob das Widget weiter erscheint und sich bedienen lässt.
Wenn etwas nicht klappt
Das Widget fehlt nach dem Speichern der Vorlage.
Ursache: Smarty nutzt noch kompilierte Templates.
Lösung: Leere den Cache unter Erweiterte Einstellungen → Leistung oben auf der Seite.
In einem Shop des Multistores fehlt das Widget.
Ursache: Dieser Shop nutzt ein anderes Theme.
Lösung: Weise dem Shop das Child-Theme zu und leere den Cache.
Du willst das Widget entfernen.
Ursache: Der überschriebene Block im Child-Theme gibt den Code aus.
Lösung: Entferne den Einbaucode aus hook_before_body_closing_tag und lass {$smarty.block.parent} stehen. Alternativ aktivierst du wieder das Eltern-Theme. Leere danach den Cache.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.