PrestaShop barrierefrei: Wawsome-Widget einbinden

PrestaShop hat im Backoffice kein Feld für eigenen Code. Binden Sie Wawsome mit einem Code-Modul aus PrestaShop Addons ein, oder fügen Sie ein kurzes Skript in die Datei custom.js Ihres Themes ein. Leeren Sie danach den Cache.

‍

Bevor Sie starten

‍

• Ein Wawsome-Konto, in dem Ihr Shop angelegt ist. Ihren Code finden Sie im Dashboard: Öffnen Sie Websites, wählen Sie Ihre Website, klicken Sie auf Install Widget und im Fenster Connect Widget auf Copy code.
• Zugang zum Backoffice und für Weg 2 Zugriff auf Ihre Theme-Dateien.

‍

‍

Weg 1: Ein Modul für eigenen Code

‍

Mehrere Module in PrestaShop Addons fügen eigenen Code aus dem Backoffice auf jeder Seite ein. Installieren Sie eines, fügen Sie Ihren Wawsome-Code in das Feld für Head oder Footer ein und speichern Sie. Das ist der einfachste Weg, wenn Sie keine Theme-Dateien bearbeiten.

‍

Weg 2: Die Datei custom.js Ihres Themes

‍

PrestaShop-Themes laden am Ende jeder Seite eine Datei namens custom.js. Sie ist standardmäßig leer und für eigene Skripte gedacht. Sie nimmt JavaScript an, keine HTML-Tags, also nutzen Sie diese Version des Codes. Ersetzen Sie YOUR_API_KEY durch den Wert nach data-api-key= in Ihrem kopierten Code.

‍

(function () {
  var s = document.createElement('script');
  s.src = 'https://loader.wawsome.com';
  s.setAttribute('data-api-key', 'YOUR_API_KEY');
  s.defer = true;
  document.body.appendChild(s);
})();

‍

1. Öffnen Sie die Datei assets/js/custom.js Ihres Themes.
2. Fügen Sie den Code ein und speichern Sie die Datei.

‍

Nutzen Sie wenn möglich ein Child-Theme. Ein Theme-Update ersetzt die Dateien des Original-Themes und damit auch Ihren Code.

‍

Prüfen, ob es funktioniert

‍

Gehen Sie zu Advanced Parameters > Performance und klicken Sie auf Clear cache. Im deutschen Backoffice heißen die Menüs etwas anders, liegen aber an derselben Stelle. Öffnen Sie dann Ihren Shop in einem privaten Fenster und suchen Sie den Wawsome-Button.

‍

Was das Widget behebt und was nicht

‍

• Kunden passen Text, Farben und Navigation an und nutzen Lesehilfen.
• KI ergänzt Alt-Texte für Produktbilder ohne Beschreibung. Sie können jeden Text bearbeiten.
• Theme, Produktseiten und Checkout-Schritte zählen weiterhin. Ein Scan findet Probleme wie fehlende Formularbeschriftungen, damit Sie sie in PrestaShop beheben.

‍

Mehr dazu: Kostenlosen Scan starten · Barrierefreiheitsprüfung · Anleitung für Magento

‍

FAQ zur Barrierefreiheit in PrestaShop

‍

Gibt es in PrestaShop ein Feld für eigenen Code?

‍

Nein, nicht im Backoffice. Nutzen Sie ein Modul aus PrestaShop Addons oder die Datei custom.js Ihres Themes.

‍

Entfernt ein Theme-Update das Widget?

‍

Das kann passieren, wenn Sie das Original-Theme bearbeitet haben. Legen Sie den Code in ein Child-Theme oder nutzen Sie ein Modul. Dann bleiben Updates ohne Folgen.

‍

Warum sehe ich das Widget nach dem Einfügen nicht?

‍

PrestaShop speichert Theme-Dateien im Cache. Leeren Sie den Cache unter Advanced Parameters > Performance und laden Sie Ihren Shop neu.

‍

Starten Sie mit Wawsome

‍

Machen Sie Ihren Shop für alle Kunden leichter nutzbar. Testen Sie Wawsome kostenlos oder buchen Sie eine Demo. Wir zeigen Ihnen, wie es funktioniert.

‍

Kostenlos testen oder Demo buchen (öffnet in neuem Tab).

‍

Weitere Anleitungen: Wawsome in jede Website einbinden · Installation mit Google Tag Manager