Custom CSS & Custom JavaScript
Beschreibung
Highlights
Über die Erweiterung
Individueller Code landet meist irgendwo im Theme, wo er schwer zu finden ist, schwer abzuschalten und nur von jemandem mit Dateizugriff zu bearbeiten. Diese Erweiterung verlegt diesen Code in die Administration und speichert ihn in benannten Containern. Jeder Container enthält einen CSS/SCSS-Block und einen JavaScript-Block, hat einen eigenen Aktiv-Schalter und lässt sich bestimmten Verkaufskanälen zuweisen oder für alle offen lassen.
Das CSS wird gemeinsam mit den übrigen Theme-Styles an den Compiler übergeben. SCSS-Syntax und vorhandene Theme-Variablen wie $primary oder $font-family-base funktionieren deshalb direkt im Editor, und das Ergebnis landet im regulären Stylesheet des Themes. Das JavaScript wird bei der Kompilierung in das Skriptverzeichnis des Themes geschrieben und als statische Datei ausgeliefert.
Nicht jedes Snippet gehört auf jede Seite. Ein Container lässt sich auf ausgewählte Seiten begrenzen oder von ihnen ausnehmen. Eine Seite gilt als ausgewählt, sobald ein Kriterium zutrifft: der Seitentyp (Startseite, Kategorie-Listing, Produktdetailseite, Suche, Warenkorb, die Checkout-Schritte, Kundenkonto-Seiten, Landingpages und CMS-Seiten), ein URL-Pfad mit Platzhaltern, ein Produkt samt seiner Varianten, eine Kategorie mit oder ohne Unterkategorien oder eine Landingpage. Die Prüfung erfolgt beim Rendern der Seite. Kriterien lassen sich also jederzeit anpassen und wirken beim nächsten Seitenaufruf. Der Wechsel des Auslieferungsmodus selbst sowie Änderungen am Code erfordern eine Kompilierung, die der Button Speichern & Kompilieren übernimmt.
Das JavaScript eines eingeschränkten Containers wird in eine Bedingung gepackt, sein CSS wird automatisch so umgeschrieben, dass jeder Selektor nur unterhalb des passenden body-Elements greift. Verschachtelte media-, supports-, container- und layer-Blöcke werden dabei ebenfalls berücksichtigt.
Für Skripte, die eine Einwilligung brauchen, lässt sich pro Container ein Cookie-Name hinterlegen. Das JavaScript wartet dann, bis dieses Cookie mit einem Wert vorliegt, und startet, sobald der Besucher zustimmt, ohne Neuladen der Seite. Der Container kann sich als eigener Eintrag im Cookie-Consent-Manager der Storefront registrieren oder auf ein Cookie setzen, das ein externes Consent-Tool schreibt. Diese Bindung gilt für JavaScript, CSS wird immer geladen.
Bei jedem Speichern entsteht ein Snapshot mit dem Code, allen Einstellungen und dem speichernden Benutzer. Die letzten 20 Snapshots pro Container bleiben erhalten, werden mit Datum und Benutzername aufgelistet und lassen sich zurück in die Felder laden. Was aktuell live ist, bleibt unangetastet, bis der wiederhergestellte Stand gespeichert wird.
Details
- Verfügbar in: Englisch, Deutsch
- Zuletzt aktualisiert: 12. August 2026
- Veröffentlicht: 20. August 2024
- Version: 2.1.0
- Kategorie: Sonderfunktionen
Ressourcen
Bewertungen (3)
Super Plugin
Einfacher geht nicht
Super Plugin
Über den Extension Partner
weedesign
Partner Status
-
Shopware
Extension Partner
Details
- Ø-Bewertung: 4.9
- Partner seit: 2019
- Erweiterungen: 49
Support
- Land: Germany
- Spricht: Deutsch, Englisch
- Reaktionszeit: Sehr schnell