Magento 2

Nuovo approccio al Frontend


Antonio Carboni

Chi Sono


antonio Carboni
Black Cat
  • Webdesigner Freelance

  • Magento Frontend Developer

  • Frontend Developer presso TSC Consulting

  • Moderatore del forum e Mantainer della traduzione ufficiale italiana

  • (Black Cat)

Magento 2

Release Plan

Magento 2

Nuove Tecnologie


  • HTML5 e CSS3
  • jQuery
  • LESS
  • RequireJS

Obiettivi


  • Facilità di aggiornamento
  • Aumento delle performance
  • Aumento della qualità del codice

Differenze

Definizione di un tema

Magento 2

Il file theme.xml

Magento 2

Struttura Magento 1.x

Struttura Magento 1

Struttura Magento 2

Struttura Magento 2

CSS


  • Magento UI Library
  • LESS

Libreria UI

libreria UI

Libreria LESS

libreria LESS

Estendere la libreria

Estendere la libreria

Nuovo file LESS

NUOVO LESS

File Style in frontend

File in Frontend

Motivi di implementazione


  • Possibilità di usare il LESS.js lato client per un facile sviluppo con LESS
  • Compatibilità con tutte le istanze di Magento 2
  • Permette di utilizzare CSS
  • LESS non estende i requisiti di Magento con altre librerie

Includere i CSS

Includere i CSS

JavaScript


  • Da Prototype a jQuery
  • Possibilità di utilizzare RequireJS

Immagini


Resize Images

Layout e Template


  • FALLBACK INFINITI
  • Files localizzati e separati per moduli
  • Files XML divisi per singoli layout handle
  • Files XML non subiscono override

XML e Files

Struttura Layout Handles

Layout Handle

Esistono tre tipi di Layout handles:

  • PAGE TYPE: Corrispondono ai Full Action Names dei controller
  • PAGE LAYOUT: Corrispondono alle azioni del Controller più i parametri
  • ARBITRARY: Non Corrispondono a nessuna pagina ma possono essere usati da altri handles

Tipi di File Layout

  • Base Layouts
  • Theme Layouts

Base Layouts

Base Layouts

Theme Layouts

Theme Layouts

Layout Processing

Vengono prima Ordinati i file

  • File di moduli differenti:
  • - Dalle dipendenze o dal nome dei moduli
  • File di uno stesso modulo: tramite il nome

Layout Processing

Processing dei file

  • Legge tutti i base layouts e li ordina
  • Determina le sequenze di ereditarietà dei temi
  • Itera la sequenza dei temi:
  • - Aggiunge tutti i layout estesi della lista
  • - Sostituisce i file di base specificati in override
  • - Per tutti i temi figli, sostituisce i file in override

Esempio

Layout Processing

Struttura dei blocchi - Containers

Struttura dei blocchi container

Struttura dei blocchi - Blocks

Struttura dei blocchi blocks

Istruzioni XML: <block>

  • <block> con questi attributi:
  • - class: nome della classe che implementa il rendering di un blocco
  • - name & as
  • - before & after
  • - template
  • - output (toHTML è obsoleto - il valore raccomandato è 1)
  • - cacheable (booleano)

Istruzioni XML: <container>

  • <container> con questi attributi:
  • - name & as
  • - label
  • - before & after
  • - template
  • - output
  • - htmlTag
  • - htmlId
  • - htmlClass

Esempio dell'elemento <container>

Esempio struttura container

Istruzioni XML: <action>

  • Vengono passati i valori tramite tag "argument"

Istruzioni XML: <referenceBlock> e <referenceContainer>

  • Derivano dal tag "reference"

Istruzioni XML: <remove> e <move>

  • <remove> riprende la stessa funzionalità di Magento 1.x
  • <move> permette di dichiarare il blocco come figlio dentro un altro blocco

Esempio dell'elemento <move>

Esempio move

Localizzazione - Funzione

  • Magento 1.X: echo this->__('stringa')
  • Magento 2: echo __('stringa')

Localizzazione - FILE

  • La root directory è definita nei rispettivi moduli
  • Il nome del file corrisponde al codice della lingua
  • Locale è rinominato in "i18n"

Localizzazione - Esempio

  • Magento 1.X: app/locale/en_US/Mage_Catalog.csv
  • Magento 2: app/code/Magento/Catalog/i18n/en_US.csv
  •  :
  • Magento 1.X: app/design/frontend/TEMA/default/locale/en_US/translate.csv
  • Magento 2: app/design/frontend/VENDOR/TEMA/i18n/en_US.csv

Conclusioni

  • Più complesso
  • Più flessibile
  • Introduce tecnologie moderne
  • Codice più pulito, semplice e ottimizzato
  • Richiede un approccio molto più professionale

Grazie per l'attenzione

Antonio Carboni



approfondimenti:

wiki.magento.com/display/MAGE2DOC/