Aggiungere CSS e JavaScript su Prestashop 1.7.x

Metodi e modi per aggiungere CSS e JavaScript in PrestaShop v1.7.x
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]/….

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”

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

- 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).
- 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.

Written by Amar A.
CONTATTO
Articoli nella medesima categoria

eCommerce e vendita online: guida introduttiva
Guida introduttiva 2023 all’eCommerce e vendita online, consigli utili per la tua attività su web e sulla scelta della piattaforma di vendita.

eCommerce e vendita online: guida introduttiva
Guida introduttiva 2023 all’eCommerce e vendita online, consigli utili per la tua attività su web e sulla scelta della piattaforma di vendita.

eCommerce e vendita online: guida introduttiva
Guida introduttiva 2023 all’eCommerce e vendita online, consigli utili per la tua attività su web e sulla scelta della piattaforma di vendita.
0 commenti