#2196 Individuelle Anpassungen mit dem ThemeWare® Customizing Plugin

Für die Integration von Template-Anpassungen kannst du unser kostenfreies Plugin "ThemeWare^® Customizing" einsetzen oder ein eigenständiges Plugin entwickeln. Template-Anpassungen müssen bei Shopware 6 mit einem Plugin und nicht (wie z.B. bei Shopware 5) in einer Theme-Ableitung umgesetzt werden.

ab Shopware 6.4

Download ThemeWare^® Customizing v1.0.2

Shopware 6.3 oder darunter

Download ThemeWare^® Customizing v1.0.1

Installation

Das Plugin muss nach dem Download über die Administration von Shopware unter "Erweiterungen" => "Meine Erweiterungen" => "Erweiterung hochladen" installiert werden. Nach der Installation muss das Plugin aktiviert werden. Mehr Informationen zur manuellen Installation von Erweiterungen findest du in unserem Artikel "Erweiterungen (Plugins, Apps oder Themes) manuell installieren" (Link siehe unten).

Funktion und Aufbau 

Durch "ThemeWare^® Customizing" ist es jetzt möglich individuelle Template-Anpassungen hinterlegen zu können. Die nachfolgenden Plugin-Ordner und Dateien sind dabei besonders interessant. 

• Datei "base.scss":
  • Basis für alle Anpassungen mit SCSS/CSS
  • Dateipfad: "custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/"
  • In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.

• Ordner "storefront":
  • Ausgangsordner für alle Template-Anpassungen mit Twig/HTML
  • Ordnerpfad: "custom/plugins/TcinnCustomizing/src/Resources/views/storefront/"

• Datei "headline.html.twig":
  • Dateipfad: "custom/plugins/TcinnCustomizing/src/Resources/views/storefront/page/product-detail/"
  • In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.

Im Ordner "storefront" kannst du alle Template-Dateien (.twig) anpassen oder überschreiben, die ThemeWare^® oder das Shopware-Theme ("Shopware default theme") verwenden. Zum Ablegen deiner Anpassungen in der richtigen Ordnerstruktur, beachte bitte den oberen Abschnitt "Einsicht in den Quellcode".

Hinweis: Bei jeder SCSS/CSS Änderung im "ThemeWare^® Customizing" Plugin muss das aktuelle Theme kompiliert werden damit Änderungen in die Storefront übertragen werden.

Hinweis: Bei jeder Template-Änderung muss der Shopware- und ggf. dere Browser-Cache geleert werden damit Änderungen in der Storefront wirksam werden.

Update

Da bei einem Update von Plugins alle Änderungen auf Datei-Ebene überschrieben werden ist es wichtig den Ordner "custom/plugins/TcinnCustomizing/src" vor einem Update zu sichern und nach dem Update wieder hochzuladen.

Update für Shopware 6.4

Um das Customizing-Plugin grundsätzlich kompatibel für Shopware 6.4 zu machen, reicht es die Datei "main.scss" in "base.scss" um zu benennen und die benötigte Shopware-Version in der Datei "composer.json" wie folgt zu modifizieren:

"require": {
  "shopware/core": "6.3.*"
},

"require": {
  "shopware/core": "6.4.*"
},

Deine individuellen Anpassungen müssen dann natürlich ebenfalls kompatibel gemacht werden. Die wichtigeste Änderung dabei ist der Abruf von Theme- oder Shopware-Variablen: 

• shopware.theme["..."] => theme_config('..')
• shopware.config.core... => config('core...')

Hinweis: Erstelle unbedingt ein Backup deiner individuellen Anpassungen vor dem Update. Denn diese individuellen Anpassungen werden bei einem Update gelöscht.

Weiterführende Links:

• Anleitung: "Individuelle Anpassungen mittels CSS"
• Anleitung: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)
• Anleitung: "Individuelle Template-Anpassungen (Twig, HTML)" (für erfahrende Anwender)
• Hintergrundwissen: "Erweiterungen (Plugins, Apps oder Themes) manuell installieren"