Individuellen JavaScript-Code einbinden

In diesem Artikel erfährst du, wie du deinen eigenen JavaScript-Code mit ThemeWare® einbinden kannst.

Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenen JS-Code in deinen Shop einzubinden.

Bitte beachte, dass individueller Code nicht automatisch komprimiert wird. Komprimiere deinen individuellen Code am besten manuell, bevor du diesen einbindest.

Hinweis: Individueller JS-Code wird nicht automatisch komprimiert. Komprimiere deinen Code am besten manuell.

Beachte zudem, dass individuelle Skript nicht in automatisch in den Cookie-Consent-Manager von Shopware übernommen werden. Nutzt du Cookie relevanten JS-Code, sorge für eine korrekte Einbindung in den Cookie-Consent-Manager.

Wichtig: Bitte beachte, dass individuelles JavaScript nicht automatisch in den Cookie-Consent-Manager integriert wird.

Bevor wir zu eigentlichen Einbindungen kommen, möchten wir noch darauf hinweisen, in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes) zu bearbeiten. Das kann zu diversen Problemen führen.

Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!

Zudem weisen wir darauf hin, das die Funktionalität von Shopware, ThemeWare® und Erweiterungen Dritter durch fehlerhaftem JavaScript-Code erheblich gestört werden können. Achte daher unbedingt darauf, sauberen und fehlerfreien JS-Code zu schreiben!

Vorsicht: Individuelle JavaScript-Code kann zu Problemen führen die verschiedenste Funktionen von Shopware, ThemeWare® oder Erweiterungen Dritter stören können! Nutze JavaScript nur, wenn du dir absolut sicher bist.

1. JavaScript-Code mit Konfigurationsfeld integrieren

Hinterlege den gewünschten JS-Code in folgendem Konfigurationsfeld: Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individueller Code" => Feld "Individueller JavaScript-Code"

Der Inhalt der Konfigurationsfeldes wird 1:1 am Ende der HTML-Seite hinzugefügt. Trage hier daher bitte den vollständigen <script> Tag ein.

Beispiel:

<script>
  alert( 'Hello, world!' );
</script>

Tipp: Damit die "Experten-Einstellungen" in der Storefront angewendet werden aktiviere bitten den "Experten-Modus" und deaktiviere den "Debug-Modus" von ThemeWare®:

• Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus

• Experten-Modus

• Debug-Modus

2. JavaScript-Code mit externer JS-Datei integrieren

Um eine Datei lokal auf deinem Server zu hinterlegen und diese in die Storefront zu integrieren, gehe bitte wie folgt vor:

2.1) JS-Datei auf dem Server erstellen und bearbeiten

1. Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "js".

   • Ordnerpfad: "public/js/"

2. Erstelle die Datei "script.js".

3. Hinterlege in der "script.js" deinen JS-Code.

4. Speichere die Änderung der Datei "script.js" und lade diese ggf. erneut hoch.

2.2) JS-Datei mit ThemeWare® einbinden

1. Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "JavaScript-Datei".

2. Trage im Feld "JavaScript-Datei laden" den Pfad zur "script.js" ein. (z.B. "deinshop.de/js/script.js")

3. Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront wirksam werden.

4. Wähle die Option "Ja" im Feld "CSS-Datei laden" aus.

Hinweis: Der Zugriff auf externe Dateien (Dateien auf einer abweichenden Domain) wird nicht empfohlen, beachte hierzu "Cross-Origin Resource Sharing".

3. Individuellen JavaScript-Code integrieren (für erfahrende Anwender)

Die derzeit professionellste Methode JavaScript-Code zu integrieren, ist die Verwendung eine separaten Erweiterung. Hierfür gibt es spezielle Erweiterungen (Plugins oder Apps) im Shopware Community Store.

Alternativ kannst du unser kostenfreies "ThemeWare® Customizing Plugin" (Self-managed) bzw. die "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien nutzen.