PrestaShop 17 porta con se una nuova veste grafica e un sistema diverso per fare il build della veste grafica Il video su https://youtu.be/-GE4MoixwEI

1. anatomia di StarterTheme
PrestaShop 1.7

2. Luigi Massa - PrestaShop Ambassador Torino - lmassa@bwlab.it
2 parole su di me
esperto di processi IT
SAP professional, Symfony developer,
PrestaShop professional
PrestaShop Ambassador da gennaio
2016
ex manager GDG Torino
twitter: businessweblab
site: bwlab.it
linkedin: linkedin.com/in/lmassa

3. strumenti
github: repository, branch and pull
request
npm: npm is the package manager for
JavaScript. Find, share, and reuse
packages of code from hundreds of
thousands of developers — and
assemble them in powerful new ways.
stylus-lang: EXPRESSIVE, DYNAMIC,
ROBUST CSS
Yaml: yet another markup language

4. scaricare starter theme
repository in github: https://github.com/PrestaShop
starter theme:
https://github.com/PrestaShop/StarterTheme

5. folder structure
● config: file di configurazione
template
● template: file tpl
● _dev: file css stylus
● assets: file compilati css, js e
immagni
● modules: allow you to override
templates for modules
● plugins: contains the Smarty
extensions required by the
theme, if any

6. block elements
permetteno di costruire una
gerarchia ereditaria e sovrascrivere
blocchi di template facilmente
template smarty

7. risorsa concettuale
smarty è simile a twig per la gestione dei
blocchi, degli include e dell’ereditarietà
{block <name>}...{/endblock}
{extends file='<tpl name>'}
{include file='<tpl name>' <var>=$varname}

8. block (twig)

9. extends

10. include

11. rapida introduzione sull’
organizzazione dello starter thee
tpl start theme
struttura

12. struttura starter theme home

13. struttura altre pagine

14. struttura layout layout-both-columns.tpl

15. usando sylus è possibile creare una
struttura semplificata dei css
sfruttando variabili ed ereditarietà e
compilando per ottenere i css
css
compiling

16. alcuni comandi
npm install: installa le dipendenze npm per la compilazione; sotto _dev
da lanciare sotto _dev, npm run:
● watch: compila i file stylus real time
● build: compila i file stylus e li minimizza in un unico in assets/css
● build-wach: i precedenti uniti
npm run legge il file package.json

17. npm run watch
controlla live le modifiche ai file .styl
compila live in css
inserisce in assets/css/dev.css

18. exemple: start from _dev/dev.styl
// Colors
body-background-color = white
border-color = grey
….
@import "_mixins.styl"
…..
#checkout-cart-summary
float right
width 30%
gestisce i colori del tema grafico con delle
variabili
importa altri file stylus
definisce lo stile della classe su id checkout-
cart-summary e

19. http://www.stylus-lang.com

20. esempio

21. Configurazione
theme.yml
Lo Starter Theme prevede un file di
configurazione yml

22. config/theme.yml
Il file riporta la configurazione del
tema grafico: chi l'ha creato, gli hook
abilitati etc…
La descrizione di tutti i parametri di
configurazione si trova su github.com

23. contenuto della configurazione
nome template = folder name
versione, autore, compatibilità, dimensione delle immagini, tipi di layout
moduli attivati e disattivati di default in fase di installazione template, hook
gestiti con i relativi moduli attivati