[PLUGIN][EVENTS][Theme_Compiler_Collect_Plugin_Less|Theme_Compiler_Collect_Plugin_Javascript] Wie?

Shopware 5
1

Hi,

ich programmiere derzeit ein kleines Plugin für Shopware. Bisher sehr erfolgreich, ich kann Views überschreiben, Service Container einbinden, Modelle nutzen, ExtJS verwenden…
Doch etwas fehlt mir noch zu meinen Glück: Javascript und CSS (oder meinetwegen auch Less) über/per meinem Plugin einbinden, so dass diese beim aufrufen im Frontend geladen werden!

Natürlich, könnte ich es jetzt im “schönen” custom-elements style direkt mit in meine .tpl hauen, als inline-style “…” bzw. inlinescript “<script…>…”. Das funktioniert! Ist aber unschön, oder?</script…>

Jetzt bin ich über die tollen Event gestolpert, die auch aktiv eingesetzt zu werden scheinen:
Theme_Compiler_Collect_Plugin_Less
Theme_Compiler_Collect_Plugin_Javascript

Super, einfach mal drann listenen (hier mal mein kompletter Subscriber):
 

pluginPath = $p;
        $this->mainConfiguration = $c;
    }

    public static function getSubscribedEvents()
    {
        return [
            'Theme_Compiler_Collect_Plugin_Less', 'collectLess',
            'Theme_Compiler_Collect_Plugin_Javascript', 'collectJs'
        ];
    }

    public function collectLess(\Enlight_Event_EventArgs $args) {
        Shopware()->PluginLogger()->warning("Adding less...");

        $lessFiles = glob( __DIR__. '/Resources/views/frontend/_public/src/less/*.less'); // TODO: if someone manages to get their contents into that directory...
        //$jsFiles = array( __DIR__. '/Resources/views/frontend/_public/src/js/myFile.js');

        return new Doctrine\Common\Collections\ArrayCollection($jsFiles);
    }

    public function collectJs(\Enlight_Event_EventArgs $args) {
        Shopware()->PluginLogger()->warning("Adding js...");

        $jsFiles = glob( __DIR__. '/Resources/views/frontend/_public/src/js/*.js'); // TODO: if someone manages to get their contents into that directory...
        return new Doctrine\Common\Collections\ArrayCollection($jsFiles);
    }
}

 

Leider wird aber nicht mal meine Log-Message ausgegeben!

Da hab ich mal gegoogled. Und eigentlich wird die aus einer ganz anderen Art Klasse aufgerufen, zu sehen hier:
shopware/Bootstrap.php at 5.4 · shopware/shopware · GitHub

Das ist für mich keine Option, da meine Bootstrap Klasse die Klasse “Shopware\Components\Plugin” extendet und das so ja auch sein soll, sonst würde ich ja ein Rückschritt machen in der Entwicklung von Shopware…

Deshlab meine Frage: Kann ich, ohne ein Theme, welches iwas extenden muss,  meine JS und CSS/LESS dateien einfach in einem Plugin einbinden? (Ohne die kleinen Felder in der Theme Configuration zu verwenden…). Kannst du mir da einen Tipp geben?

 

Lg Flo

2

Naja, deine JS/Less Dateien werden ja zu einer großen Less/JS Datei verschmolzen und dann im Frontend eingebunden. 

Das passiert dann, wenn du im Backend das Theme neu kompilierst. Zu diesem Zeitpunkt werden auch die Events Theme_Compiler_Collect_Plugin_Less und Theme_Compiler_Collect_Plugin_Javascript aufgerufen. 

=> Diese Events werden NICHT bei jedem Frontend-Aufruf getriggert, sondern nur, wenn du das Theme im Backend neu kompilierst.

Viele Grüße

3

Das ist hier im Startup-Guide aber auch alles beschrieben: Plugin quick Startup Guide

1 „Gefällt mir“
4

@simkli schrieb:

Naja, deine JS/Less Dateien werden ja zu einer großen Less/JS Datei verschmolzen und dann im Frontend eingebunden. 

Das passiert dann, wenn du im Backend das Theme neu kompilierst. Zu diesem Zeitpunkt werden auch die Events Theme_Compiler_Collect_Plugin_Less und Theme_Compiler_Collect_Plugin_Javascript aufgerufen. 

=> Diese Events werden NICHT bei jedem Frontend-Aufruf getriggert, sondern nur, wenn du das Theme im Backend neu kompilierst.

Danke für die Antwort! Super! War mir aber leider schon iwi klar… Es eben nicht mal aufgerufen wenn ich die Themes neu kompiliere. :frowning:

Leider kann man in diesem Forum nicht zwei Nachrichten zitieren, darum mach ich halt zwei Nachrichten draus :wink:

5

Uhh sorry, vor lauter tippen & zippen hab ich doch glatt meine Antwort vergessen… ^^

@Moritz Naczenski schrieb:

Das ist hier im Startup-Guide aber auch alles beschrieben: https://developers.shopware.com/developers-guide/plugin-quick-start/#extending-the-template

Ich pick mir davon mal das meines Erachtens wesentlichste heraus:

Frontend resources auto-registrationAnchor link for: frontend resources auto registration

Additions to CSS, LESS and JavaScript resources had to be registered via Theme_Compiler_Collect_Plugin_* events. Since Shopware 5.2.13 the registration will be done automatically. Just place the resources into the following directories:

  • custom/plugins/SwagResource/Resources/frontend/css/**.css
  • custom/plugins/SwagResource/Resources/frontend/js/**.js
  • custom/plugins/SwagResource/Resources/frontend/less/all.less

The css and js directories may contain arbitrary sub directories. @imports in all.less will be resolved.

SwagResource
├── Resources
│ └── frontend
│ ├── css
│ │ ├── *
│ │ │ └── *.css
│ │ └── *.css
│ ├── js
│ │ ├── *
│ │ │ └── *.js
│ │ └── *.js
│ └── less
│ └── all.less
└── SwagResource.php

Nice one! Genau das hab ich gesucht. Danke!

Lg Flo