startertheme prestashop 1.7
TRANSCRIPT
anatomia di StarterThemePrestaShop 1.7
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
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}
block (twig)
extends
include
rapida introduzione sull’organizzazione dello starter thee
tpl start themestruttura
struttura starter theme home
struttura altre pagine
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
csscompiling
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
// 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
http://www.stylus-lang.com
esempio
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