Aggiungere CSS e JavaScript su Prestashop 1.7.x

da Amar A. | Set 22, 2022 | PrestaShop | 0 commenti

Metodi e modi per aggiungere CSS e JavaScript in PrestaShop v1.7.x

In questo breve tutorial vedremo come aggiungere correttamente CSS e Javascript su Prestashop 1.7.x Esistono tre differenti modalità per farlo adesso vedremo come:

Tramite file header.tpl o footer.tpl;
Modificando file del temp .yml;
Eseguendo un override sul FrontController.php

1. Richiamare CSS e Javascript dai file .tpl

Se desideriamo aggiungere il file al caricamento dell’header del sito andremo ad aprire :
/themes/classic/templates/_partials/head.tpl or javascript.tpl

Oppure :
/themes/classic/templates/_partials/javascript.tpl

Se desideriamo aggiungere i file al caricamento dell’footer del sito andremo ad aprire :
themes/classic/templates/layouts/layout-both-columns.tpl

Ovviamente /classic/ rappresenta il nostro tema, l’esempio è sul tema fornito di default, qualora avessimo acquistato un template dovremmo usare il percorso corretto (/themes/[nostr-templete]/….

All’interno dei file possiamo riportare direttamente le nostre chiamate, qualora dovessimo invocare il Javascript dobbiamo ricordarci di utilizzare il {literal} [nostro-codice] {/literal} come previsto da Smarty. In maniera diciamo, meno corretta, potremmo utilizzare la medesima notazione Smarty per includere CSS e Javascript in alcuni altri punti del nostro template o di un modulo, ad esempio all’interno del popup quanto altre modalità risultano difficoltose.

Come consigliato dalla documentazione ufficiale, nella sezione asset-management potrebbe risultare più corretto andare ad includere direttamente i nostri CSS nel file custom.css e i nostri Javascript nel file custom.js così, nel caso di aggiornamenti del template (qualora non utilizzassimo un child theme) non andremo a perdere le nostre modifiche.

I file in questione li trovate al seguente percorso :

/themes/classic/assets/css/custom.css

/themes/classic/assets/js/custom.js

2. Utilizzare il file theme.yml

Il file theme.yml è il file di impostazioni del nostro tema genitore (parent theme) o tema figlio (child theme) introdotto dalla versione 1.7.x di Prestashp.
Questo file definisce configurazione la configurazione di base del template, le meta informazioni come ad esempio la versione del nostro template, alcune parti del layout, il rang di compatibilità, la configurazione telvolta di alcuni hook nonché può controllare il caricamento sia sull’header che sul footer di CSS e Javascrpt.

All’interno della documentazione ufficiale di gestione dei temi, impostazione e struttura del file theme.yml è possibile avere un overview particolarmente approfondito su come funziona, come strutturarlo ma anche cosa può gestire.

Come potete vedere, sull’esempio del tema di default, il file richiama le funzioni principali del template:

parent: [nome del tema genitore / solo se lavoriamo su un childtheme]
name: classic [nome del nostro tema deve corrispondere alla directory di installazione]
display_name: Classic [nome da visualizzare sul back-office]
version: 1.0.0 [versione]
author: [di seguito i dati sull’autore]

name: “PrestaShop Team”
email: “pub@prestashop.com”
url: “http://www.prestashop.com”

Il file si trova al seguente percorso: /themes/classic/config/theme.yml

Proseguendo nella lettura della struttura delle impostazioni di configurazione troverete alcune righe di definizione della layout fino ad arrivare ad una sezione chiamata assets:, all’interno di questa potremmo andare a definire il caricamento dei nostri fogli di stile e javascript.

assets:
# If you’re using this theme as child and you want to load
# the parent theme assets, uncomment this line.

use_parent_assets: true [se desideriamo utilizzare l’assets css/js del nostro tema genitore qualora usassimo un tema genitore]
# The following lines are showing how to load assets in your page
# Uncomment and change value to start loading css or js files
css:

all: [pagina di setinazione: “all”: tutte]

– id: font-awesome
path: assets/css/font-awesome/css/font-awesome.css
media: all
priority: 200 [priorità di caricamento procedurale del file]

js:

all: [pagina di setinazione: tutte o una specifica come “cart” o “product”]

– id: cat-extra-lib
path: assets/js/cart-lib.js [percorso del file /themes/{theme_folder}]/assets/js/cart-lib.js
priority: 200 [priorità di caricamento procedurale del file]
atribute: async [imposta il caricamento asincrono]
position: bottom [definisce in che posizione caricare il js]
product: [serve a specificare se caricare il file solo in una pagina specifica]

IMPORTANTE: per rendere attualizzato il template è necessario cancellare il seguente file che verrà rigenerato, con le nuove impostazioni del tema, direttamente da Prestashop:
{parent_directory}/config/themes/your theme/shop*.json

Maggiori informazioni su questo fondamentale file di configurazione si possono trovare su un approfondito tutorial theme.yml di BelIVG.

3. Eseguendo un override sul FrontController.php

Probabilmente la procedura più pulita per caricare i nosrti file è operare attraverso il FrontController.php che gestisce un’enorme mole di funzioni di PrestaShop. In questo caso andremo ad operare sullo specifico file php: {parent_directory}/classes/controller/FrontController.php All’interno del file troverete una sezione setMedia() $this->registerStylesheet(‘theme-gamanee_the_penguin’, ‘/assets/css/mystyle.css’, [‘media’ => ‘all’, ‘priority’ => 0]); $this->registerJavascript(‘theme-gamanee_the_penguin’, ‘/assets/js/myjavascript.js’, [‘position’ => ‘bottom’, ‘priority’ => 0]); IMPORTANTE: possiamo andare ad operare direttamente sul FrontController.php ma è un’operazione non consigliata, è preferibile operare invece sull’Override del file cosicché, nel caso di update del core non andremo a perdere le nostre modifiche. Per operare in maniera proceduralmente corretta andremo quindi a creare un file FrontController.php all’interno della cartella di override il quale aggiungerà o modificherà alcune funzioni al file originale: {parent_directory}//override/classes/controller/FrontController.php Andremo quindi a creare il nostro file e richiameremo la nostra funzione public function setMedia()

cariamente_css_javascript_frontcontroller_php

La prima parte parent::setMedia(); richiama la funzione originale a cui andrà ad aggiungere le nostre richieste evitando di sovrascriverla. A secondo delle necessità andremo a richiamare i nostro CSS e JavaScript interni od esterni:{parent_directory}/override/classes/controller/FrontController.php Come consigliato dalla documentazione ufficiale, nella sezione asset-management potrebbe risultare più corretto andare ad includere direttamente i nostri CSS nel file custom.css e i nostri Javascript nel file custom.js così, nel caso di aggiornamenti del template (qualora non utilizzassimo un child theme) non andremo a perdere le nostre modifiche. I file in questione li trovate al seguente percorso: Javacript caricamento locale: /* local script */ $this->registerJavascript(‘myscript_local’, _THEME_DIR_.’assets/js/myscript.js’, [‘position’ => ‘bottom’, ‘priority’ => 150]); Javacript caricamento remoto : /* remote script */ $this->context->controller->registerJavascript( ‘myscript_remote’, // Unique ID ‘http://localhost/easyseopro.it/asset/js/myscript.js’, // JS path array(‘server’ => ‘remote’, ‘position’ => ‘bottom’, ‘priority’ => 350) // Arguments ); CSS caricamento locale: /* local css */ $this->registerJavascript(‘myscss_local’, _THEME_DIR_.’assets/css/mystyle.js’, [‘media’ => ‘all’, ‘priority’ => 250]); CSS caricamento remoto: /* remote css */ $this->context->controller->registerStylesheet( ‘mycss_remote’, // Unique ID ‘http://localhost/easyseopro.it/asset/css/sib-styles.css’, // CSS path array(‘server’ => ‘remote’, ‘position’ => ‘top’, ‘priority’ => 450) // Arguments ); Analogamente alle altre modalità di inclusione possiamo impostare gli specifici parametri per le richieste:

Parametri per il foglio di stile (registerStylesheet):

media: all|braille|embossed|handheld|print|projection|screen|speech|tty|tv default: all )
priority: da 0 a 999 ( default: 50 ) 0 è la priorità maggiore
inline: true|false (default: false ), se impostato su vero il foglio di stile sarà incluso nel tag {style} nella sezione {head}.

Parametri per il JavaScript (registerJavascript): :

position: head|bottom (default: bottom)
importante: core.js è il file caricato per primo sul footer in PS v1.7.x pertanto le jQuery non saranno caricate nella {head} del nostro sito, quando possibile dovrebbero essere caricati sul footer.
priority: da 0 a 999 ( default: 50 ) 0 è la priorità maggiore;
inline: true|false (default: false)
impostato su true il codice verrà incorporato all’interno del tag {script type=”text/javascript”} dell’html.
attribute: async|defer|none (default: none).

IMPORTANTE: per attualizzare il lavoro dovremmo andare a cancellare uno specifico file di caching:{parent_directory}/var/cache/prod/class_index.php A questo punto il gioco è fatto, per ulteriori approfondimenti la documentazione ufficiale nella sezione Asset management potrà chiarire i vostri dubbi, alcune note fondamentali prima di procedere:

Effettuate sempre il backup dei file originali prima di fare qualsiasi modifica;
Ricompilate i file di template;
Disabilitate temporaneamente la cache di Prestashop;
Sinceratevi attraverso il code inspector del vostro browser che i file siano stati caricati correttamente e non ci siano errori.