anatomia di StarterThemePrestaShop 1.7

Luigi Massa - PrestaShop Ambassador Torino - lmassa@bwlab.it

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