�ݺ�ߣ

anatomia di StarterTheme
PrestaShop 1.7

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

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

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

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

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

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}

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

struttura layout layout-both-columns.tpl

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

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

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

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

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

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

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

�ݺ�ߣ

StarterTheme Prestashop 1.7

More Related Content

StarterTheme Prestashop 1.7