Top Banner
anatomia di StarterTheme PrestaShop 1.7
25

StarterTheme Prestashop 1.7

Jan 19, 2017

Download

Software

Bwlab
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: StarterTheme Prestashop 1.7

anatomia di StarterThemePrestaShop 1.7

Page 2: StarterTheme Prestashop 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

Page 3: StarterTheme Prestashop 1.7

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

scaricare starter theme

repository in github: https://github.com/PrestaShop

starter theme:https://github.com/PrestaShop/StarterTheme

Page 5: StarterTheme Prestashop 1.7

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

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

template smarty

Page 7: StarterTheme Prestashop 1.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}

Page 8: StarterTheme Prestashop 1.7

block (twig)

Page 9: StarterTheme Prestashop 1.7

extends

Page 10: StarterTheme Prestashop 1.7

include

Page 11: StarterTheme Prestashop 1.7

rapida introduzione sull’organizzazione dello starter thee

tpl start themestruttura

Page 12: StarterTheme Prestashop 1.7

struttura starter theme home

Page 13: StarterTheme Prestashop 1.7

struttura altre pagine

Page 14: StarterTheme Prestashop 1.7

struttura layout layout-both-columns.tpl

Page 15: StarterTheme Prestashop 1.7

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

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

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

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 19: StarterTheme Prestashop 1.7

http://www.stylus-lang.com

Page 20: StarterTheme Prestashop 1.7

esempio

Page 21: StarterTheme Prestashop 1.7

Configurazione theme.yml

Lo Starter Theme prevede un file di configurazione yml

Page 22: StarterTheme Prestashop 1.7

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

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
Page 25: StarterTheme Prestashop 1.7