Magento 2 Creare e Customizzare Temi. Elementi by liviob

PRIMI ELEMENTI DI UN TEMA DI MAGENTO 2 Contenuto del manuale Magento 2 è un solido E-commerce con molte funzionalità. E’ la soluzione definitiva per E-commerce, mentre altri CMS possono essere un punto di inizio, destinato però a essere sostituito se E-commerce si ingrandisce, Magento resta la soluzione scalabile. E’ il miglior software per le piccole aziende e PMI. Magento consente un’ampia gamma di personalizzazioni è open source. Esistono molti plug-in ed estensioni disponibili da fonti terze o anche da sviluppatori Magento. Magento è il CMS più utilizzato per la realizzazione di E-commerce, è stato scelto da oltre il 30% delle aziende. Magento offre : • Strumenti di marketing; • Ottimizzazione SEO; • Comparazione dei prodotti; • Recensioni per ogni prodotto; • Immagini multiple per ogni prodotto; • Report per la gestione degli ordini; • Fatturazione e gestione di resi etc; • Importazione e di esportazione del catalogo; • Un sito multilingua, attraverso multi store view. Magento è però ad esempio più impegnativo di WooCommerce. Infatti: • Richiede un server hosting potente • Il costo dei temi è intorno ai 100/200 euro, mentre per Woocommerce è 40/60 € • Esistono per Woocommerce maggiori temi free. Per Magento Io ho testato il sito che segue, che ha temi validi. http://www.venustheme.com/theme/ 2

Imparare Magento 2 Esistono manuali e libri, fra questo il sito : https://u.magento.com/developers Amazon ha libri che riguardano Magento e specificatamente Magento 2. La curva di apprendimento Magento è però lunga. Saper maneggiare Magento richiede un notevole impegno, a mio avviso molto maggiore di WooCommerce o anche Prestashop. Tutti i manuali e le principali pubblicazioni sono in Inglese, pertanto diventare sviluppatori di Magento richiede padronanza di tale lingua. Per facilitare l’apprendimento ho creato queste pagine, che contengono gli elementi essenziali per sviluppare temi di Magento. Utili anche per utilizzare e customizzare temi esterni. Questi gli argomenti. • Installazione locale e remoto • Performace di Magento • Temi : o Struttura; o Blocchi; o Widget; o Magento UI components o Pagine e templates; o Magento_Theme; o Magento_Custom • Siti Multilingua • Slider home page • Risorse

Autore Walter Livio Bollini, una lunga carriera nel IT. Negli ultimi 15 anni come IT Manager ho implementato ERP, CRM. Esperto dei problemi di sicurezza. Da oltre 5 anni sviluppatore nel mondo del WEB e in particolare nel mondo E-Commerce, dove privilegio Magento e WooCommerce. Sito personale : https://www.liviobollini.it Il sito contiene numerosi tutorial sui linguaggi di programmazione e ECommerce. Ionic per la creazione di App.

Indice Contenuto del manuale ................................................................................ 2 Imparare Magento 2 ..................................................................................... 3 Autore .......................................................................................................... 4 Indice ........................................................................................................... 5 Installare Magento 2 in locale..................................................................... 6 Prerequisisti .............................................................................................. 7 Creare un db .............................................................................................. 7 Istallazione ................................................................................................ 8 Altre operazioni ...................................................................................... 11 Requisiti di Mamp .................................................................................. 12 Errori nell’installazione ........................................................................... 12 o Versioni non adatte di PHP ............................................................. 12 o Non funzionano i comandi a terminale ........................................... 13 o A seguito di aggiornamenti compare : Exception printing is disabled 13 Installare Magento 2 server remoto .......................................................... 14 Magento 2 performance. ............................................................................ 14 • Ottimizzare il DB ............................................................................... 14 • Enable Flat Categories and Products .................................................. 15 • Merge/Minify CSS and JS Files ......................................................... 15 • Caching ............................................................................................... 15 • Reduce Server Response Time ........................................................... 15 Traduzione lingua Italiana ......................................................................... 16 Creare un tema di Magento 2..................................................................... 17 • Struttura di un tema di Magento: folders............................................ 17 • File del tema ....................................................................................... 18 • Modificare il logo, usando i blocchi ................................................... 19 Inserire i files css e js nel tema .................................................................. 20 Magento UI components............................................................................ 21 Modifiche al Layout .................................................................................. 22 Page Layouts ........................................................................................... 22 Come Customizzare Magento 2 theme. .................................................. 22 Le istruzioni per i blocchi ....................................................................... 23 Modifiche delle colonne delle pagine ..................................................... 23 Inserire un blocco statico ........................................................................ 24 Inserire un blocco in una pagina ............................................................. 24 5

Identificare la posizione dei blocchi ....................................................... 25 Modificare il numero di colonne di una pagina ...................................... 25 Creare un banner statico : Blocchi /Widget ............................................ 26 • Creare un blocco .............................................................................. 26 • Creare un widget ............................................................................. 26 Creare un modulo ................................................................................... 27 Modificare una pagina ............................................................................ 30 Sito Multilingua ......................................................................................... 31 • File lingua ........................................................................................... 31 • Store views ......................................................................................... 31 • Set Locale Option dello Store View .................................................. 32 • Scheduled Import Setting, abilitare il modulo ceccando : Enabled. .. 32 • Usare le bandierine ............................................................................. 34 ! Traduzione field labels ....................................................................... 36 • Tradurre le categorie .......................................................................... 36 • Tradurre le pagine .............................................................................. 36 Installare uno slider nel tema Magento 2 .................................................. 38 Dove trovare risorse ................................................................................... 40 Temi di Magento..................................................................................... 40 Magento Comunity ................................................................................. 40 Training................................................................................................... 40 Blog / Siti ................................................................................................ 40

Installare Magento 2 in locale. In questo link i dettagli per utilizzare MAMP e installare Magento2, in locale https://www.liviobollini.it/EcommerceMagento Prerequisisti •

PHP: versione 5.5 o meglio 7

•

MySQL almeno 2.1.2: Compatibile con MySQL 5.7

Per installare localmente Magento 2, questi i passi da eseguire: -scaricare l’ultima versione di Mamp, come descritto nel link https://www.liviobollini.it/tutorPhpMamp.php Creare un db In MAMP :Open web start page>Strumenti >Phpmyadmin

-Devono poi essere scaricati i file di Magento al sito https://magento.com/tech-resources/download In questa fase occorre : -creare un account Magento -scegliere : • versione 7

• formato Suggerita l’ultima versione, formato .zip. Successivamente la cartella scaricata e decompressa dovra’ essere inserita in MAMP>HTDCOS e Rinominato. Istallazione • Localhost:8888/Magento, per iniziare il setup

• lanciato il Setup Magento , si procede alla verifica dei requisiti:

• Poi al collegamento con il DB, qui va ricordato che in Mamp : • user e password= root. • Database name= nome del DB creato al punto precedente.

• Web Configuration: per definire sia il link che anche l’accesso al pannello amministrativo.

• Customizzazione: per la definizione del fuso orario, lingua e moneta di default. • Admin: nome e password dell’amministratore • Installazione: finita la configurazione si arriva alla installazione

• Success: terminata l’installazione

Altre operazioni

Con il comando CLI posizionarsi all’interno del Progetto di Magento Eseguire: • • • •

composer install php bin/magento setup:static-content:deploy php bin/magento cache:flush php bin/magento indexer:reindex

Altri settaggi sono • Controllare lo stato della cache php bin/magento cache:status • Eventualmente disabilitare la cache php bin/magento cache:disable

Requisiti di Mamp • mysql 5.6 • php 7 Questi requisiti sono controllabili lanciando MAMP • preferences : nella barra di menu in alto o PHP o Mysql Nel caso MY sql vada aggiornato : https://www.basiliko.net/configurare-cron-di-magento-2-su-mamp/ https://www.human-element.com/installing-magento2-on-mac-for-localdevelopment/ In particolare le ultime versioni di MAMP usano Mysql 5.6.3 che è quello che serve, ma le precedenti usavano per default 5.5, che deve essere aggiornato a 5.6 per usare Magento 2.

Errori nell’installazione o Versioni non adatte di PHP Nella voce preferenze, che si trova nella barra menu può apparire una versione non adatta per un tema di Magento. In questo caso occorre scaricare da MAMP la versione di PHP necessaria, poi andare alla cartella di MAMP bin /php e mettere un simbolo: _ a tutte le versioni di PHP che non si vuole utilizzare . Esempio php 5.4.45_. Lasciando intatte le due 12

versioni di php che si vuole visualizzare nelle preferenze : Esempio: php7.0.20 Fatto questo riavviato MAMP, appaiono nelle preferenze le versioni di php che si vuole visualizzare. o Non funzionano i comandi a terminale In questo caso ho risolto con il file . bash, richiamato con il comando sudo nano .bash_profile

In questo file ho copiato # MAMP PHP export MAMP_PHP=/Applications/MAMP/bin/php/php7.0.20/bin export PATH="$MAMP_PHP:$PATH"

Facendo attenzione di salvare con ctrl +X e poi Y. (Non cmd ma ctrl). Attenzione!! 7.0.20 va eventualmente cambiata con la versione in uso di PHP. o A seguito di aggiornamenti compare : Exception printing is disabled Dopo l’aggiornamento a MAMP 4.4.1 puo’ accadere l’errore: There has been an error processing your request Exception printing is disabled by default for security reasons. Nr……… In questo caso i passi che ho seguito sono : o Var | report : ci sono i file degli errori generati. Ho visionato il file che riporta il numero che appare nel fornt-end(nr…). 13

o Ho usato php 7.1, invece di 7.2, come segnalato nel file di errore o Nel file app|etc|env.php : ho commentato : // 'crypt' => // array ( // 'key' => '7758811187aa486216fa20090e833d8c', // ),

Riavviato MAMP; funziona!!!

Installare Magento 2 server remoto Per invece collegare Magento2 con il server remoto, occorre modificare il file env.php <magento_dir>/app/etc/env.php In questo caso, nella sezione occorre inserire i dati del DB remoto, inviati dal fornitore del servizio:

'host' => '…….', 'dbname' => 'Magentocosmetici', 'username' => '….', 'password' => '….’, 'active' => '1',

Magento 2 performance. Per migliorare le prestazioni, questi i passi: • Ottimizzare il DB o Attraverso phpmyadmin: selezionare le tabelle del DB o Selezionare le tabelle o In fondo scegliere opzione Ottimizza tabelle

• Enable Flat Categories and Products Stores > Configuration > Catalog > Catalog > Storefront, scegliere Use Flat Catalog Category

• Merge/Minify CSS and JS Files Stores -> Configuration > Advanced > Developer > JavaScript Settings o Merge JavaScript Files Yes o Minify JavaScript Files Yes Stores > Configuration > Advanced > Developer > CSS Settings Merge CSS Files Yes o Minify CSS Files Yes • Caching System > Cache Management o Enable -> Submit • Reduce Server Response Time Stores > Configuration > Advanced > System > Full Page Cache Caching Application : Varnish 15

Traduzione lingua Italiana https://www.liviobollini.it/EcommerceMagentoTraduzione Prima di visualizzare il sito occorre ricordarsi di pulire la cache : php bin/magento

cache:clean.

Questi alcuni comandi CLI di Magento help list

Lists commands

admin admin:user:create admin:user:unlock

Creates an administrator Unlock Admin Account

cache cache:clean cache:disable cache:enable cache:flush

Cleans cache type(s) Disables cache type(s) Enables cache type(s) Flushes cache storage used by cache type(s)

Creare un tema di Magento 2 â&#x20AC;˘ Struttura di un tema di Magento: folders

Maiuscolo Folders

â&#x20AC;˘ File del tema Nella directory di Magento si deve creare un file denominato: theme.xml. Questo il codice che serve per iniziare un tema

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:noNamespaceSchemaLocation="urn:magento:framework:C onfig/etc/theme.xsd"> <title>tema</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.png</preview_image> </media> </theme> Da notare nella cartella media Ă¨ stata inserita la preview immagine. Il tema va poi registrato con il codice del file registration.php nella directory di Magento. <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/test/tema', __DIR__ );

Composer.json { "name": "test/tema", "description": "test tema", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-luma": "~100.0", "magento/framework": "~100.0" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } Ultimo va confermato lâ&#x20AC;&#x2122;uso del tema attraverso Stores | Configuration | Design, oppure: Content | Configuration | edit. â&#x20AC;˘ Modificare il logo, usando i blocchi Per prima cosa inseriamo un logo. Per questo dobbiamo fare 2 cose: -creare una cartella web/images dove inserire logo.png -inserire il file default.xml a livello di magento_directory

<referenceBlock name="logo"> <action method="setLogoFile"> <argument name="logo_file" xsi:type="string">images/logo.png</argument> </action> </referenceBlock> 19

Non va dimenticato di dare le dimensioni dell’immagine del logo. Usando Content | themes | Edit | header. Questo il logo utilizzato per un sito food(esempio):

Abbiamo così usato la tecnica dei blocchi, per modificare il logo. Ogni blocco ha un nome/identificativo, definito da : <referenceBlock name="logo">. Il contenuto del blocco definito da images/logo.png. Aggiungendo il blocco nella pagina default.xml viene usato in tutte le pagine.

Inserire i files css e js nel tema Dobbiamo inserire nel tema: • Jquery • Tutti i file per uno slider nella home page (owl.carousel css e js ) • Bootstrap css e js • Google fonts • File di stile cutom.css Questo è possibile, creando un nuovo file chiamato: default_head_blocks.xml Per inserire un file css le istruzioni sono <css src="css/custom.css" /> Per inserire un file js <script src="bootstrap/js/bootstrap.min.js" />

I file richiamati da default_head_blocks.xml, vanno messi in sottocartelle di app/design/frontend/test/tema/web. Sono presenti le seguenti sottodirectory: • • • • • •

bootstrap css fonts images (contiene anche logo.png) js owl.carousel

Magento UI components Magento Ui components lavora con LESS CSS preprocessor e fornisce l’ opportunità di customizzare le pagine di Magento con il minimo sforzo. Riguarda : Actions toolbar Breadcrumbs Buttons Drop-down menus Forms Icons Layout Loaders Messages Pagination Popups Ratings Sections Tabs and accordions Tables Tooltips Typography A list of theme variables Richiede la conoscenza del Linguaggio LESS: variabili e mixin. Per maggiori informazioni: https://www.liviobollini.it/EcommerceTemiLess 21

Modifiche al Layout Page Layouts

Magento Ă¨ scritto con la logica MVC Model, View, Controller. Nelle cartelle view esistono le pagine xml, cioĂ¨ strutture che vengono descritte con Blocchi e Container. CONTAINER : layout della pagine BLOCK : content o page type layout handless : corrisponde a un controller name o page layout : product type, usato per specifiche pagine e identificato con un parametro. Esempio catalog_product_view_type_simple_id_45. o Arbitrary handless : cutom, non corrisponde ad uno specifico controller Come Customizzare Magento 2 theme. Ci sono 2 modi per modificare un layout: o Cambiare la configurazione del file xml, Magento Ui components o Modificare i file.phtml, TEMPLATES Per la modifica dei file .phtml, bisogna accedere al corrispondente in Vendor Ad esempio, supponiamo di voler modificare registration.phtml Allora bisogna andare in: o Vendor|Magento|module_custom|view|frontend|Templates|form| regitration.phtml Copiare il file in: o Magento_Customer|templates|form|register.phmtl 22

Le istruzioni per i blocchi •

• • • • • • • • •

<block> <container> : gruppo di elementi, bocchi o altro before and after attributes : dove posizionare i blocchi <action> <referenceBlock> and <referenceContainer>: Permette di creare riferimenti ai blocchi <move>: muovere un blocco <remove> : rimuovere un blocco <update>: aggiornare un blocco <argument>: trasferisce argomenti al template. <arguments>

Maggiori informazioni http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html

Modifiche delle colonne delle pagine

<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_ configuration.xsd"> <referenceContainer name="sidebar.main"> <block class="Magento\Cms\Block\Block" name="nome-blocco" after="-"> <arguments> <argument name="block_id" xsi:type="string">nome blocco</argument> </arguments> </block> </referenceContainer> </page>

Con queste istruzioni si posiziona un blocco (creato nel back end), denominato

“nome-blocco”, in un container “sidebar.main”, in una pagina con 2 colonne =” page layout="2columns-right”.. Se questa istruzione è scritta nella pagina (esempio) catalog_product_view.xml, il blocco interesserà questa pagina nella posizione “sidebar.main”. Notare che si tratta di un page layout, convenzionalmente questi file possono stare : •

•

page layouts: <module_dir>/view/frontend/page_layout Theme page layouts: <theme_dir>/<Namespace>_<Module>/page_layo ut

Creare un blocco strutturale: creare un file local.xml, nella cartella layout del tema Inserire un blocco statico <?xml version="1.0" encoding="UTF-8"?> <layout> <default> <reference name="root"> <block type="core/text_list" name="newreference" as="newreference" translate="label"> <label>New Reference</label> </block> </reference> </default> </layout>

Inserire un blocco in una pagina {{block type="cms/block" block_id="cms-block-id" template="cms/content.phtml"}}

Identificare la posizione dei blocchi Per consentire un migliore sviluppo puo’ essere utile identificare la posizione dei blocchi nel front end. Stores | Configuration | Advanced | Developer

Modificare il numero di colonne di una pagina Ipotizziamo di volere customizzare il layout modificando il numero delle colonne di una pagina: una /due /tre colonne destra o sinistra. Ad esempio modificare le colonne della pagina prodotto, allora questi i passi : 1. All’interno del tema creare folder all’interno del tema : o Magento_catalog /layout 2. Creare il file: catalog_product_view.xml 3. All’interno del file ad esempio copiare il codice: <page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/ page_configuration.xsd">

…….codice dei blocchi </page>

Cosi’ facendo indicando page layout="2columns-right", vengono definite le colonne della pagina: catalog_product_view.xml . Creare un banner statico : Blocchi /Widget Vogliamo inserire in una colonna un’immagine. Questi i passi • Creare un blocco Dal pannello amministrativo Content| Block add new blok Nella sezione content vogliamo annunciare il prossimo black friday inserendo l’immagine

• Creare un widget Content | Widegt add new widget o Type: CMS static block o Layuot update display on : qui si può scegliere in che pagine mostrare in widget, ad esempio : ! All pages ! Simple products ! Specified pages ! Widget option/select block ! Identificare il blocco da usare Fatto queste modifiche, pulire la cache : php bin/magento cache: clean. Reload del sito, l’immagine Black Friday comparirà dove è stato scelto nella voce layout up date. 26

Creare un modulo Per creare un modulo occorre creare i seguenti folder:

app -code -tema -modulo -block -modulo.php -etc -module.xml -view -frontend -layout -cms_index_index.xml -tempaltes -modulo.phtml -registration.php Dove. registration.php <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'tema_modulo', __DIR__ );

module.xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Frame work/Module/etc/module.xsd"> <module name="tema_modulo" setup_version="0.0.0"> </module> </config> Per attivare questo modulo, a terminale : php bin/magento setup:upgrade modulo.php <?php namespace tema\modulo\Block; /** * modulo block */ class Modulo extends \Magento\Framework\View\Element\Template { public function getTitle() { return "Saldi formidabili"; } } Come si vede obiettivo di questo codice è: • Creare una classe module con extends le stesse proprietà del modulo • Creare una public function getTitle che restiuirà : "Saldi formidabili"; 28

Se questa informazione è mostrata ad esempio nell’home page allora, dobbiamo creare un folder : <magento_root>/app/code/tema/modulo/view/frontend/layout/cms_index_index.xml

Dove in cms_index_index.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Fra mework/View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="main"> <block class="tema\modulo\Block\modulo" template="modulo.phtml"/> </referenceContainer> </body> </page> Ultimo passo è quello della creazione del file: <magento_root>/app/code/tema/modulo/view/frontend/templates/modulo.phtml

modulo.phtml <?php /** * Promo view template * * @var $block tema\modulo\Block\modulo */ ?> <h1 >php echo $block->getTitle(); ?></h1>

Modificare una pagina Esempio vogliamo modificare il mini check out di una pagina che Ă¨ posizionata in: Vendor/Magento/module_checkout/view/frontend/web/template/minic art/content.html. Per fare questa modifica si crea un folder: app/design/frontend/<folder_tema>/<tema>/Magento_Checkout/web/t emplate/minicart/content.html Poi con la tecnica dei blocchi, layout etc. modificare la pagina.!!

Sito Multilingua • File lingua Per prima cosa occorre assicurarsi di avere nella cartella i18n i file .csv delle diverse lingue che si vuole utilizzare. Esempio de_DE.csv,en_US.csv, it_IT.csv. Questi sono disponibili in Market place di Magento. https://marketplace.magento.com, oppure : https://www.mageplaza.com/magento-2-italian-language-pack.html Per attivarlo occorrerà andare in : Stores > Configuration > General > Locale Options • Store views Creare una nuova Stores view, andando a Stores | Settings |All Stores. Una volta in questa posizione cliccare il bottone Create Store View. Compilando il form come segue .

In alternativa si può anche creare un nuovo store, cliccando il pulsante con lo stesso nome: Sulla gerarchia di Magento vedi anche : https://www.liviobollini.it/EcommerceMagentoConfigurazione

• Set Locale Option dello Store View Stores| Settings |configuration , in alto dove è indicato lo store view, cliccare sul menu a tendina e scegliere lo store view appena creato (la lingua in un sito multilingua). Per ogni vista (store view creata) occorre procedere: • Store | Configuration| general | la nazione di default • Store | Configuration| general | locale, dove settare la lingua dello store view e le altre scelte. • Store | Configuration| currency setup : la valuta di default e qualle consentite. CMD , posizionarsi sulla valuta, tasto sinistro del mouse . • Scheduled Import Setting, abilitare il modulo ceccando : Enabled. • Store | Currency Rates| : Introducendo il cambio dove richiesto nella finestra. • Save Currency Rates

Ovviamente se lo store view è Germania i due punti di sopra sono setttati a Gemania. Se lo store view è Italia, allora il settaggio è Italia, Inglese settaggio Inglese etc..

Al termine a terminale, nella directory del tema â&#x20AC;˘ Php bin/magento cache : clean â&#x20AC;˘ Php bin/magento indexer: reindex A questo punto nella barra del menu in alto, sotto la rotellina apparirĂ la scelta delle diverse lingue.

• Usare le bandierine Per lo switch delle varie lingue, Magento non prevede di default delle bandierine, esistono delle estensioni che lo consentono . Un’altra soluzione è il codice . Ecco i passi 1) Creare in design/frontend/<cartella tema>/<nome tema>/web/css, il file languages.phtml (se già non essite). Aggiungere il codice : <?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile ?> <?php /** * Language switcher template */ if (count($this->getStores())) { ?> <div class="langs-wrapper"> <?php foreach ($this->getStores() as $_lang) { ?> <a class="lang-flag" href="#" data-post='<?php echo $block>getTargetStorePostData($_lang); ?>'><img src="<?php echo $this>getViewFileUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt="<?php echo $_lang->getName(); ?>" /></a> <?php } ?> </div> <?php } ?>

1) Aggiungere al file default_head_blck.xml il codice <css src="css/languageSwitcher.css"/> 2) Nel File languageSwitcher.css Mettere il codice: .langs-wrapper { height: 15px; } .lang-flag { width: 30px; height: 19px; float: left; margin-left: 10px; border: 1px solid transparent; text-align: center !important;; } .lang-flag:hover { border: 2.5px solid #FFF; } .dropdown-menu{ text-align: center !important; } 3)Nella cartella design/frontend/<cartella tema>/<nome tema>/web/immages/flags, Mettere 2 immagini: â&#x20AC;˘ Default.png â&#x20AC;˘ Italiano.png 35

! Traduzione field labels Nel pannello amministrativo scegliere Product, Add new Attribrute si arriva a :

Come si vede in questa schermata indica dove inserire le traduzioni. â&#x20AC;˘ Tradurre le categorie Catalog | Categories, poi nella parte alta a sinistra va scelta dal menu a tendina la store view selezionata per la traduzione. Qui procedere alla traduzione â&#x20AC;˘ Tradurre le pagine Content | Page si seleziona la pagina, poi allâ&#x20AC;&#x2122;interno della Pagina, Page in Web site selezionare la vista e tradurre.

Possibile Bug Attenzione potrebbe succedere che tornando 2 volte sulla lingua si ottenga un errore. Questo Ă¨ un baco di Magento2 . Io ho risolto andando al file :

/vendor/magento/module-store/block/switcher.php Cambiando : return $this->_postDataHelper->getPostData( $store->getCurrentUrl(false), $data ); con : $currentUrl = strtok($store->getCurrentUrl(false), '?'); return $this->_postDataHelper->getPostData( $currentUrl, $data ); https://github.com/magento/magento2/issues/11211

Installare uno slider nel tema Magento 2 Una possibile soluzione è quella di installare l’estensione Slider per Magento 2: https://landofcoder.com/magento-2-imageslider.html Questa estensione è gratis, ma per ottenerla occorre effettuare l’iscrizione. Scaricata l’estensione, le solite istruzioni all’interno della cartella di Magento2 tema: Code. Attenzione andrà caricata tutta la tabella Ves, che contiene: o All o ImageSlider o Setup L’estensione deve essere registrata in Magento 2: o php bin/magento setup:upgrade o php bin/magento setup:static-content:deploy o php bin/magento cache:clean La tecnica che viene poi usata è quella dei Widget Dal back end: Content|Widget , Add Widget Il settaggio del widget , consente • Di indicare di che tipo di widget si tratta. Nel campo type : Ves Image Slider • tema: indicare quello in uso.

Successivamente il cuore del settaggio dei widget: • Dove compare: All pages • In che posizione: page Top (esempio)

Il capitolo Widget Options, servirà a: • OWL Carousel Settings: Configurare lo slider ad esempio definire il tipo di animazione, il pulsante next etc..: • Slide Manage: Inserire le immagini dello slider :

Salvato il widget, a terminale: php bin/magento cache/clean. Refresh della pagina di front end: si può vedere il nuovo slider. 39

Dove trovare risorse Temi di Magento Io ho testato questo: http://www.venustheme.com/theme/category/magento-2-themes-2/ Magento Comunity https://community.magento.com Training https://u.magento.com/magento-2 Blog / Siti https://magento.com/blog/tag/magento-2 https://magento.stackexchange.com http://inchoo.net/category/magento-2/ https://alanstorm.com