ThemeWare® Customizing App (Cloud)

In diesem Artikel erfährst du alles über die kostenfreie "ThemeWare® Customizing App".

Individuelle Anpassungen müssen bei Shopware 6 mit einem eigenen Theme oder einer Erweiterung (Plugin oder App) umgesetzt werden.

Für die Integration von individuellen Anpassungen kannst du eine Erweiterung aus dem Shopware Community Store oder unsere kostenfreie "ThemeWare® Customizing App" (eine Erweiterung auf Basis des App-Systems von Showpare 6) einsetzen.

Hinweis: Nutze in der Shopware 6 (self-managed) bitte das "ThemeWare® Customizing Plugin".

---

Download

Den Download-Link für das kostenlose "Customizing Plugin" erhältst du über die ThemeWare® Utilities:

ThemeWare® Utilities | ThemeWare® Service Portal

ThemeWare® Utilities

Wichtig: Bitte beachte, dass wir die "ThemeWare® Customizing App" kostenfrei anbieten und für die App oder individuelle Anpassungen keinen Support anbieten können.

---

Installation

Wichtig: Die Möglichkeit Apps manuell in der Cloud installieren zu können ist noch ganz frisch und derzeit in der Beta-Phase!

Die App muss über die Administration von Shopware unter "Erweiterungen" => "Meine Erweiterungen" über den Button "Erweiterung hochladen" hochgeladen werden.

Installiere und aktiviere die App danach.

Es kann vorkommen, dass bei der Aktivierung der Fehler "Undefined variable $twt-color-brand-secondary-light" erscheint. Die App wird aber dennoch aktiviert.

Unable to compile the theme "Storefront". Undefined variable $twt-color-brand-secondary-light...

Kompiliere nach der Aktivierung einmal dein ThemeWare® Theme neu (speichere dazu beispielsweise einfach die Theme-Konfiguration unverändert ab) und leere einmal den Shopware-Cache.

Mehr Informationen zur manuellen Installation von Erweiterungen findest du im Artikel:

Erweiterungen manuell installieren

Wurde die Erweiterung erfolgreich installiert, erscheinen Beispiel-Implementierungen (eine JavaScript "Testnachricht" und ein "Testbanner") in der Storefront:

ThemeWare® Customizing App

Beispiel-Implementierungen aktivieren/deaktivieren

Ab Version 4.0 kannst du in den App-Einstellungen die Beispiel-Implementierungen (z.B. den "Testbanner") aktivieren bzw. deaktivieren.

---

Aufbau und Funktion

Durch die "ThemeWare® Customizing App" ist es möglich individuelle Anpassungen hinterlegen zu können. Die nachfolgenden Ordner und Dateien sind dabei relevant.

• Datei "base.scss":

  • Basis für alle Anpassungen mit CSS/SCSS

  • Ordner: Resources/app/storefront/src/scss

  • Hinweis: In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.

• Datei "base.html.twig":

  • Beispiel für Template-Anpassungen mit Twig/HTML

  • Ordner: Resources/views/storefront

  • Hinweis: In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.

• Datei "custom.plugin.js":

  • Beispiel für ein JS-Plugin (wird über die Datei Resources/app/storefront/src/main.js importiert)

  • Ordner: Resources/app/storefront/src/js

  • Hinweis: In der Datei ist ein Beispiel JS-Plugin hinterlegt, das bearbeitet oder gelöscht werden kann.

• Assets

  • Ordner: Resources/public

Hinweis: In der "base.scss", der "base.html.twig" sowie der "custom.plugin.js" findest du Beispielanpassungen. Passe den Inhalt der Dateien an deine Wünsche an.

---

Update

Da das Plugin kostenfrei und nicht über den Shopware Store erhältlich ist, gibt es derzeit keine automatische Update-Möglichkeit.

Deaktiviere das Plugin bevor du ein Shopware-Update durchführst. Informationen zum manuellen aktualisieren deines Plugins findest du nachfolgend:

Manuelles Update

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

Hinweis: Eine aktuelle Version findest du in den ThemeWare® Utilities.

Nachfolgend findest du Hinweise zu manuellen Update-Möglichkeiten für die letzten Shopware 6 Major-Releases:

Shopware 6.7

Die Customizing-App für Shopware 6.6 ist bereits kompatibel mit Shopware 6.7.

Die einzige Änderung die nötig ist betrifft den Twig-Block für unsere Beispielanpassung, diesen Block hast du aber vermutlich bereits entfernt oder aus kommentiert:

base.html.twig

{% block base_header %}
>>
{% block base_body_inner %}

Hinweis: Bitte beachte, dass Deine individuellen Anpassungen ggf. ebenfalls kompatibel gemacht werden müssen.

Mehr Informationen zu den umfangreichen Änderungen der Storefront in Shopware 6.7 findest du im ThemeWare® Service Portal:

Shopware 6.7 – Das musst du wissen | ThemeWare® Service Portal

Shopware 6.6

Um die Customizing-App kompatibel für Shopware 6.6 zu machen musst du folgende Änderungen vornehmen:

SCSS

Falls du es nicht bereits für Shopware 6.5 gemacht hast, aktualisiere bitte die Datei "_messagebox.scss":

_messagebox.scss

color: color-yiq($twt-color-brand-secondary-light);
>>
color: color-contrast($twt-color-brand-secondary-light);

JavaScript

Darüber hinaus wurde die Integration von JavaScript-Plugins in die Storefront mit Shopware 6.6 geändert. Lösche bitte alle Scripte im Ordner Resources\app\storefront\dist\storefront\js und baue die Storefront einmal neu (z.B. mit build-storefront.sh).

Hinweis: Bitte beachte, dass Deine individuellen Anpassungen ggf. ebenfalls kompatibel gemacht werden müssen.

Mehr Informationen zu den umfangreichen Änderungen der Storefront in Shopware 6.6 findest du im Service Portal:

Shopware 6.6: Ein Ausblick | ThemeWare® Service Portal

Shopware 6.5

Um das Customizing-Plugin grundsätzlich kompatibel für Shopware 6.5 zu machen, reicht es die benötigte Shopware Version in der Datei "_messagebox.scss" wie folgt zu modifizieren:

_messagebox.scss

color: color-yiq($twt-color-brand-secondary-light);
>>
color: color-contrast($twt-color-brand-secondary-light);

Dadurch wird die Erweiterung mit Shopware 6.5 kompatibel und braucht nicht aktualisiert werden.

Stand: Shopware 6.6.0