StarterTheme Prestashop 1.7
•
0 likes•768 views
Structure and build check the video on youtube: https://youtu.be/-GE4MoixwEI
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to StarterTheme Prestashop 1.7
Similar to StarterTheme Prestashop 1.7 (20)
More from Bwlab
StarterTheme Prestashop 1.7
- 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. 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. scaricare starter theme repository in github: https://github.com/PrestaShop starter theme: https://github.com/PrestaShop/StarterTheme
- 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. block elements permetteno di costruire una gerarchia ereditaria e sovrascrivere blocchi di template facilmente template smarty
- 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. block (twig)
- 9. extends
- 10. include
- 11. rapida introduzione sull’ organizzazione dello starter thee tpl start theme struttura
- 12. struttura starter theme home
- 15. usando sylus è possibile creare una struttura semplificata dei css sfruttando variabili ed ereditarietà e compilando per ottenere i css css compiling
- 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. npm run watch controlla live le modifiche ai file .styl compila live in css inserisce in assets/css/dev.css
- 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
- 20. esempio
- 21. Configurazione theme.yml Lo Starter Theme prevede un file di configurazione yml
- 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. 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