Magento 2 Frontend le novità - Meet Magento 2015

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

Magento 2

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

Introduzione a
Magento2
1

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

Quando uscirà Magento 2?

https://github.com/magento/magento2

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

Le novità del
Front End
2

Le novità del Front End MAGENTO 22
Struttura Frontend MAGENTO 1.x
ROOT
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
ROOT
|--- SKIN
| |--- frontend
| | |--- package
| | |--------| theme

Struttura Frontend MAGENTO 2
ROOT
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
ROOT
|--- SKIN
| |--- frontend
| | |--- package
| | |--------| theme

Struttura Frontend MAGENTO 2
MAGENTO 2
|--- APP
| |--- design
| | |--- frontend
| | |--------| package
| | |--------| theme
WEB
|--- css
|--- fonts
|--- images
|--- js
THEME
|--- etc
|--- media
|--- web
|--- composer.json
|--- theme.xml

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>
...

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

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>

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>

Finalmente... JQUERY!
JQUERY 1.8.2
JQUERY NO CONFLICT
JQUERY LOADER WIDGET
JQUERY TABS WIDGET
JQUERY TRANSLATEINLINE WIDGET

LESS: Il Preprocessore per il CSS “Dinamico”

MAGENTO UI Library

RWD: Responsive Web Design

I Temi di default di Magento 2: BLANK

I Temi di default di Magento 2: LUMA

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

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”

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”

Creare un Tema
Magento2
3

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> 
<parent>Magento/blank</parent> 
<media>
<preview_image>media/preview.jpg</preview_image> 
</media>
</theme>

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”
]
]
}

8. Controlla che il tema venga riconosciuto da Magento
in ADMIN:Content > Design > Themes.

Creare un Tema MAGENTO 23 Creare un Tema MAGENTO 23
9. Attiva il tema in ADMIN: Stores > Configuration > Design

Novità del Design
del Back End
4

Novità del Design del Backend MAGENTO 24

Risorse utili per
Magento2
5

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

GRAZIE.DOMANDE?

#mmit2015 Le novità del FrontEnd in #Magento2
@andreasacca @MeetMagentoIt
?

Magento 2 Frontend le novità - Meet Magento 2015

Recommended

Recommended

More Related Content

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

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

Magento 2 Frontend le novità - Meet Magento 2015