Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Anatomia di starter theme

77 views

Published on

PrestaShop 17 porta con se una nuova veste grafica e un sistema diverso per fare il build della veste grafica
Il video su https://youtu.be/-GE4MoixwEI

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Anatomia di starter theme

  1. 1. anatomia di StarterTheme PrestaShop 1.7
  2. 2. 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
  3. 3. 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
  4. 4. scaricare starter theme repository in github: https://github.com/PrestaShop starter theme: https://github.com/PrestaShop/StarterTheme
  5. 5. 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
  6. 6. block elements permetteno di costruire una gerarchia ereditaria e sovrascrivere blocchi di template facilmente template smarty
  7. 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}
  8. 8. block (twig)
  9. 9. extends
  10. 10. include
  11. 11. rapida introduzione sull’ organizzazione dello starter thee tpl start theme struttura
  12. 12. struttura starter theme home
  13. 13. struttura altre pagine
  14. 14. struttura layout layout-both-columns.tpl
  15. 15. usando sylus è possibile creare una struttura semplificata dei css sfruttando variabili ed ereditarietà e compilando per ottenere i css css compiling
  16. 16. 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
  17. 17. npm run watch controlla live le modifiche ai file .styl compila live in css inserisce in assets/css/dev.css
  18. 18. 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
  19. 19. http://www.stylus-lang.com
  20. 20. esempio
  21. 21. Configurazione theme.yml Lo Starter Theme prevede un file di configurazione yml
  22. 22. 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
  23. 23. 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

×