Eigene Styles (via LESS) in Plugin konfigurieren

Hallo Community! Ich hoffe, ich habe mich hier richtig einsortiert. Mein Problem ist folgendes: Ich bin neu in der Shopware Plugin Entwicklung und versuche meinem Frontend-Plugin einige Styles mitzugeben. Dafür möchte ich aber ungern ein eigenes Theme erstellen, da es sich lediglich um einen Button handelt, der im Frontend zusätzlich auftaucht. (Dieser soll gestylt werden) Der Shopbetreiber soll nachher im Backend beispielsweise eine Farbe wählen können (via ‚color‘ Picker, alles kein Problem), die dann zur Schriftfarbe des Buttons wird. So weit so gut, nur hängt es bei mir beim Einbinden meiner less-Datei in das System. Ich habe mich bereits an folgendem Thread orientiert less-files von Plugins überschreiben, bin habe es jedoch nicht geschafft, meine less zu integrieren. Meine Bootstrap.php sieht folgendermaßen aus: private function subscribeEvents() { /\* Subscribe the needed event for less merge and compression \*/ $this-\>subscribeEvent('Theme\_Compiler\_Collect\_Plugin\_Less', ' addLessFiles'); } /\* Provide the file collection for less @param Enlight\_Event\_EventArgs $args @return \Doctrine\Common\Collections\ArrayCollection \*/ public function addLessFiles(Enlight\_Event\_EventArgs $args) { $less = new \Shopware\Components\Theme\LessDefinition( /\* Configuration \*/ array(), /\* Less files to compile \*/ array(\_\_DIR\_\_ . '/Views/responsive/frontend/\_public/src/less/all.less'), /\* Import directory \*/ \_\_DIR\_\_ ); return new Doctrine\Common\Collections\ArrayCollection(array($less)); } public function onFrontendPostDispatch(Enlight\_Event\_EventArgs $args) { /\* @var \Enlight\_Controller\_Action $controller \*/ $controller = $args-\>get('subject'); $view = $controller-\>View(); $view-\>addTemplateDir(\_\_DIR\_\_ . '/Views'); $view-\>assign('use\_resetbtn\_option', $this-\>Config()-\>get('use\_resetbtn\_option')); $view-\>assign('font\_color', $this-\>Config()-\>get('font\_color')); $view-\>assign('resetbtn\_caption', $this-\>Config()-\>get('resetbtn\_caption')); $view-\>assign('resetbtn\_position', $this-\>Config()-\>get('resetbtn\_position')); } Die entsprechenden Variablen sind in der Config natürlich definiert und funktionieren auch (habe sie mir im Frontend ausgeben lassen, alles korrekt soweit). Von dem Inhalt meiner LESS-Datei ist jedoch nichts zu sehen… Habe ich irgendwas vergessen oder falsch verstanden? Außerdem eine weitere Frage: Kann ich auch in meiner Less-Erweiterung die Smarty-Variablen verwenden, die ich in meiner Bootstrap.php definiere, also für das Beispiel eben mit der Farbe folgendermaßen: .neuer\_button { color: {$font\_color}; } Probleme wegen der geschweiften Klammern dürfte es ja eigentlich nicht geben, da das Schachteln von Elementen in CSS und LESS grundsätzlich ja möglich ist, oder irre ich hier? Vielen Dank im Voraus!

Schau dir mal unser Social Plugin an, dass sollte dir auf die Sprünge helfen: https://github.com/hostianer/HostiSocia … tstrap.php Oder unser Logo Plugin: https://github.com/hostianer/HostiLogo/ … tstrap.php Außerdem verwendest du in der LESS Datei natürlich indemsinne keine PHP Variable. In einer LESS Datei wird die Variable mit einem @ eingebunden, sowie hier .neuer\_button { color: @font\_color; }

1 Like

Vielen Dank @kayyy für die schnelle Antwort! Ich habe mir die beiden die beiden Plugins zu Gemüte geführt und meine Bootstrap.php dementsprechend angepasst. Dabei ist mir vor allem aufgefallen, dass die Position der LESS anders war. Was genau macht das für einen Unterschied, ob meine LESS aus dem Ordner /Views/frontend/_public/src/less oder aus dem Ordner /Views/responsive/frontend/_public/src/less, wie bei mir anfänglich, kommt? In einem wieder anderem Fall habe ich gesehen, dass jemand eine style.css in dem Ordner /Views/frontend/_resources/style eingebunden hat. Jedenfalls klappt es nun und ich kann mich an das Styling meines (noch nicht all zu) schönen Button machen! Vielen Dank schonmal! Das hat mir sehr geholfen! :happy:

$less = new \Shopware\Components\Theme\LessDefinition( /\* Configuration \*/[/code] hier musst du deine Configuration an LESS übereben [code]array( 'less\_var\_name' =\> $this-\>Config()-\>get('config\_var\_name') ),
1 Like

[quote]Was genau macht das für einen Unterschied, ob meine LESS aus dem Ordner /Views/frontend/_public/src/less oder aus dem Ordner /Views/responsive/frontend/_public/src/less, wie bei mir anfänglich, kommt?[/quote] responsive = SW5 common = SW4 + 5 ohne = SW 4 only CSS = ansich nicht mehr nutzen…

[quote=“benblub”][quote]Was genau macht das für einen Unterschied, ob meine LESS aus dem Ordner /Views/frontend/_public/src/less oder aus dem Ordner /Views/responsive/frontend/_public/src/less, wie bei mir anfänglich, kommt?[/quote] responsive = SW5 common = SW4 + 5 ohne = SW 4 only [/quote] Danke! Das bedeutet, so wie ich es nun konfiguriert habe, werden die Styles nicht nur in SW5 übernommen, sondern auch in SW4? :thumbup: Gruß!

@Shopwareianer schrieb:

Schau dir mal unser Social Plugin an, dass sollte dir auf die Sprünge helfen:
https://github.com/hostianer/HostiSocia … tstrap.php

Oder unser Logo Plugin:
https://github.com/hostianer/HostiLogo/ … tstrap.php

Leider funktionieren diese Links nicht mehr. Ich habe mir andere repos von hostianer auf github angeschaut, aber konnte nicht sehen, was in Bootstrap.php angepasst werden muss.

Hat jemand ein aktuelles Beispiel dafür, wie man plugin-spezifisches LESS einbinden soll?

Vielen Dank im Voraus!

Ja hier ist ein Beispiel für ein Frontend Plugin, welches auch LESS Dateien einbindet. Das Plugin dort auch heruntergeladen werden:

https://developers.shopware.com/developers-guide/example-plugin/

Viele Grüße