Theme Konfiguration & Entwicklung

Shopwareianer · June 2019

Soweit ich das verstanden habe kann man ja bisher nicht wirklich ein eigenes Theme bauen bzw. aufbauen auf der Storefront, gerade bezogen auf die Sass, JS Files & Co.

Kann man hier ganz grob abschätzen, wann der Workflow/Leitfaden für ein custom Frontend Theme kommen wird?

Damit man ggf. schon einmal beginnen kann, wird es eine Art Theme Manager geben wie bei SW5, worüber man dann Theme Konfigurationen hat?

Oder kann man hier ein komplett eigenes Administrations Modul bauen für die Konfiguration? Bspw. ähnlich wie bei Wordpress damals ( schon lange nicht mehr mit gearbeitet ). Oder ist das nich sinnig und man sollte lieber warten, bis der Frontend Stack released ist?

robjke · June 2019

Ich häng mich mal dran und frage welcher compiler später für sass genutzt wird.

Leider bietet nicht jedes webhosting NodeJS an.

Wird man hier am Ende auf ein php-sass compiler setzen?!

Shopwareianer · June 2019

@Moritz Naczenski‍ @Patrick Stahl‍ Könnt Ihr hier vielleicht noch einmal helfen?

Ich bin da noch nicht ganz hinter gestiegen: Oder kann ich bereits auch schon ohne den Theme Workflow beginnen mit einem custom Theme? Dazu müsste ich dann meinen eigenen webpack/grunt/what ever Task bauen für die Sass Files? Und die kompilierte CSS dann vorerst "manuell" in den Header packen? Oder wie würde es aktuell funktionieren?

Oder könnt Ihr bereits sagen: "Nächste Woche kommt eh der Theme Workflow"? :P

Patrick Stahl · June 2019

Moin @Shopwareianer‍,

das Thema "Custom CSS / SASS / JS" ist schon in der Mache und zu großen Teilen abgeschlossen. Sobald der Commit dann im Core landet, fange ich auch parallel an, das über ein HowTo zu dokumentieren.

Wie das Thema "Themes" ausschaut, weiß ich gerade aber nicht, sorry!

Gruß,
Patrick

Shopwareianer · June 2019

@Patrick Stahl‍ Wie sieht es denn mit der Theme Konfiguration aus? Gibt es da wieder eine Art Theme Manager mit custom Settings?

Oder kann/sollte man das ganze selber im Plugin bauen? Es ist gerade ein wenig schwer abzuschätzen wie ich bereits mit der Theme Entwicklung starten kann, da eben was das Frontend anbelangt noch keinerlei Informationen vorlegen und man auch nicht abschätzen kann, wann da was kommt. Aber natürlich möchte man es asap fertig bekommen für den Store

Shopwareianer · June 2019

Wie bekommen wir denn eigentlich mit, wann der Theme Workflow fertig ist und man damit arbeiten kann?

@Moritz Naczenski‍

AndreHerking · June 2019

Hier siehst du immer die letzten Updates: https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/recent-updates

Patrick Stahl · June 2019

Moin @Shopwareianer‍,

wie bereits zuvor häufig passiert, pinge ich dich direkt an, sobald es hier etwas Neues gibt.
Häufig dann auch mit einem Beispiel-Plugin oder einer Dokumentation.

Gruß,
Patrick

Larineso · June 2019

Gibt es denn diesbezüglich noch keine neuen Infos, die ihr uns geben könnt? In einem anderen Thread hat Jens geschrieben, dass sich das Theme-System zur Zeit in Arbeit befindet, aber voraussichtlich noch vor Juli verfügbar sein wird. Haben die Agenturen, die schon im Juli eigene Themes veröffentlichen werden Zugang zu aktuelleren Repositorys, oder wie machen die das?

Liebe Grüße

robjke · June 2019

@Larineso schrieb:

Gibt es denn diesbezüglich noch keine neuen Infos, die ihr uns geben könnt? In einem anderen Thread hat Jens geschrieben, dass sich das Theme-System zur Zeit in Arbeit befindet, aber voraussichtlich noch vor Juli verfügbar sein wird. Haben die Agenturen, die schon im Juli eigene Themes veröffentlichen werden Zugang zu aktuelleren Repositorys, oder wie machen die das?

Liebe Grüße

Ich würde sagen diese Agenturen überschätzen sich.

In einer Entwickler Vorschau zu sagen dass Themes im Juni erscheinen, obwohl diese noch nichtmal im GitHub master branch implementiert sind, ist absolut lächerlich.

Es sei denn diese Agenturen haben Einsicht in die SW internen Repos. Was ich mir nicht vorstellen kann

Larineso · June 2019

Ich denke, die Entwickler von ThemeWare sollten den Arbeitsaufwand eigentlich ganz gut einschätzen können. Wenn man jetzt noch bedenkt, dass z.B das Listing mit Filtern noch gar nicht in den master auf Github implementiert wurde und es im Juli gleich 20 ThemeWare-Themes geben soll, dann wäre es durchaus denkbar, dass die auf eine andere Codebase aufbauen. Ich kann mir zumindest nicht vorstellen, dass die ihre Kunden mit leeren Versprechungen verärgern und damit ihren guten Ruf gefährden. Warum auch? Aber eventuell klärt uns da ja noch jemand aus dem Team auf.

Patrick Stahl · June 2019

Moin zusammen!

Das Themes Thema ist auch weiterhin noch in Arbeit, aber bereits sehr weit fortgeschritten. :-)

Zu dem anderen Thema, kann ich nicht allzu viel sagen, außer:
Nein, die haben auch keinen Zugriff auf unsere internen Repositories.
Die einzigen Firmen, die Zugriff darauf haben, sind eben auch diejenigen, die offiziell an SW6 mitarbeiten.
Welche das sind, findet ihr hier.

Gruß,
Patrick

robjke · June 2019

@Larineso schrieb:

Ich denke, die Entwickler von ThemeWare sollten den Arbeitsaufwand eigentlich ganz gut einschätzen können.

Können Sie vermutlich wohl nicht.

dass die ihre Kunden mit leeren Versprechungen verärgern und damit ihren guten Ruf gefährden.

Dann fangen die vermutlich jetzt damit an

Aber man kann sich immer auf 'Voraussichtlich verfügbar ab' stützen.

@Patrick Stahl‍ sehr weit fortgeschritten heißt?! :>

Noch im Juni im master oder eher Anfang Juli!?

Patrick Stahl · June 2019

Moin zusammen!

Hier nur eine kleine Randinfo, nur indirekt mit Themes verbunden:
Custom CSS / Javascript über ein Plugin

@robjke‍
Bzgl. der Themes sind wir weit fortgeschritten. Die Chancen stehen gut, dass die Core Änderungen dafür noch diese Woche gemerged werden.

Gruß,
Patrick

robjke · June 2019

@Patrick Stahl‍

Habe den commit grad gesehen

https://github.com/shopware/platform/blob/master/src/Docs/Resources/current/4-how-to/330-storefront-assets.md

Dasmit kann man auf jedenfall schonmal gute Vorarbeit leisten was das custom styling und scripting vom Template angeht @Shopwareianer‍

Larineso · June 2019

@Patrick Stahl‍

Bei mir wird die CSS-Datei nicht eingebunden. In der Konsole steht zwar, dass das Plugin als neuer entry point injected wurde, aber in der Storefront sind keine Änderungen zu sehen und in der App.css ist auch nichts zu finden. Auch mit dem Plugin aus den Docs funktioniert es bei mir nicht.

Liebe Grüße

Patrick Stahl · June 2019

Moin @Larineso‍,

vielen Dank für den Hinweis!

Kaum online, schon outdated. Habe das direkt nachgestellt und behoben.
Das Update von dem GitHub Repository kommt gleich sofort - die Änderung der Doku wird 1-2 Tage dauern.

In Kurz:
Der Twig Block "layout_head_stylesheet" muss nun in die Datei /Resources/views/layout/meta.html.twig gelegt werden.

{% sw_extends '@Storefront/layout/meta.html.twig' %}

{% block layout_head_stylesheet %}
    {{ parent() }}

    <link rel="stylesheet" href="{{ asset('bundles/storefrontassets/storefront/css/storefront-assets.css') }}" />
{% endblock %}

Gruß,
Patrick

Larineso · June 2019

@Patrick Stahl‍

Kannst du mir sagen, ob es schon eine Möglichkeit gibt, die Variablen von Bootstrap oder dem Shopware-Skin im Plugin zu überschreiben?

Offenbar haben Änderungen wie

$primary: #000;

keine Auswirkungen.

Liebe Grüße

robjke · June 2019

Da eine eigene CSS Datei erstellt wird, wird da nichts von der Storefront / Bootstrap SCSS vereerbt.

Somit dürften sämtliche komponenten, mixins oder @extends in der eigenen CSS / SCSS aktuell nicht zur Verfügung stehen. Was suboptimal ist. Ich denke hier müssen wir dann doch auf die Theme integration warten.

Als workaround könnte man in die eigene Storefront Asset nochmal BS importieren.

Die Frage ist ob das Sinn macht wenn SW diese Woche mit der Implementierung fertig wird.

Larineso · June 2019

Grundsätzlich sollte man Webpack auch so konfigurieren können, dass die Variablen angepasst werden können. Aber da ich dieses Feature nur für ein Theme brauche und das Theme-System in den Startlöchern steht, werde ich mich erst mal auf andere Sachen konzentrieren.

Liebe Grüße

robjke · June 2019

Ich denke auch das macht mehr Sinn.

Gerade kam wieder ein "fix-webpack" commit

Shopwareianer · June 2019

@Patrick Stahl‍ Danke erst einmal für deinen Einsatz

Wie sieht es denn mit der Theme Konfiguration aus? Gibt es da wieder etwas strikt vorgegebenes wie bei Shopware 5 - Also der Theme Manager.

Oder legt man sämtliche Theme Konfiguration eigenständig nun über das Plugin an?

ottscho · July 2019

Guten Abend,

klappt bei euch das Beispiel Plugin ohne Probleme?

Ich habe extrem mit Cache bzw. Kompilieren zu kämpfen.
Nach der Installation habe ich mich komplett an die Vorgehensweise im Tutorial gehalten.
Die CSS Datei wurde nicht im public erstellt. Nach langem probieren und testen hat es auf einmal geklappt.

Ich bilde mir ein, als ich manuell etwas in der original Meta Twig Datei zum Test integriert habe.

Danach habe ich den Hintergrund von blau auf rot geändert.

Nichts hat sich nach Cache leeren und Kompilieren geändert.
Ich habe die CSS Files manuell gelöscht und wieder neu kompiliert. Leider ohne Erfolg.

Leider geht es mir auch bei Erweiterungen im Backend so. Wir haben versucht eine neue Spalte in den Bestellübersicht zu erzeugen.
Dies wurde nach dem Tutorial in den Doks gemacht. Die Spalte wird nicht angezeigt. Selbst nach dem Editieren in den Core Dateien.

Hat dies noch mit der DEV Version zu tun? Geht es euch ähnlich?

Shopware6User · July 2019

Hallo zusammen,

Ich habe momentan ein sehr ähnliches Problem wie ottscho oben beschrieben:

Ich befolge genau das HowTo https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets?category=shopware-platform-dev-en/how-to. Allerdings sehe ich anschliessend keinerlei Änderungen im Storefront. Beim Ausführen von

./psh.phar storefront:build

werden mir folgende files erstellt:

'plugin root'/src/Resources/public/storefront/css/'plugin-name'.css

'plugin root'/src/Resources/public/storefront/js/'plugin-name'.js

Und die selben Files nochmals unter

public/bundles/'pluginname'/storefront/..

Das scheint mir soweit alles richtig zu sein. Wenn ich in der Entwicklerkonsole des Browsers nachschaue, sehe ich, dass folgende calls gemacht werden:

http://localhost:8888/bundles/storefront/css/app.css und http://localhost:8888/bundles/storefront/js/app.js.

Diese files scheinen aber meine Anpassungen des Plugins völlig zu ignorieren.

Edit: Ich konnte das Problem beheben. Ich habe bei den asset-paths einen falschen Pfad definiert, was dazu führte, dass die files nicht gefunden wurden.

Moritz Naczenski · July 2019

Was für einen Stand benutzt ihr denn? 6.0-dp oder den master?

Shopwareianer · July 2019

Ist das jetzt eigentlich der finale frontend workflow @Moritz Naczenski‍ ? => https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets

thom · July 2019

ja wäre mal interessant langsam zu erfahren!

explizit themekonfigurationen für den user. ist aber wohl alles immer noch zu früh.

lustig das themes im store vor kurzem noch angepriesen worden sind ab juni für sw6 verfügbar zu sein ... wtf!

Shopwareianer · July 2019

Also das ist nicht der finale Workflow sagte man mir, dieser wird wohl Ende Juli kommen. Oder halt dann wann es fertig ist, also brauchen wir wohl noch ein wenig Geduld

robjke · July 2019

Noch lustiger:

Es werden schon Zertifikate ausgestellt für eine Beta Software, deren Workflow sich wöchentlich ändert. Ich erinnere an den legendären kick Off Livestream vor 2 Wochen

Jens_K · July 2019

Das Theme System und der Theme Manger werden gerade finalisiert und sind dann im nächsten Release (Mitte-Ende Juli) mit drin. Als Theme Entwickler legt ihr dann einfach eine Theme-Konfig an, die sieht in etwa so aus:

{
"css": [
"@Storefront"
"src/style/base.scss"
],
"js": [
"@Storefront"
"dist/js/app.js"
],
"assets": [
"public/assets"
],
"config": {
"sw-color-brand-primary": {
"label": "sw-theme.label.sw-color-brand-primary",
"type": "color",
"value": "#399",
"editable": true,
"block": "colors",
"section": "generalColors",
"order": 100
},
}
}

Man kann also angeben, von welchen anderem Theme man Styles oder Skripte übernehmen will und es gibt dann verschiedene Konfigurationselemente (Medien, Fonts...). Diese werden im Theme Manger der Administration angezeigt.

Als Theme Entwickler kann man ja schon loslegen, wenn man das möchte. JS, CSS und Template Erweiterungen funktionieren ja und sobald das Theme System fertig ist, kann man mit wenig Aufwand seine Anpassung zu einem "echten" Theme machen.

Larineso · July 2019

Das Theme-System wurde heute auf Github veröffentlicht.

In die theme.json muss zwingend noch einen name und einen author eingetragen werden, sonst kommt es beim Kompilieren zu Fehlern (name und author werden bei der Erstellung über die Konsole nicht automatisch erstellt).

Beispiel:

{
  "name": "MyTheme",
  "author": "Larineso",
  
  ... styles usw
}

@Jens_K‍

Bei der Auswahl meines Themes bekomme ich eine Fehlermeldung: [ERROR] Invalid theme name. Außerdem wird mir das Theme nur in der Konsole, nicht aber in der Administration angezeigt. Genauer gesagt wird mir das Plugin angezeigt, aber kein Theme unter Themes. Hast du eine Idee woran das liegt?

Liebe Grüße

Comments