Come aggiungere Block Specific JS (e CSS)

Quindi ho trascorso ore e ore letteralmente a cercare, leggere, studiare ect, ma nessuno (nemmeno Alan Storm!) Me lo ha spiegato. Sembra che Internet sia interessato ad aggiungere JS o CSS a una determinata pagina di Magento 2, ma quello che sto cercando è l'aggiunta di JS / CSS a un blocco particolare .

Quindi, ecco la mia domanda in breve:

Qual è il modo migliore per aggiungere JS (e inoltre CSS) a un blocco particolare , in modo che se il blocco è presente sulla pagina (*) viene caricato JS / CSS, se il blocco non è presente, nessun CSS / JS? ?

* Ciò significa che è possibile impostare un blocco, su una pagina / modello tramite layout.xml, su una pagina personalizzata dal mio modulo, tramite il metodo toHtml di un blocco / pagina o, soprattutto, un blocco incorporato in un WYSIWYG di una categoria / descrizione del prodotto / blocco CMS / pagina CMS.

Ho letto MOLTI grandi articoli di Alan (ancora complimenti a questo ragazzo !!), per non parlare delle risme di altri articoli intorno a questo , tuttavia ho la sensazione che tutti vogliano aggiungere a una pagina, una pagina specifica, non dove mai il viene utilizzato il blocco.

Sento di avere familiarità con le varie tecniche, tuttavia potrei mancare qualcosa qui, quindi mi piacerebbe un consenso da parte della comunità, così come forse un po 'di segnale per tutti i front end attraverso gli sviluppatori full stack che cercano domande simili e ponderando le opzioni come me.

In precedenza, in Magento 1, guardavo al costruttore di blocchi, ottenevo il layout, ottenevo il riferimento principale e chiamavo addJs / addCss lì, o se possibile utilizzavo i metodi in layout.xml. Ciò significherebbe che JS è stato "aggiunto" all'elenco delle risorse sul costruttore di blocchi (prima che il livello del tema emettesse il blocco head). Ma questo non sembra possibile ora.

Ho letto su come fare per aggiungere JS / CSS (questo non è un semplice "come faccio ???" questo è un più consise "qual è il modo corretto / mag2 ???") e ho familiarità con questi tecniche:

/view/[area lasting/layout/[default/page_id×.xml tecnica, usando gli <head></head>elementi root
Aggiunta di un blocco Head al mio modulo, aggiunto in head.additional, con una sorta di logica per quanto riguarda se il mio blocco è caricato
usando gli oggetti \ Asset \ GroupedCollection e \ Asset \ Repository per iniettare dal costruttore di una pagina / modello (questo non sembra ork con i blocchi però), potenzialmente l'ordine di caricamento ??
Utilizzo di RequireJS e applicazione di una configurazione requestJS al mio modulo

Mi sono perso qualcosa ??

Si ritiene che il modo corretto sarebbe quello di utilizzare la libreria RequireJS e gli attributi x-magento-init o solo uno script con una require("my_module", function(){ ... })sintassi in uno script inline. Ma questo mi sembra klunky? Dovrei impostare degli script per caricare gli script, sono costretto a incorporare almeno alcuni dei miei JS, tuttavia sembra il modo più delicato di dire "ecco il mio blocco, ora mi richiede un po 'di JS", inserendolo nel mio phtml.

Tuttavia, mi piacerebbe davvero poterlo fare tramite PHP, come programmatore backend / stack mi piacerebbe idealmente incapsulare il JS e (idealmente) consentire al mio team di front-end di scrivere questo come lo desiderano. In breve, prenditi cura del caricamento (Back End Dev to Frond End Dev "ecco il phtml, sostituisci il tema se vuoi, allo stesso modo ecco il file js, le sue librerie dipendenti ed ecco i css per il blocco").

Questo suggerisce il __constructmetodo con dipendenze iniettate sul sistema delle attività. Non riesco comunque a farlo funzionare, questo sembra essere confermato nell'articolo rapido di Alan Storms qui: Magento Quickies: Magento 2: Aggiunta di file di risorse frontend a livello di codice

Nota il segno "Quindi qualsiasi pensiero sulla creazione di blocchi che portano con sé i loro asset frontend è fuori dalla finestra." ... bummer :(

Grazie ragazzi per aver dedicato del tempo a leggere e considerare . Non vedo l'ora di sentire le tue risposte!

PS> Ovviamente questo è StackExchange, quindi segnerò la risposta come il miglior corso per quello che sto cercando di ottenere (blocco del caricamento di risorse specifiche), tuttavia cercherò di elencare anche come riferimenti nella parte inferiore del mio post tutte le risposte che si aggiungono alla discussione o suggeriscono una soluzione solida!

— cygnus digital
fonte

Per js dovrebbe essere facile perché usa magento 2 require.js.
Quindi questo significa che puoi includere un js al volo quando ne hai bisogno.

Un blocco deve essere reso (nella maggior parte dei casi) da un modello.
Quindi è necessario aggiungere questo nel modello:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

Ora crea il tuo file js view/adminhtml|frontend/web/js/filename_here.jsdove è presente tutto il tuo codice js.

require.js saprà come ritirare il tuo file quando viene richiesto.

Per i file CSS non so se sia possibile.
I file css dovrebbero andare alla headsezione della pagina, ma per esempio se hai il tuo blocco all'interno del contenuto di una pagina cms come questo {{block class="..." template="..."}}, quando il contenuto della pagina cms dovrebbe essere elaborato, l'html fino a quel punto è già reso quindi non puoi aggiungere nient'altro al blocco di testa tramite php. Puoi provare ad aggiungerlo nel modello come <style...ma non è quello che vuoi (suppongo).

— Marius
fonte

Grazie Marius, sto esplorando il percorso requisitoJS come una delle possibilità che ho elencato sopra, ma grazie per l'esempio consise! Sono d'accordo, tuttavia, non offre una soluzione al problema CSS, tuttavia questo potrebbe essere un punto muto a causa del meno compilatore di Magento. Inoltre, è un po 'astratto ma suppongo che potremmo usare requestJS per caricare il nostro JS che a sua volta potrebbe aggiungere un link al foglio di stile al DOM, almeno asincrono !!!

— cygnus digital

In effetti, lo trovo nelle pagine requestjs, come caricare CSS con RequireJS! : requirejs.org/docs/faq-advanced.html#css

— cygnus digital

@cygnusdigital. Bello. Quindi problema risolto :)

— Marius

Ciao Marius, beh sì e no, è certamente un buon candidato per la soluzione, si adatta ai requisiti quindi ti ringrazio per il tuo contributo, ma sto cercando discussioni e alternative. Forse sono solo io che sono un dinosauro, tuttavia mi sembra più opportuno avere un caricamento JS / CSS all'interno di un costruttore, cioè. "se il blocco è costruito / incluso, aggiungilo alla testa." : DI mi chiedo se sia possibile aggiungere condizionalmente al blocco head.additional al volo. (vale a dire aggiungere un blocco head dal mio modulo a head.addizionale nella fase di costruzione del blocco).

— cygnus digital

puoi farlo con i blocchi regolari che vengono aggiunti tramite i file di layout, ma come ho spiegato non puoi farlo per i blocchi inclusi nel contenuto della pagina tramite le {{block}}direttive, perché la sezione head è già renderizzata quando la classe di blocchi viene istanziata.

— Marius

Come aggiungere Block Specific JS (e CSS) - Il modo _right_?