SlideShare a Scribd company logo
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
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Magento 2
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
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione a
Magento2
1
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 Magento21
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione a Magento21
Quando uscirà Magento 2?
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione a Magento21
https://github.com/magento/magento2
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione a Magento21
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
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del
Front End
2
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
Struttura Frontend MAGENTO 1.x
ROOT
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
ROOT
|--- SKIN
| |--- frontend
| | |--- package
| | |--------| theme
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
Struttura Frontend MAGENTO 2
ROOT
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
ROOT
|--- SKIN
| |--- frontend
| | |--- package
| | |--------| theme
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
Struttura Frontend MAGENTO 2
MAGENTO 2
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
WEB
|--- css
|--- fonts
|--- images
|--- js
THEME
|--- etc
|--- media
|--- web
|--- composer.json
|--- theme.xml
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
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>
...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
MODULO (Es. Catalog)
|--- view
| | |--- adminhtml
| | |--- base
| | |--- frontend
| | | |--- layout
| | | |--- templates
| | | |--- web
XML
PHTML
IMG, JS, CSS
“View” Integrata nel modulo
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
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
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
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>
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
XML PAGE LAYOUT - Esempio Inserimento CSS
<referenceContainer name=”head”>
<block class=”MagentoThemeBlockHtmlHeadCss” name=”css-name”>
<arguments>
<argument name=”file” xsi:type=”string”>css/styles.css</argument>
</arguments>
</block>
</referenceContainer>
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
Finalmente... JQUERY!
JQUERY 1.8.2
JQUERY NO CONFLICT
JQUERY LOADER WIDGET
JQUERY TABS WIDGET
JQUERY TRANSLATEINLINE WIDGET
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
LESS: Il Preprocessore per il CSS “Dinamico”
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
MAGENTO UI Library
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 22
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
I Temi di default di Magento 2: BLANK
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End MAGENTO 22
I Temi di default di Magento 2: LUMA
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End2
Traduzioni Magento 2: Il Dizionario
Nuova posizione per i file csvMAGENTO2
|--- APP
| |--- i18n
| | |--- Magento
| | |--------| it_it
| | | |-------- language.xml
| | | |-------- composer.json
| | | |-------- *.csv
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End2
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”
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità del Front End2
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”
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Tema
Magento2
3
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Tema MAGENTO 23
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>
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Tema MAGENTO 23
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”
]
]
}
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 23
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Tema MAGENTO 23 Creare un Tema MAGENTO 23
9. Attiva il tema in ADMIN: Stores > Configuration > Design
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del Design
del Back End
4
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del Design del Backend MAGENTO 24
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del Design del Backend MAGENTO 24
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Risorse utili per
Magento2
5
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 25
2MAGENTO
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
?

More Related Content

Similar to Magento 2 Frontend le novità - Meet Magento 2015

Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
Meet Magento Italy
 
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
Alessandro Montalti
 
Zurb workshop
Zurb workshop Zurb workshop
Zurb workshop
Commit University
 
GAE python GDG Milano L04
GAE python GDG Milano L04GAE python GDG Milano L04
GAE python GDG Milano L04
Paolo Dadda
 
Single Page Application con Angular 2
Single Page Application con Angular 2Single Page Application con Angular 2
Single Page Application con Angular 2
Michele Aponte
 
Angular 2 on stage
Angular 2 on stageAngular 2 on stage
Angular 2 on stage
Michele Aponte
 
Mvc e di spring e angular js
Mvc e di   spring e angular jsMvc e di   spring e angular js
Mvc e di spring e angular js
Riccardo Cardin
 
OCA: da Oggi Contribuisco Anch'io!
OCA: da Oggi Contribuisco Anch'io!OCA: da Oggi Contribuisco Anch'io!
OCA: da Oggi Contribuisco Anch'io!
Alex Comba
 
05 OCA, da Oggi Contribuisco Anch'io!
05 OCA, da Oggi Contribuisco Anch'io!05 OCA, da Oggi Contribuisco Anch'io!
05 OCA, da Oggi Contribuisco Anch'io!
Associazione Odoo Italia
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...jekil
 
WordPress per giornalisti freelance
WordPress per giornalisti freelance  WordPress per giornalisti freelance
WordPress per giornalisti freelance GGDBologna
 
d4r^7 - docker alla settima
d4r^7 - docker alla settimad4r^7 - docker alla settima
d4r^7 - docker alla settima
Gianni Bombelli
 
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
Codemotion
 
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
AndreaStagi3
 
WordPress Meetup Torino - 14 Luglio 2015
WordPress Meetup Torino - 14 Luglio 2015WordPress Meetup Torino - 14 Luglio 2015
WordPress Meetup Torino - 14 Luglio 2015
Mattia Piovano
 
Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020
Stefania Massenza
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
dotnetcode
 
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Mamadigital
 
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
Roberto Torresani
 
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passiQt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
Paolo Sereno
 

Similar to Magento 2 Frontend le novità - Meet Magento 2015 (20)

Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
Alessandro Montalti: Gestione di un multi-store internazionale in Magento CE:...
 
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
Meet Magento 2015 Italy, Montalti - "Gestione di un multi-store internazional...
 
Zurb workshop
Zurb workshop Zurb workshop
Zurb workshop
 
GAE python GDG Milano L04
GAE python GDG Milano L04GAE python GDG Milano L04
GAE python GDG Milano L04
 
Single Page Application con Angular 2
Single Page Application con Angular 2Single Page Application con Angular 2
Single Page Application con Angular 2
 
Angular 2 on stage
Angular 2 on stageAngular 2 on stage
Angular 2 on stage
 
Mvc e di spring e angular js
Mvc e di   spring e angular jsMvc e di   spring e angular js
Mvc e di spring e angular js
 
OCA: da Oggi Contribuisco Anch'io!
OCA: da Oggi Contribuisco Anch'io!OCA: da Oggi Contribuisco Anch'io!
OCA: da Oggi Contribuisco Anch'io!
 
05 OCA, da Oggi Contribuisco Anch'io!
05 OCA, da Oggi Contribuisco Anch'io!05 OCA, da Oggi Contribuisco Anch'io!
05 OCA, da Oggi Contribuisco Anch'io!
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
 
WordPress per giornalisti freelance
WordPress per giornalisti freelance  WordPress per giornalisti freelance
WordPress per giornalisti freelance
 
d4r^7 - docker alla settima
d4r^7 - docker alla settimad4r^7 - docker alla settima
d4r^7 - docker alla settima
 
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
Marco Arena - Perché nel 2015 parliamo ancora di C++? | Codemotion Milan 2015
 
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
 
WordPress Meetup Torino - 14 Luglio 2015
WordPress Meetup Torino - 14 Luglio 2015WordPress Meetup Torino - 14 Luglio 2015
WordPress Meetup Torino - 14 Luglio 2015
 
Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
 
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
 
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styl...
 
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passiQt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
Qt Lezione2: Creare un’applicazione con Qt Creator in pochi semplici passi
 

Magento 2 Frontend le novità - Meet Magento 2015

  • 1.
  • 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 Magento21
  • 7. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 Quando uscirà Magento 2?
  • 8. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 https://github.com/magento/magento2
  • 9. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 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 22 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 22 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 22 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 22 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 22 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 22 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 22 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 22 XML PAGE LAYOUT - Esempio Inserimento CSS <referenceContainer name=”head”> <block class=”MagentoThemeBlockHtmlHeadCss” 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 22 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 22 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 22 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 22
  • 23. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 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 22 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 End2 Traduzioni Magento 2: Il Dizionario Nuova posizione per i file csvMAGENTO2 |--- 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 End2 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 End2 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 23 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 23 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 23
  • 32. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 23 Creare un Tema MAGENTO 23 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 24
  • 35. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Backend MAGENTO 24
  • 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 25 2MAGENTO
  • 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 ?