Extra Template für eigenen Plugin Controller mit Bootstrap als Third-Party-Dependency

Shopware 5 Programmierung
1

Hallo zusammen.

Ich denke das Thema betrifft zu 50% Programmierung und zu 50% Themes & Design, aber ich habe es jetzt mal hier rein gepackt.

Ich habe ein eigenes Plugin mit einem eigenen Controller. Die Seite für diesen Controller soll sich vom Template her vom Rest des Shops unterscheiden. Ich möchte für diese einzelne Seite Bootstrap verwenden. Jetzt stellen sich mir aber folgende Fragen:

Hier wird beschrieben, wie man Third-Party-Dependencies, wie zum Beispiel Bootstrap, zu seinem Theme hinzufügt. Aber ich möchte die Dateien ja nicht in meinem Theme, sondern in meinem Plugin. Deswegen habe ich die Anleitung auf mein Plugin angewendet. Also ich habe im Plugin Ordner eine package.json angelegt und bootstrap und grunt als Dependencies hinzugefügt. In dem Gruntfile habe ich ein Mapping auf den Ordner “Resources/frontend/vendors” angelegt. In meiner “Resources/frontend/less/all.less” importiere ich dann die CSS Dateien aus dem vendors Ordner.

Wie mache ich das jetzt mit den Javascript Dateien? Die kann ich ja nicht in einer einzelnen Datei importieren, oder? Also die müssten ja im Ordner “Resources/frontend/js” liegen, um automatisch geladen zu werden. Klappt das dann auch so wie mit der all.less mit Imports oder muss ich das Mapping so ändern, dass die JS Dateien direkt in dem js Ordner landen und nicht in dem vendors Ordner? Oder wie wird das gemacht?

Das mit den CSS Dateien klappt ja schonmal. Allerdings ist es jetzt ja so, dass die CSS/Less Dateien aus meinem Plugin auf jeder Seite geladen werden. Ich möchte jetzt aber, dass die nur auf der Seite meines Controllers benutzt werden. Und dann am liebsten auch nur die Dateien aus meinem Plugin und gar nicht mehr die ganzen Shopware Dateien. Ist das möglich? Ich denke ich könnte im Notfall die index/header.tpl für meine Seite so anpassen, dass ich den Block “frontend_index_header_css_screen” überschreibe. Da könnte ich die statischen Dateien laden, aber es wäre schön wenn das von der Funktionalität so bleibt wie zuvor, also dass alle less Dateien aus meinem Plugin geladen und kompiliert werden, nur halt ohne die ganzen Shopware Dateien. Kann mir da jemand Tipps geben, wie ich das am besten mache?

Wie genau läuft das bei den Themes mit dem “npm install” und dem “grunt” Befehl? Muss man das immer manuell ausführen oder übernimmt Shopware das beim Installieren des Themes? Habs noch nicht getestet, aber würde ja irgendwie mehr Sinn machen, wenn Shopware das regelt. Falls es so ist, funktioniert das dann auch irgendwie mit meinem Plugin? Weil aktuell wird kein “npm install” und kein “grunt” ausgeführt, wenn ich das Plugin installiere. Ich will mein Plugin zwar nicht verbreiten, aber allgemein betrachtet kann man ja nicht davon ausgehen, dass man ein Plugin installiert und dann noch selbst Befehle über die Konsole ausführen muss, oder? Also gibt es da eine Möglichkeit?

Ich wäre sehr dankbar über Antworten und auch ggf. über Tipps, wie ich mein Gesamtvorhaben evtl. auch anders umsetzen kann.

Viele Grüße

2

Hallo iNono,

 @iNono schrieb:

Die Seite für diesen Controller soll sich vom Template her vom Rest des Shops unterscheiden. Ich möchte für diese einzelne Seite Bootstrap verwenden.

d.h. kannst du nicht den Theme-Manager oder den Less-Compiler verwenden. Dieser hat den Zweck, dass alle Plugin JS/LESS Dateien zusammengefasst werden. Du möchtest diese aber gar nicht auf deiner Seite. Deshalb solltest du:

  • Nicht das Standard Template verwenden. Sonst bekommst du die HTML-Struktur, welche gar nicht mit Bootstrap kompatibel ist.
    D.h. in deiner /frontend/dein_controller/index.tpl leitest du NICHT von irgendeiner anderen Datei ab. Also kein {extends …
    Stattdessen baust du hier den Bootstrap HTML Code rein
  • Du musst deine LESS/SCSS Dateien nun selbst kompilieren und komprimieren. Dazu gibt es verschiedene Tools (z.B. Grunt, der nimmt dir alles ab)
    Die fertige CSS/JS Dateien bindest du dann einfach mit {link file=…} an der jeweiligen Stelle im Template ein

Ich hoffe der Ansatz hilft dir.

Viele Grüße

3

Hallo simkli,

danke für die Antwort! Die Idee hatte ich ja auch schon und ja, so wäre es machbar. Aber ich dachte es gäbe da trotzdem irgendeine Möglichkeit, ohne dass ich die Dateien dann selbst kompilieren muss und dann quasi statisch einbinden muss.

@iNono schrieb:

Ich denke ich könnte im Notfall die index/header.tpl für meine Seite so anpassen, dass ich den Block „frontend_index_header_css_screen“ überschreibe. Da könnte ich die statischen Dateien laden, aber es wäre schön wenn das von der Funktionalität so bleibt wie zuvor, also dass alle less Dateien aus meinem Plugin geladen und kompiliert werden, nur halt ohne die ganzen Shopware Dateien.

In der Datei shopware/themes/Frontend/Bare/frontend/index/header.tpl gibt es ja zum Beispiel diesen Block:

{* Stylesheets *}
{block name="frontend_index_header_css_screen"}
    {{compileLess timestamp={themeTimestamp} output="lessFiles"}}
    {foreach $lessFiles as $stylesheet}
        
    {/foreach}

    {if $theme.additionalCssData}
        {$theme.additionalCssData}
    {/if}
{/block}

Die Variable lessFiles scheint ja ein Array zu sein. Kann man es da nicht irgendwie so hinbekommen, dass die Dateien aus meinem Plugin ein Eintrag in diesem Array sind und dann der Rest ein Eintrag? Und dass man den Eintrag mit den restlichen Dateien dann filtert und nicht als link Element einbindet?

4

Also wenn du nicht umbedingt die Theme-Konfiguration in deinem Less-Code brauchst, rate ich dir weiterhin davon ab, da dies mit erheblichen Mehraufwand verbunden ist :wink: . Aber ich helfe dir auch gern bem Ansatz, der wäre folgender:

  • Du musst beim Speichern der Theme-Konfiguration nun einen neuen Compile-Vorgang für deine Less-Dateien anstoßen (und das für jeden Subshop).

Hier siehst du wie es gemacht wird:
https://github.com/shopware/shopware/blob/5.4/engine/Shopware/Components/Theme/Compiler.php#L237

Ab Zeile 267 wird es interessant. Diese Funktion musst du ggf. nachbauen. Dann bei der jeweiligen Actions (wenn das Theme kompiliert werden muss), musst du deine Less-Dateien ebenfalls kompilieren.

Nachteil: Performance des PHP-Compilers ist langsam. Wenn deine Less-Dateien nicht von den Backend-Theme Einstellungen abhängen, ergibt es mehr Sinn, sie statisch zu linken

Viele Grüße