Come includere le risorse statiche (JavaScript, CSS, fonts) in Magento 2
Come per la versione 1, anche per Magento 2 le risorse statiche vengono aggiunte nelle pagine di layout, nella sezione <head>.
L'esempio di default di layout dove vengono definite le inclusioni di risorse statiche è il file default_head_blocks.xml situato nella cartella app/code/Magento/Theme/view/frontend/layout/ (o vendor/magento/module-theme/view/frontend/layout/).
Il metodo più corretto quindi per aggiungere CSS o JavaScript al nostro tema è estendere proprio il file default_head_blocks.xml, copiandolo nella cartella <theme_dir>/Magento_Theme/layout. Le risorse inserite in questo file saranno disponibili in ogni pagina del nostro sito e-commerce. Volendo invece limitarne il loro utilizzo è necessario caricarli nel file di layout interessato, per esempio nel file catalog_product_view.xml per averlo solo nella pagina di prodotto.
Ma vediamo nello specifico le "istruzioni" (o meglio tag) da inserire nella sezione <head> del nostro file di layout:
<css src="css/my-style.css"/>
<script src="js/my-script.js"/>
Due varianti comunque valide:
- è possibile usare anche il tag <link> al posto di <css> e <script>; per esempio:
<link src="js/my-script.js"/> - è possibile specificare il path della risorsa aggiungendo il nome del modulo; per esempio:
<script src="WaPoNe_HelloWorld::js/my-script.js"/>
Il percorso alle risorse è specificato relativamente ad una delle seguenti posizioni, nel caso di tema:
- <theme_dir>/web
- <theme_dir>/<vendorName>_<moduleName>/web
Nel caso di layout aggiunto/modificato all'interno di un'estensione, la locazione delle risorse è in:
- <vendorName>_<moduleName>/view/frontend/web
Inoltre è possibile aggiungere risorse esterne grazie all'attributo src_type impostato a url come nell'esempio di caricamento di un font esterno di Google:
<link src="https://fonts.googleapis.com/css?family=Oswald:400,700,300" rel="stylesheet" type="text/css" src_type="url" />
