StarterTheme Prestashop 1.7
Transcript of StarterTheme Prestashop 1.7
![Page 1: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/1.jpg)
anatomia di StarterThemePrestaShop 1.7
![Page 2: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/2.jpg)
Luigi Massa - PrestaShop Ambassador Torino - [email protected]
2 parole su di meesperto di processi IT
SAP professional, Symfony developer, PrestaShop professional
PrestaShop Ambassador da gennaio 2016
ex manager GDG Torino
twitter: businessweblabsite: bwlab.itlinkedin: linkedin.com/in/lmassa
![Page 3: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/3.jpg)
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
![Page 4: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/4.jpg)
scaricare starter theme
repository in github: https://github.com/PrestaShop
starter theme:https://github.com/PrestaShop/StarterTheme
![Page 5: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/5.jpg)
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
![Page 6: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/6.jpg)
block elements permetteno di costruire una gerarchia ereditaria e sovrascrivere blocchi di template facilmente
template smarty
![Page 7: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/7.jpg)
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}
![Page 8: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/8.jpg)
block (twig)
![Page 9: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/9.jpg)
extends
![Page 10: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/10.jpg)
include
![Page 11: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/11.jpg)
rapida introduzione sull’organizzazione dello starter thee
tpl start themestruttura
![Page 12: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/12.jpg)
struttura starter theme home
![Page 13: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/13.jpg)
struttura altre pagine
![Page 14: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/14.jpg)
struttura layout layout-both-columns.tpl
![Page 15: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/15.jpg)
usando sylus è possibile creare una struttura semplificata dei css sfruttando variabili ed ereditarietà e compilando per ottenere i css
csscompiling
![Page 16: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/16.jpg)
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
![Page 17: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/17.jpg)
npm run watch
controlla live le modifiche ai file .styl
compila live in css
inserisce in assets/css/dev.css
![Page 18: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/18.jpg)
exemple: start from _dev/dev.styl
// Colorsbody-background-color = whiteborder-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
![Page 20: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/20.jpg)
esempio
![Page 21: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/21.jpg)
Configurazione theme.yml
Lo Starter Theme prevede un file di configurazione yml
![Page 22: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/22.jpg)
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
![Page 23: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/23.jpg)
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
![Page 24: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/24.jpg)
![Page 25: StarterTheme Prestashop 1.7](https://reader031.fdocuments.in/reader031/viewer/2022022202/58803feb1a28abfd0a8b5e17/html5/thumbnails/25.jpg)