Magento 2 Frontend - Meet Magento Italy 2015

Andrea Saccà introduces Magento 2 frontend changes during his presentation at the second edition of the Meet Magento Italy 2015.

Transcript

2. ANDREA SACCÀ Follow me! @andreasacca @magentiamo Web Designer & Frontend Developer, Sviluppatore Frontend Certificato Magento, Autore del libro Mastering Magento Theme Design, CEO & Founder 1604lab S.R.L. Ideatore e Fondatore di Magentiamo.it Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
3. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Magento 2
4. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 Le Novità del Front End Creare un Tema per Magento2 Le Novità del Design del Back End Risorse Utili Magento 2 1 2 3 4 5
5. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 1
6. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 REQUISITI DI SISTEMA per Magento2 Guida all’installazione --> http://goo.gl/qdgA7X Apache: 2.2 or 2.4 PHP: >=5.4.11 o 5.5.x MySQL: 5.6.x Introduzione a Magento2 1
7. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 1 Quando uscirà Magento 2?
8. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 1 https://github.com/magento/magento2
9. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 1 COMPOSER - https://getcomposer.org/ { “name”: “magentiamo/theme-frontend-yuki”, “description”: “Super Duper Theme for Magento2”, “require”: { “php”: “~5.4.11|~5.5.0”, “magento/theme-frontend-blank”: “0.42.0-beta1”, “magento/framework”: “0.42.0-beta1”, “magento/magento-composer-installer”: “*” }, “type”: “magento2-theme”, “version”: “0.42.0-beta1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “extra”: { “map”: [ [ “*”, “Magentiamo/Yuki” ] ] } ESEMPIO FILE COMPOSER.JSON
10. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End 2
11. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 Struttura Frontend MAGENTO 1.x ROOT |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme ROOT |--- SKIN | |--- frontend | | |--- package | | |--------| theme
12. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 Struttura Frontend MAGENTO 2 ROOT |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme ROOT |--- SKIN | |--- frontend | | |--- package | | |--------| theme
13. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 Struttura Frontend MAGENTO 2 MAGENTO 2 |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme WEB |--- css |--- fonts |--- images |--- js THEME |--- etc |--- media |--- web |--- composer.json |--- theme.xml
14. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 view.xml - Un file per le dimensioni delle immagini ... <var name=”category_page_grid:type”>small_image</var> <var name=”category_page_grid:width”>250</var> <var name=”category_page_grid:ratio”>1</var> <var name=”category_page_grid:height”>250</var> ...
15. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 MODULO (Es. Catalog) |--- view | | |--- adminhtml | | |--- base | | |--- frontend | | | |--- layout | | | |--- templates | | | |--- web XML PHTML IMG, JS, CSS “View” Integrata nel modulo
16. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 XML PAGE LAYOUT - Wireframe della Pagina <CONTAINER> ------------------------------> Blocco Struttura <REFERENCECONTAINER> Per definire il blocco “Madre” ! THE <ACTION> INSTRUCTION IS DEPRECATED. DO NOT USE IT! <MOVE> Per spostare un blocco da un contenitore ad un altro <REMOVE> Per eliminare un blocco <UPDATE> Per aggiornare gli “handle” magento2/app/code/Magento/Theme/view/frontend/page_layout/2columns-left.xml
17. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 XML PAGE LAYOUT - Wireframe della Pagina <layout xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLoca- tion=”../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_layout.xsd”> <update handle=”1column”/> <referenceContainer name=”columns”> <container name=”div.sidebar.main” htmlTag=”div” htmlClass=”sidebar sidebar-main” after=”main”> <container name=”sidebar.main” as=”sidebar_main” label=”Sidebar Main”> <remove name=”report.bugs”/> <container> </container> <move element=”name.of.an.element” destination=”name.of.destination.element” as=”new_ alias” after=”name.of.element.after” before=”name.of.element.before”/> </referenceContainer> </layout>
18. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 XML PAGE LAYOUT - Esempio Inserimento CSS <referenceContainer name=”head”> <block class=”Magento\Theme\Block\Html\Head\Css” name=”css-name”> <arguments> <argument name=”file” xsi:type=”string”>css/styles.css</argument> </arguments> </block> </referenceContainer>
19. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 Finalmente... JQUERY! JQUERY 1.8.2 JQUERY NO CONFLICT JQUERY LOADER WIDGET JQUERY TABS WIDGET JQUERY TRANSLATEINLINE WIDGET
20. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 LESS: Il Preprocessore per il CSS “Dinamico”
21. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 MAGENTO UI Library
22. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 RWD: Responsive Web Design Le novità del Front End MAGENTO 2 2
23. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 I Temi di default di Magento 2: BLANK
24. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 2 2 I Temi di default di Magento 2: LUMA
25. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End 2 Traduzioni Magento 2: Il Dizionario Nuova posizione per i file csv MAGENTO2 |--- APP | |--- i18n | | |--- Magento | | |--------| it_it | | | |-------- language.xml | | | |-------- composer.json | | | |-------- *.csv
26. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End 2 CSV Traduzioni Magento 1.x 1. “Testo/Frase Originale”,”Traduzione” 2. “Add New Block”,”Aggiungi nuovo blocco” 3. “Add New Page”,”Aggiungi Nuova Pagina” 4. “All Countries”,”Tutte le Nazioni”
27. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End 2 CSV Traduzioni Magento 1.x 1. “Testo/Frase Originale”,”Traduzione”,”Meta Info 1”,”Meta Info 2” 2. “Add New Block”,”Aggiungi nuovo blocco”,”module”,”Mage_Cms” 3. “Add New Page”,”Aggiungi Nuova Pagina”,”theme”,”blank” 4. “All Countries”,”Tutte le Nazioni”,”theme”,”blank”
28. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema Magento2 3
29. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 2 3 1. Crea la cartella del “Vendor” in MAGENTO2/app/design/frontend/Magentiamo 2. Al suo interno crea la cartella del “Theme” MAGENTO2/app/design/frontend/Magentiamo/Yuki 3. Crea un’immagine THEME/media/preview.jpg del tema 4. Dichiara il tema: Crea il file theme.xml nella cartella del tema <theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd”> <title>Magentiamo - Yuki</title> <!-- your theme’s name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme’s preview image --> </media> </theme>
30. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 2 3 5. Definisci la dimensione delle immagini in THEME/etc/view.xml 6. Crea la cartella “web”per i files statici MAGENTO2/app/design/frontend/Magentiamo/Yuki/web 7. Crea il file composer.json { “name”: “magentiamo/theme-frontend-yuki”, “description”: “Super Duper Theme for Magento2”, “require”: { “php”: “~5.4.11|~5.5.0”, “magento/theme-frontend-blank”: “0.42.0-beta1”, “magento/framework”: “0.42.0-beta1”, “magento/magento-composer-installer”: “*” }, “type”: “magento2-theme”, “version”: “0.42.0-beta1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “extra”: { “map”: [ [ “*”, “Magentiamo/Yuki” ] ] }
31. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 8. Controlla che il tema venga riconosciuto da Magento in ADMIN:Content > Design > Themes. Creare un Tema MAGENTO 2 3
32. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 2 3 Creare un Tema MAGENTO 2 3 9. Attiva il tema in ADMIN: Stores > Configuration > Design
33. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Back End 4
34. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Backend MAGENTO 2 4
35. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Backend MAGENTO 2 4
36. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Risorse utili per Magento2 5
37. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Magento 2 Documentation https://magento.com/developers/magento2 Ben Marks Magento Community Evangelist http://bhmarks.com/blog/ GitHub Magento2 https://github.com/magento/magento2 Alan Kent Chief Magento 2 Architect https://alankent.wordpress.com/category/magento/ Magentiamo.it http://www.magentiamo.it/magento2 Risorse Utili MAGENTO 2 5 2 MAGENTO
38. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 GRAZIE.DOMANDE?  #mmit2015 Le novità del FrontEnd in #Magento2 @andreasacca @MeetMagentoIt ?