Theme-Entwicklung ohne psh.phar storefront:build möglich?

Shopware 6 (German) Themes & Design
1

Hallo allerseits,

ich beschäftige mich erst seit Kurzem mit Shopware, kenne mich aber relativ gut aus, was die Technologien selbst angeht. Ich komme aus der Frontend-Ecke und muss nun für einen Kunden ein Shopware-Theme-Template entwickeln. Auf der Entwicklungsumgebung, die mir zur Verfügung gestellt wurde (Der Dienstleister hat den Shop von v5 auf v6 geupgraded und mir die technischen Zugangsdaten (FTP, MySQL, SSH) gegeben), scheint allerdings kein PSH installiert zu sein. Auf Nachfrage, dass ich “storefront:build” ausführen muss, damit mein Code richtig übernommen wird, wurde mir geantwortet, dass die Kommandos über php bin/console wie theme:refresh, theme:compile und cache:clear ausreichen würden. Allerdings habe ich das Gefühl, dass das nicht der Wahrheit entspricht, weil z.B. - nachdem ich mit theme:create eins erstellt hatte - der Code in der main.js nicht kompiliert wird und meine CSS-Redeklarationen im Header z.B. nicht übernommen werden - “meine” Selektoren sind teilweise auf jeden Fall höher gewichtet als die originalen. Irrsinnigerweise funktioniert’s dann doch, wenn ich die Style mit !important forciere. Twig-Templates abwandeln etc. klappt ohne Probleme.

Brauche ich nun PSH für storefront:build auf jeden Fall oder was mache ich falsch? So wie ich das verstehe, braucht man das in jedem Fall, damit die Konsolidierung mit Webpack durchgeführt wird oder macht theme:compile das auch und reicht?

Danke für die Aufmerksamkeit für mein Anliegen. Wenn mir jemand weiterhelfen könnte, würde ich mich sehr freuen!

2

Mit bin/console theme:create erstellst du das Plugin (Theme) . Anschliessend muss du das Plugin (Theme) aktivieren. Das ist eigenlich alles.

3

ERSTMAL: Sorry, leider im SW5-Teil des Forums gelandet, es geht eigentlich um SW6. Suche nach Thread löschen, um drüben einen neuen zu erstellen, finde aber keinen!

Hallo brettvormkopp,

danke für die Antwort. Aktiviert ist das Theme, aber wie gesagt: trage ich z.B. ne einfach Testfunktion in die “%pluginname%.js” ein, taucht sie auf. Allerdings habe ich da noch die main.js automatisch erstellt bekommen durch theme:create, aber wenn ich da was eintrage, taucht es trotz Theme Compile und Cache clearen nicht auf. Ebenso mit dem CSS …

Ich kann doch nicht an jede CSS-Deklaration ein !important ranhängen. Das ist einfach nur Bad Practice und ich vermute, das sollte eigentlich auch nicht nötig sein bei der Qualität der Symfony-Applikation.

4

Was steht denn in deiner main.js drin?

5

@brettvormkopp schrieb:

Was steht denn in deiner main.js drin?

Momentan nicht viel… lediglich:

function martin_mainjs() { alert(„funzt!“); }

Wenn ich die Funktion in pluginname.js hab, steht sie in der Browserkonsole zur Verfügung und kann sie dort aufrufen und krieg mein Modal-Alert. In der main.js abgelegt, listet die Browserkonsole mir die nicht auf.

 

6

schau mal hier https://docs.shopware.com/en/shopware-platform-dev-en/how-to/js-storefront-plugin . Dort wird in main.js die Resourcen nur geladen/regisrtiert. Der Code ist jeweils in den Dateien selbst, aber nicht in main.js. Beispiel: https://github.com/shopwareLabs/SwagPayPal/blob/master/src/Resources/app/storefront/src/main.js

7

Hallo, danke nochmal für die Antwort. 

Leider steht auch da wieder, dass ich zum Testen der Funktion storefront:build über PSH ausführen muss.

Jetzt kommen wir zur ursprünglichen Frage und die Antwort lautet anscheinend ja: storefront:build wird auf jeden Fall benötigt.

Wie krieg ich den PSH-Kram denn jetzt nachträglich installiert? PSH runterladen und co. ist ja kein Thema, aber ich soll da auch noch ne Config für bauen müssen, habe aber gar keinen Schimmer, was ich da alles berücksichtigen muss und würde erwarten, dass Shopware da welche definiert hat?!

8

Hey Martin,

du wirst auf Dauer keinen Spaß damit haben auf Live Servern zu entwicklen, die dir nicht den vollen Funktionumfang anbieten.

Richte dir am besten seperat lokal eine ein:

https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/system-installation-guides/vagrant

Auf dem erstem Blick ist es ein ersichtlicher Mehraufwand - aber glaub mir, der Aufwand lohnt sich wenn du auf Dauer mit Shopware arbeiten möchtest :) 

9

Wie krieg ich den PSH-Kram denn jetzt nachträglich installiert? PSH runterladen und co. ist ja kein Thema, aber ich soll da auch noch ne Config für bauen müssen, habe aber gar keinen Schimmer, was ich da alles berücksichtigen muss und würde erwarten, dass Shopware da welche definiert hat?!

In der Production-Umgebung von Shopware 6 gibt es dafür im Ordner bin entsprechende Shell-Scripts, z.B. build-storefront.sh. D.h. den „PSH-Kram“ brauchst Du nicht.

Du brauchst in Deiner Entwicklungsumgebung aber die vollen Voraussetzungen für Shopware 6, also vor allem node.js und NPM (https://docs.shopware.com/en/shopware-platform-dev-en/getting-started/requirements).

Viel Erfolg!

Geert

10

Herzlichen Dank nochmal für alle Antworten.

Ich hab mal versucht, das built-storefront-Script im bin-Ordner auszuführen. NPM und Node.js sollten drauf sein, ist ein offizieller Shopware-Server der Agentur. Irgendwas anderes hakt da aber wieder mit ner Fehlermeldung. Na egal, ich hab’s jetzt iwie doch noch anders hinbekommen, dass wenigstens CSS und Template-Änderungen angewendet werden… 

Ihr habt schon alle recht: ne richtige Dev-Umgebung (am besten mit Staging) neben der Prod wäre schon gut. Da ich allerdings annehme, dass nicht allzu oft nach dem ersten Relaunch tiefgreifende Anpassungen vorgenommen werden werden, spar ich mir die Mühe und hacke mich da so durch. :wink:

11

Hallo Martin,

kannst du mir bitte sagen wie du das hinbekommen hast, dass dein, im Theme, definierter SCSS/JS berücksichtigt wird?

Klar, man braucht eine richtige DEV-Umgebung, aber wie kann ich meine Theme dann nacher auf die PROD-Umgebung bringen? Da muss dann doch auch ein Rebuild des StoreFronts angestoßen werden können.

„build-storefront.sh“ hilft nicht. Ebenso plugin deinstallieren, Cache leeren, installieren, aktivieren, Theme allen Kanälenzuweisen, refresh und compile hat nicht geholfen.

Meine Theme macht nur eine einzige Änderung in der „base.scss“:

body {
    background: blue;
}

Also genau das Beispiel aus der Doku. 

Wie kriege ich das hin, dass es auf meiner PROD-Umgebung angezeigt wird?

Nachtrag: in meiner „var/plugins.json“ wird meine Theme gar nciht aufgelistet. Kann das das Problem sein? Ich kann mittels „bin/console bundle:dump“ Befehls die Datei neu erstellen lassen, aber meine Theme wird nicht aufgelistet, obwohl Sie aktiv und allen Kanälen zugewiesen ist.

Danke und Gruß, ruppert

12

Hallo ruppert,

ich muss zugeben, durch einen Motorradunfall (3 Monate krank) und diesem Witz von Webapplikation bin ich immer noch am machen für den Kunden. Ich krieg die Krätze. Hatte mit Shopware 5, den der Kunde bis jetzt am Laufen hat, nie was am Hut und leider ist mir erst mit der Zeit immer mehr und mehr aufgefallen wie mangelhaft dieser ganze Schrott ist im Vergleich zur alten Version. Ich dachte mir: Naja, soll ja noch alles kommen, ich bin jetzt 3 Monate krank, dann sieht das alles bald schon anders aus. Pustekuchen, am Ar…

Ich kämpfe mich die ganze Zeit mit theme:compile und rf -rf ./var/cache im Dev-Modus einer Prod-Installation durch, wenn es um das Theme geht. Wir haben - da ich kein Vollblutprogrammierer und hauptsächlich Frontendler bin - dann sogar noch zusätzlich teuer ne Agentur mit ner Custom CMS Element-Entwicklung und Unterstützung beim Theming beauftragt. Wenn ich das Plugin (gar nur CSS) aktualisieren will, kann ich mit plugin:dump und assets:install arbeiten. Dann werden die Sachen so in die Struktur kopiert, dass Änderungen sichtbar werden, manchmal vorausgesetzt, dass ich den Cache wieder lösche. 

Leider ist dies sogar mein Probezeitprojekt hier und da ich so dumm war, dem Kundenwunsch nach SW6 (Tenor “Dann muss ich ja nochmal alles neu anlegen (~15 Produkte + Varianten)”) zu entsprechen, anstatt einer wirklich ausgereiften und mehr als nur Minimalfunktion bietenden Webshop-Applikation zu schauen, kotze ich jeden Tag mehr im Strahl. Tu dir den Gefallen und lass diesen Müll fallen und schau dir was anderes an, wenn du kannst. Erlebniswelten? Viel zu simpel, kaum Möglichkeiten, schwer modifzierbar im Standard, einfach Schrott für jemanden wie mich, der weiß, was andere Pagebuilder können! Statistiken? Fehlanzeige!

Ich will gar nicht wissen, welche Probleme und Umständlichkeiten noch auftauchen, wenn ich denn erstmal anfange, den Müll live zu bringen. 

Ich empfinde den Release einer solchen Software als pure Frechheit, wenn man sich vor Augen hält, wie Shopware 5 gereift ist. 

Das einzig Positive an der ganzen Sache ist die verwendete Technologie, aber das ist jetzt auch kein Verdienst der SW-Entwickler. Das haben andere sehr intelligent und performant programmiert.

Ich wünsch dir ne gute Nacht! 

P.S.: Nie wieder Shopware…

13

@ruppert schrieb:

Hallo Martin,

kannst du mir bitte sagen wie du das hinbekommen hast, dass dein, im Theme, definierter SCSS/JS berücksichtigt wird?

Klar, man braucht eine richtige DEV-Umgebung, aber wie kann ich meine Theme dann nacher auf die PROD-Umgebung bringen? Da muss dann doch auch ein Rebuild des StoreFronts angestoßen werden können.

„build-storefront.sh“ hilft nicht. Ebenso plugin deinstallieren, Cache leeren, installieren, aktivieren, Theme allen Kanälenzuweisen, refresh und compile hat nicht geholfen.

Meine Theme macht nur eine einzige Änderung in der „base.scss“:

body {
background: blue;
}

Also genau das Beispiel aus der Doku. 

Wie kriege ich das hin, dass es auf meiner PROD-Umgebung angezeigt wird?

Nachtrag: in meiner „var/plugins.json“ wird meine Theme gar nciht aufgelistet. Kann das das Problem sein? Ich kann mittels „bin/console bundle:dump“ Befehls die Datei neu erstellen lassen, aber meine Theme wird nicht aufgelistet, obwohl Sie aktiv und allen Kanälen zugewiesen ist.

Danke und Gruß, ruppert

Du brauchst build-storefront im Production System garnicht, einfach weil du das Theme bereits kompiliert auf das Production System packst. Also lokal einmal deine Plugin-Assets bauen und dann das Theme auf dein Production System packen, installieren, aktivieren und dem Sales-Channel zuweisen. Funktioniert es bei dir lokal denn? Hast du die kompilierten Javascripts auf dem Server? 

 

//Edit: Browser Cache auch mal leeren