Theme Konfiguration & Entwicklung

Shopware 6 (German) Themes & Design
21

Ich denke auch das macht mehr Sinn.

Gerade kam wieder ein „fix-webpack“ commit :wink:

22

[@Patrick Stahl](http://forum.shopware.com/profile/1869/Patrick Stahl „Patrick Stahl“)‍ Danke erst einmal für deinen Einsatz  Wearing-Sunglasses

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?

23

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?

 

24

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.

25

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

26

Ist das jetzt eigentlich der finale frontend workflow [@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”)‍ ? => https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets

27

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 :expressionless: … wtf!

 

 

2 „Gefällt mir“
28

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  Wearing-Sunglasses

29

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

30

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.

5 „Gefällt mir“
31

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

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

32

Aktuell ist es wohl besser noch nicht auf den neusten Stand zu aktualisieren.

Das Theme-System funktioniert zumindest bei mir noch nicht richtig und seit dem Update funktioniert auch die Einbindung von CSS und JS in Plugins nicht mehr wie in der Dokumentation beschrieben. Sicherheitshalber habe ich es auch noch einmal mit dem Plugin aus der Dokumentation probiert, aber auch da schlägt die Kompilierung der Storefront  fehl.

Bei den Themes habe ich die oben genannten Probleme. Komisch ist auch, dass direkt nach der Installation und Aktivierung eines Themes die CSS-Anweisungen automatisch in die all.css kompiliert werden, obwohl das Theme nicht ausgewählt wurde, sie aber nach manuellem Kompilieren (storefront:build) wieder verschwinden.

Liebe Grüße

 

EDIT: Die CSS und JS-Datein im Plugin müssen jetzt unter Resources/storefront/style und Resources/storefront/script gespeichert werden. Dann werden die Datein in die all.css oder all.js kompiliert. Wird jetzt kein Webpack/autoprefixer/postcss-pxtorem mehr eingesetzt? Bei mir werden die Datein unverändert ausgegeben.

    

33

@Larineso‍: Der Fehler mit der Theme-Auswahl sollte inzwischen gefixt sein. Die Dokumentation für die bisherigen Plugins werden wir zeitnah aktualisieren. Kurz zusammengefasst funktioniert es wie folgt:

Shopware schaut nun bei plugins ob diese unter Resources/storefront/script bzw. Resources/storefront/style js bzw. css/scss Dateien hat. Wenn ja, werden diese automatisch eingebunden und mit kompiliert, sofern das Plugin aktiviert ist. Möchte man richtige JS Plugins schreiben nutzen, kann man eine Resources/storefront/main.js Datei anlegen. Diese Datei wird dann von webpack eingelesen, kompiliert und unter Resources/dist/js/plugin-name.js wird dann das Kompilat abgelegt. Möchte man diese einbinden, gibt es mehrere Optionen. Das einfachste ist in der Plugin-Bootstrap folgende Methode zu implementieren:

public function getStorefrontScriptPath(): string { return ‚Resources/dist/storefront/js‘; }

Man kann sich hierfür auch das PayPal Plugin als Beispiel anschauen: https://github.com/shopwareLabs/SwagPayPal

3 „Gefällt mir“
34

@Jens_K‍  Also ich habe gerade einmal alles vom Repo gepullt und geupdatet - Theme erstellt mittels bin/console theme:create. Das Plugin wurde erstellt. Plugin installiert, aktiviert - Aber unter Content => Themes ist das Theme nicht zu sehen.

Auch unter ./bin/console theme:change wird das Theme nicht gelistet.

35

@Shopwareianer‍ 

Hast du es mal mit einem theme:refresh versucht? Habe gerade auch alles aktualisiert und jetzt funktioniert das System bei mir.

Liebe Grüße 

36

@Larineso schrieb:

@Shopwareianer‍ 

Hast du es mal mit einem theme:refresh versucht? Habe gerade auch alles aktualisiert und jetzt funktioniert das System bei mir.

Liebe Grüße 

Leider nein, funktioniert nicht:

./bin/console theme:refresh  
./bin/console theme:change 
Please select a sales channel:
  [0] Headless | 98432def39fc4624b33213a56b8c944d
  [1] Storefront | a4d4460bc27642139004d1a348144c36
 > 1
Please select a theme:
  [0] Storefront

Auch im Backend nicht zu sehen.

37

Komisch… ich habe den master und die ea laufen und bei mir funktioniert es bei beiden.

Allerdings sind mir ein paar andere Fehler aufgefallen:

Änderungen an der theme.json, z.B am Namen, sind auch nach erneuter Installation nicht sichtbar. 

Auch deinstallierte und gelöschte Themes werden noch unter Inhalte -> Themes angezeigt.

Config-Einstellungen in der theme.json greifen gar nicht.

Liebe Grüße

1 „Gefällt mir“
38

Ja. hab auch den master und alles nochmal gepullt bzw. es war alls up2date, composer update usw … mh … Das ist ja blöd …  Undecided

39

@Shopwareianer schrieb:

Ja. hab auch den master und alles nochmal gepullt bzw. es war alls up2date, composer update usw … mh … Das ist ja blöd …  Undecided

Hi, bei mir hat es auch geklappt:

bin/console theme:create
bin/console plugin:refresh
bin/console plugin:install DEINPLUGIN
bin/console plugin:activate DEINPLUGIN

Cache löschen

Gruß

1 „Gefällt mir“
40

Ich habe das ganze jetzt noch einmal neu angelegt und nun wird es mir angezeigt. Sehr kurios. Vielleicht lag es auch am Cache … Danke euch :slight_smile: