Soluzioni per Magento2 Livio Bollini by liviob

https://www.liviobollini.it

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

Contenuto del manuale Magento 2 è un solido E-commerce con molte funzionalità. E’ la soluzione deRinitiva 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. https://www.liviobollini.it

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

Costruire un tema Magento 2

AUTORE ........................................................................................................................................................................ 2 CONTENUTO DEL MANUALE .................................................................................................................................. 2 SCARICARE UN TEMA DI MAGENTO 2 E USARLO ............................................................................................ 8 SCELTA DEL TEMA ........................................................................................................................................................................... 8 INSTALLAZIONE................................................................................................................................................................................. 9 ALTRE OPERAZIONI ....................................................................................................................................................................... 12 REQUISITI DI MAMP ......................................................................................................................................................................13 ERRORI NELL’INSTALLAZIONE .....................................................................................................................................................13 o Versioni non adatte di PHP ............................................................................................................................13 o Non funzionano i comandi a terminale ............................................................................................................13 o A seguito di aggiornamenti compare : Exception printing is disabled ................................................ 14 MIGRAZIONE DA MAGENTO1 A MAGENTO2 ...................................................................................................15 SCARICARE UNA INSTALLAZIONE DI MAGENTO 2 .................................................................................................................... 15 SCARICARE DATA MIGRATION TOOLS ..........................................................................................................................................15 CONFIGURARE LA MIGRAZIONE ..................................................................................................................................................17 MIGRARE CON DATA MIGRATION .................................................................................................................................................18 ERRORI TROVATI ............................................................................................................................................................................ 19

https://www.liviobollini.it

INSTALLARE MAGENTO 2 SERVER REMOTO .................................................................................................. 20 ENV.PHP ..........................................................................................................................................................................................20 FILE.SQL ..........................................................................................................................................................................................20 CREARE UTENTE AMMINISTRATORE VIA CLI ................................................................................................ 22 MIGLIORARE LE PERFORMANCE DEL SITO .................................................................................................... 22 • OTTIMIZZARE IL DB ...............................................................................................................................23 • ENABLE FLAT CATEGORIES AND PRODUCTS ........................................................................................23 • MERGE/MINIFY CSS AND JS FILES ......................................................................................................23 • CACHING ............................................................................................................................................ 23 • REDUCE SERVER RESPONSE TIME......................................................................................................... 24 CAMBIARE IL LOGO ................................................................................................................................................24 CODICE ........................................................................................................................................................................................... 24 BACKEND ........................................................................................................................................................................................25 USO DEI COOKIES ....................................................................................................................................................25 PERSONALIZZARE TEMA .....................................................................................................................................26 PARTI COMUNI ............................................................................................................................................................................... 27 Default_head_blocks.xml : inserire Dile js, css ............................................................................................................... 27 Default.xml ..................................................................................................................................................................................28 Cambiare le foto .......................................................................................................................................................................29 Top menu’ : links .......................................................................................................................................................................29 LESS METODI DI STILE .................................................................................................................................................................30 Breve introduzione a Less ..................................................................................................................................................... 30 Compilazione Less in Magento2 ......................................................................................................................................... 31 Per compilare Less in Magento occorre: .........................................................................................................................31 File di stile del tema Magento 2 ......................................................................................................................................... 31 FOOTER ........................................................................................................................................................................................32 HOME PAGE ................................................................................................................................................................................... 32 SLIDER HOME PAGE ......................................................................................................................................................................32 PAGINA CONTACTUS .....................................................................................................................................................................36 CAMBIARE UN LAYOUT .........................................................................................................................................36 PER CUSTOMIZZARE UN LAYOUT POSSONO ESSERE MODIFICATI I FILE .XML. QUESTA TECNICA SERVE PER MODIFICARE LA POSIZIONE DEI BLOCCHI AD ESEMPIO IN UNA PAGINA . ..................................................................................................... 36 ISTRUZIONI PER IL LAYOUT ..........................................................................................................................................................37 PAGE LAYOUTS ............................................................................................................................................................................... 38 COMUNI CAUSTOMIZZAZIONI DI LAYOUT ...................................................................................................................................39 Cambiare le colonne ............................................................................................................................................................... 39 Creare un container .................................................................................................................................................................39 Creare un Blocco .......................................................................................................................................................................39 Template dei blocchi ................................................................................................................................................................ 40 CAMBIARE UN LAYOUT ..................................................................................................................................................................40 BLOCCHI DA BACK END .................................................................................................................................................................42 INSERIRE UN MODALE : BLOCCO & WIDGET .................................................................................................. 43 TEMPLATE .................................................................................................................................................................46 INDIVIDUARE IL TEMPLATE .........................................................................................................................................................46 MAGESPECIALIST: ESTENSIONE DI CHROME ...........................................................................................................................47 INSERIRE IL TEMPLATE NEL LAYOUT ..........................................................................................................................................48 ESEMPIO DI MODIFICA DI TEMPLATE ........................................................................................................................................ 49 SITO MULTILINGUA ................................................................................................................................................49 • GERARCHIA MAGENTO ............................................................................................................................ 50 • FILE LINGUA ..............................................................................................................................................51 • SETTARE UNA VISTA PER OGNI LINGUA ................................................................................................51 • CONFIGURARE LE VISTE PER LE DIVERSE LINGUE ...............................................................................52 • USARE LE BANDIERINE ...........................................................................................................................53 • TRADURRE LE PAGINE .............................................................................................................................55

https://www.liviobollini.it

▪ TRADURRE I BLOCCHI ..............................................................................................................................55 ▪ TRADURRE FIELD LABELS .......................................................................................................................56 • TRADURRE LE CATEGORIE .......................................................................................................................56 INSERIRE UN PRODOTTO ..................................................................................................................................... 58 PRODOTTO SEMPLICE.................................................................................................................................................................... 58 PRODOTTO CONFIGURABILE ........................................................................................................................................................ 59 Prodotto scaricabile .................................................................................................................................................................62 IMPORTAZIONE PRODOTTI ........................................................................................................................................................... 63 METODI DI SPEDIZIONE ........................................................................................................................................ 64 FLAT RATE ......................................................................................................................................................................................66 FREE SHIPPING............................................................................................................................................................................... 66 TABLE RATES ................................................................................................................................................................................ 67 ConDigurare i parametri della Tabella .............................................................................................................................67 Ottenere il Dile CSV per creare tabella ..............................................................................................................................68 Import dei dati della tabella ................................................................................................................................................ 69 TABLE RATE RISOLUZIONE DEI PROBLEMI ...............................................................................................................................69 upload_tmp_dir doesn’t exist ............................................................................................................................................... 69 Something went wrong importing table rate ..............................................................................................................70 CONFIGURAZIONE TASSE ...................................................................................................................................... 71 AGGIUNGERE NUOVA ALIQUOTA FISCALE ..................................................................................................................................71 IMPOSTARE LE REGOLE FISCALI ..................................................................................................................................................72 CUSTOMER GROUP ........................................................................................................................................................................ 73 CONFIGURAZIONE GENERALE .....................................................................................................................................................74 METODI PAGAMENTO ............................................................................................................................................ 74 METODI DI PAGAMENTO ESISTENTI ............................................................................................................................................ 75 CONFIGURARE PAYPAL COME METODO DI PAGAMENTO ..........................................................................................................75 Credenziali PayPal .................................................................................................................................................................... 75 Basic setting Paypal Magento .............................................................................................................................................76 Advanced setting PayPal .......................................................................................................................................................76 ASSEGNI O VAGLIA ........................................................................................................................................................................ 77 BONIFICO BANCARIO .................................................................................................................................................................... 77 CATALOG PRICE RULE ............................................................................................................................................ 77 CREARE UN COUPON IN MAGENTO ...................................................................................................................79 RULE INFORMATION .....................................................................................................................................................................80 CONDITIONS ................................................................................................................................................................................... 80 ACTIONS ..........................................................................................................................................................................................80 EMAIL TRANSAZIONALI ........................................................................................................................................ 80 HEADER........................................................................................................................................................................................... 82 FOOTER : IL CODICE DA PERSONALIZZARE ................................................................................................................................ 84 SALES :GESTIONE ORDINI IN MAGENTO ......................................................................................................... 84 QUANDO UN CLIENTE COMPLETA IL FLUSSO DELL’ORDINE, LATO FRONT END, INCLUSO IL PAGAMENTO .....................85 CONFIGURAZIONE GENERALE ......................................................................................................................................................86 IN QUESTA SESSIONE PRENDENDO AD ESEMPIO ORDER: ........................................................................................................88 LE ALTRE SESSIONI COME SOPRA ...............................................................................................................................................88 GESTIONE DI UN ORDINE ............................................................................................................................................................ 89 CREARE NUOVO ORDINE ............................................................................................................................................................... 89 FATTURA .........................................................................................................................................................................................90 SPEDIZIONE ................................................................................................................................................................................... 91 GESTIONE SPEDIZIONI CON ESTENSIONI / TOOLS.................................................................................................................... 92 CREDIT MEMO ............................................................................................................................................................................... 93 REFUND OFFLINE. ................................................................................................................................................................... 94 BILLING AGREEMENT ................................................................................................................................................................... 94 INTEGRAZIONE API. ............................................................................................................................................... 95

https://www.liviobollini.it

SEO: SEARCH ENGINEERING OPTIMIZATION .................................................................................................97 CONTENT | PAGE ........................................................................................................................................................................... 97 CONTENT | BLOCKS....................................................................................................................................................................... 98 CONTENT | WIDGETS ..................................................................................................................................................................98 WIDGET OPTIONS .........................................................................................................................................................................99 COSA SERVE PER IL SEO ............................................................................................................................................................ 100 SICUREZZA ..............................................................................................................................................................100 USARE CERTIFICATO SSL ..........................................................................................................................................................101 CONFIGURAZIONE DEL SERVER .................................................................................................................................................101 USER ROLES ................................................................................................................................................................................101 VERIFICARE LE REGOLE PER L’UTENTE ...................................................................................................................................101 AGGIORNARE MAGENTO .................................................................................................................................... 102 PATCHES ...................................................................................................................................................................................... 102 AGGIORNAMENTO VERSIONE MAGENTO ................................................................................................................................ 103 AGGIORNAMENTO VIA TERMINALE .........................................................................................................................................104 AL TERMINE PER VERIFICARE ........................................................................................................................105 COSTRUIRE UN MODULO .................................................................................................................................... 105 INSTALLAZIONE ........................................................................................................................................................................... 105 CREARE UNA TABELLA DATA BASE E INSTALLARE DATI .......................................................................................................108 LEGARE MAGENTO A MAILCHIMP ................................................................................................................... 110 OTTENERE ESTENSIONE MAGENTO CONNECT ..................................................................................................................... 111 INSTALLARE L’ESTENSIONE SU SITO MAGENTO. ...................................................................................................................111 CONFIGURARE MAGEMONKEY .................................................................................................................................................112 RISOLUZIONE DI PROBLEMI....................................................................................................................................................... 113 PULSANTI SOCIAL NETWORK ...........................................................................................................................114 STRUTTURA.................................................................................................................................................................................. 114 MODULE.XML ............................................................................................................................................................................... 115 REGISTRATION.PHP .....................................................................................................................................................................116 CATALOG_PRODUCT_VIEW.XML .................................................................................................................................................117 ADDTOCART.PHTML .................................................................................................................................................................... 118 BOTTONE FACEBOOK .................................................................................................................................................................118 OTTIENI IL CODICE .....................................................................................................................................................................119 COPIARE IL CODICE IN ADDTOCART.PHTML ...........................................................................................................................120 COMANDI A TERMINALE ........................................................................................................................................................... 121 DMEMORY_LIMIT=5G .................................................................................................................................................................121

https://www.liviobollini.it

Scaricare un Tema di Magento 2 e usarlo Scelta del tema Per creare un tema di Magento 2 ho sperimentato il tema: http://www.venustheme.com/theme/

La soluzione migliore per installare questo tema Ă¨ quella di usare il folder Quickstart view insieme al Rile sql contenuto. La cartella Quickstart view viene rinominata e messa in htdocs di MAMP. Il File sql database_magento210.sql va invece caricato nel data base di MAMP con il pulsante Importa.

https://www.liviobollini.it

Fatto questo comincia il processo di installazione Installazione â&#x20AC;˘ Localhost:8888/Magento, per iniziare il setup

â&#x20AC;˘ lanciato il Setup Magento , si procede alla veriRica dei requisiti:

https://www.liviobollini.it

• 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 ConYiguration: per deRinire sia il link che anche l’accesso al pannello amministrativo.

https://www.liviobollini.it

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

• Success: terminata l’installazione

https://www.liviobollini.it

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

https://www.liviobollini.it

Requisi< 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/conRigurare-cron-di-magento-2-su-mamp/ https://www.human-element.com/installing-magento2-on-mac-forlocal-development/ 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 ada@e 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 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 Rile . bash, richiamato con il comando https://www.liviobollini.it

sudo nano .bash_pro7ile

In questo Rile 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 aggiornamen< compare : Excep<on prin<ng 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…). 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!!!

https://www.liviobollini.it

Migrazione da Magento1 a Magento2

Per migrare da Magento 1 a Magento 2 utilizzo le istruzioni disponibili a https://devdocs.magento.com/guides/v2.0/migration/ migration-tool-install.html Esistono anche estensioni a pagamento https://www.ubertheme.com/magento-extensions-2-x/ magento-2-data-migration-pro/ facili da usare Scaricare una installazione di Magento 2 â&#x20AC;˘ Effettuare il download di Magento2 senza sample data , lo chiameremo foodM2 â&#x20AC;˘ Installare foodM2, con un database chiamato foodM2

â&#x20AC;¨

Scaricare data migra<on tools

https://www.liviobollini.it

• VeriRicare le versione di data-migration-tools, disponibile, vistando il sito: https://github.com/ magento/data-migrationtool/releases Occorre cioè veriRicare che datamigration-tool , sia la stessa versione di Magento2 appena scaricato. Nel caso speciRico 2.2.4. • Scaricare data migration tools via composer. Ponendoci nella cartella di Magento2, foodM2, via terminale digitare : composer conRig repositories.magento composer https:// repo.magento.com composer require magento/data-migration-tool:2.2.4 Il terminale risponderà :

La directory data-migration-tools si trova in https://www.liviobollini.it

Vendor/magento/data-migration-tool

Per essere sicuri della versione di magento2 • php bin/magento – version la risposta sarà 2.2.4 Per veriRicare la versione di data-migration-tool, aprire nella directory composer.json : "version": "2.2.4",

Conﬁgurare la migrazione • Andando nella directory Vendor/magento/data-migration-tool/ opensource-toopensource/1.9.2.2, digitare il comando

cp conYig.xml.dist conYig.xml

Istruzione per cambiare il nome del Rile(farne copia rinominata preventivamente) • Attraverso un editor, modiRicare il codice come segue

<source> <database host="localhost" name="morfeoit_itsfood" user="root" password="root"/> </source> <destination> <database host="localhost" name="foodM3" user="root" password="root"/> </destination> <source_preRix>morfeoit_itsfood</source_preRix> <crypt> https://www.liviobollini.it

<key>b2495427a67b6161872ee210f09c7550</ key> </crypt> </options> <bulk_size>100</bulk_size> Nel primo nome DB ho inserito il nome DB Magento 1, nel secondo Magento 2, Magento1 key si trova nel Rile :

app/etc/local.xml

Migrare con data migra<on Per prima cosa occorre posizionarsi sulla directory foodM2 della installazione di Magento2.

Poi il comando bin/magento migrate:settings -r /Applications/MAMP/htdocs/foodM2/ vendor/magento/data-migration-tool/etc/opensource-to-opensource/ 1.9.2.2/config.xml Il terminale risponde con:

https://www.liviobollini.it

Poi il comando

bin/magento migrate:data --auto /Applications/MAMP/htdocs/ foodM2/vendor/magento/data-migration-tool/etc/opensource-toopensource/1.9.2.2/conRig.xml

Errori trova< 1)Per evitare errori dovuti a max_allowed _packet : la soluzione puo’ essere • Nel Rile conRig.xml inserire <bulk_size>100</bulk_size>

•

Nel Rile /Applications/mamp/bin/startMysql.sh. Inserire --max_allowed_packet=32M

https://www.liviobollini.it

Per saperene di piu’ •

https://contolini.com/2009/08/11/Rixing-mysql-max_allowed_packet-error-inmamp/

Installare Magento 2 server remoto Env.php • Per invece collegare Magento2 con il server remoto, occorre modiRicare il Rile 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',

File.sql Scaricare da MAMP il db con la funzione ESPORTARE, avendo cura Nel Rile php.ini che si sta utilizzando di settare ▪ memory_limit = 4000M ▪ max_input_vars = 10000 o Lunghezza massima di una query creata va aumentata Si ottiene cosi’ un Rile .sql, in cui va modiRicato o localhost:8888/magentocosmetici con (esempio) https://www.liviobollini.it

▪ www.ecommercestore.it/magento2/ (esempio) • IMPORTARE nel Db del server remoto il Rile .sql sopra ottenuto Se il Rile è di grosse dimensioni si puo’ caricare il DB via terminale, Andando alla cartella cd /Applications/MAMP/Library/bin Poi istruzione: mysql -uroot –proot A questo punto compare il prompt >mysql

Poi l’istruzione al prompt mysql : • connect your_database_name • source /path/to/your/Rile/sql_export.sql https://tommcfarlin.com/importing-a-large-database/ Ecco la schermata Rino all’ultimo comando (escluso).

https://www.liviobollini.it

Creare Utente Amministratore via CLI Per installazioni “vanilla” di Magento, senza nessuna modiRica di authorization_role table. L’istruzione è :

php bin/magento admin:user:create --admin-user="admin" --adminpassword="123123q" --admin-email="admin@example.com" --adminfirstname="Admin" --admin-lastname="Admin"

Sostituendo naturalmente a Admin etc le informazioni dell’utente che si intende creare.

Migliorare le performance del sito Per migliorare le prestazioni, questi i passi:

https://www.liviobollini.it

• OQmizzare 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 > Con7iguration > Catalog > Catalog > Storefront, scegliere Use Flat Catalog Category

• php bin/magento indexer:reindex • php bin/magento cache: clean • Merge/Minify CSS and JS Files Stores -> ConDiguration > Advanced > Developer > JavaScript Settings o Merge JavaScript Files Yes o Minify JavaScript Files Yes Stores > ConDiguration > Advanced > Developer > CSS Settings Merge CSS Files Yes o Minify CSS Files Yes • Caching System > Cache Management • Enable -> Submit

https://www.liviobollini.it

• Reduce Server Response Time Stores > ConDiguration > Advanced > System > Full Page Cache Caching Application : Varnish Cambiare il logo Codice Il logo in Magento puo’ essere .svg oppure .png L’immagine del logo è nella cartella: Pub| forntend| Media | logo | default Il codice relativo al logo è nel Rile default.xml, nella cartella: Magento_Theme | layout, all’interno del tema. Questo Rile contiene i blocchi che saranno visibili in tutte le pagine, fra cui • Link iniziali • Logo • Footer Per personalizzare il logo, con un’immagine .png, queste le istruzioni da inserire nel Rile default.xml (al posto di quelle esistenti) :

<referenceBlock name="logo"> <arguments> <argument name="logo_Rile" xsi:type="string">Magento_Theme/images/logo.png</argument> <argument name="logo_img_width" xsi:type="number">236</ argument> <argument name="logo_img_height" xsi:type="number">40</ argument> </arguments> </referenceBlock> Ovviamente l’immagine logo.png dovra’ essere inserita nella cartella: Pub| frontend| Media | logo | default https://www.liviobollini.it

Backend Altro modo per cambiarlo è dal backend: Content> Themes > ConYiguration> tema>Header >logo Da notare che nelle stesse impostazioni puo’ essere gestito molto altro:

Uso dei Cookies La legge Europea prevede che l’utente venga informato nel caso di utilizzo dei cookies, come fa Magento. https://www.liviobollini.it

Per questo si deve andare a : Stores> ConYiguration >WEB> Default Cookies | Setting| Cookies restriction mode • Cookies restriction mode: ConRigurare YES. In questo modo nelle pages , apparirà l’informativa sui cookies obbligatoria per le normative Europee.

• php bin/magento cache:clean Personalizzare Tema Il primo passo è quello di inserire Rile js e css nel tema, usando : • default_head_blocks.xml • default.xml Si trovano in

https://www.liviobollini.it

Par< comuni Default_head_blocks.xml : inserire ďŹ le js, css Default_head_blocks.xml: questo Rile contiene la sezione head, con i link, script ai Rile .css oppure .js Per inserire un Yile css le istruzioni sono <css src="css/main.css" /> Per inserire un Yile js <script src="bootstrap/js/bootstrap.min.js" />

I Rile richiamati da default_head_blocks.xml, vanno messi in sottocartelle app/design/frontend/test/tema/web. Ecco il codice (head) <head> <meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1.0, user-scalable=no" />  <script src="jquery.js" /> <script src="bootstrap/js/bootstrap.min.js" /> <script src="owl.carousel/owl.carousel.min.js" />  <css src="bootstrap/css/bootstrap.css" /> <css src="owl.carousel/assets/owl.carousel.css" /> <css src="owl.carousel/assets/animate.min.css" /> https://www.liviobollini.it

<css src="//fonts.googleapis.com/css?family=Work+Sans: 400,300,500,600,700,800" src_type="url" /> <css src="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/ css/font-awesome.min.css" src_type="url" /> <css src="owl.carousel/assets/main.css" /> </head> Sono stati aggiunti i framework: • Bootstrap.css, js • Main. Css usato per introdurre css personalizzati • Carousel.css, js frmawork usato per lo slider . • Animate.css, framework per animazione Default.xml Ha contenuti visibili in tutte le pagine, attrverso le istruzioni dei blocchi: <referenceContainer name="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links</ argument> </arguments> </block> </referenceContainer>

Con queste istruzioni si indicano i link iniziali, che saranno presenti in tutte le pagine . Se per esempio si vuole aggiungere un link personalizzato nel top menu, ecco il codice : <referenceBlock name="header.links"> https://www.liviobollini.it

<block class="Magento\Framework\View\Element\Html\Link\Current" name="whishlist"> <arguments> <argument name="label" xsi:type="string" >Wishlist</argument> <argument name="path" xsi:type="string">wishlist</argument> </arguments> Cambiare le foto Si trovano in : Pub | media| wysiwyg |need| home01 BasterĂ cambiare le foto con lo stesso nome e dimensioni. Top menuâ&#x20AC;&#x2122; : links Per modiRicare il messaggio di benvenuto, aggiungere una favicon, logo, footer: Content| ConYiguration |html , header, footer Per ad esempio aggiungere un link nel top menu, occorrerĂ andare nel Rile default.xml , aggiungere il codice

<referenceBlock name="header.links"> <block class="Magento\Framework\View\Element\Html\Link\Current" name="whishlist"> <arguments> <argument name="label" xsi:type="string">Wishlist</ argument> <argument name="path" xsi:type="string">wishlist</ argument> </arguments> </block> https://www.liviobollini.it

</referenceBlock> <referenceBlock name="header.links"> <block class="Magento\Framework\View\Element\Html\Link\Current" name="Newsletter"> <arguments> <argument name="label" xsi:type="string">Newsletter Subscription</argument> <argument name="path" xsi:type="string">Newsletter</ argument> </arguments> </block> </referenceBlock>

Less metodi di s<le

Per la gestione degli stili Magento utilizza Less Breve introduzione a Less

Less è un pre-processore che estende il linguaggio CSS. Less usa : • Variabili: cioe’ parametri per deRinire il codice CSS. Esempio: @color: white; div {color: @color} • Mixin: Mixin sono un modo per includere ("mescolare") un gruppo di proprietà da una regola impostata in un altro set di regole. Esempio: .color {color: white}; div{.color } • Operator: Operatori aritmetici e logici. Esempio: @fontsize:12px; div {fontsize: @fontsize*2} https://www.liviobollini.it

• Nesting: possibilita’ di organizzare selettori e direttive come hover. Esempio: @color: black; div { color: white; &: hover{ color: @color ;} Compilazione Less in Magento2 Per compilare Less in Magento occorre:

• STORES>ConYiguration>Advanced>Developer • Store view selezionare Default ConYig • Front-end development workYlow selezionare: o Server Side , oppure o Client side File di s<le del tema Magento 2

_Style.less E’ il Rile attraverso il quale viene importata la libreria dei temi preimpostati in Magento : Blank e Luma. @import 'source/lib/_lib.less'; @import 'source/_sources.less'; @import 'source/_components.less'; _theme.less Il Rile _theme.less contiene le modiRiche di stile che si desidera apportare. Sono scritte in formato.less, Magento le trasformerà formato.css. Per esempio cambiare il colore dei link etc.. _module.less Il contenuto di questo Rile, per prima cosa è copiato dall’equivalente nel tema luma. Quest’ultimo Rile si trova in: https://www.liviobollini.it

<magento dir>/vendor/magento/theme-frontend-luma/ Magento_Theme/web/css/source Dopo aver copiato il Rile, si possono fare delle modiRiche ai componenti presenti nel Rile. Ad esempio a logo, product, footer etc… FOOTER Il footer è una parte comune di tutte le richiamato come logo e header nel Rile default.xml, il contenuto del blocco in Content |Blocks

Home Page L’home page è formato da una serie di blocchi, andando da Content | Page | Home Nella sezione design si ottiene il codice che regola la pagina, una serie di blocchi tipo <referenceContainer name="ves-slideshow"> <block class="Magento\Cms\Block\Block" name="need-slideshowbanner"> <arguments> <argument name="block_id" xsi:type="string">need-slideshowbanner</argument> </arguments> La posizione di questi blocchi, all’interno della home page è determanata dal Rile : Magento_theme |page_layout | 1column.xml Slider Home page Lo slide show è contenuto nel blocco “slideshow” https://www.liviobollini.it

Per modiRicare il look occorre andare a Content |blocks Aprirlo Edit e modiRicare il codice. Le immagini sono invece nel codice Pub | media| wysiwyg |need| home01 Ho modiRicato lo slider in modo da poi avere una traduzione facile, con immagini in dissolvenza.

Ecco il codice  <div id="owl-demo2" class="owl-carousel owl-theme hidden-xs "> <div class="item"> <div class="ves-slider"> <div class="item active " style="background-image: url('{{media url='wysiwyg/need/home01/slide-01.jpg'}}');height:660px"; > <div class="container"> <div class="row slide-margin"> <div class="col-md-5 col-md-offset-3 col-sm-6 col-sm-offset-2 " style="margin-top:130px;"> <div class="carousel-content "> <h1 class="animated fadeInUp animate animation animated-item-1"><b>Abbiamo Cura </b> <br><b style="margin-left: 30px;">di TE</b></h1> https://www.liviobollini.it

<a class="btn btn-lg btn-success btn-slide animation animated-item-3 " href="about-us.html" style="backgroundcolor:orange">about</a> </div> </div> <div class="col-sm-6 col-md-4 col-md-offset-8 hidden-xs animation animated-item-4 animated fadeInUp"> <div class="slider-img"> <img src="{{media url="wysiwyg/need/home01/ profumo.png"}}" alt="" style="width: 200px;height:359px;margin-top:-200px"/> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="ves-slider"> <div class="item " style="background-image: url('{{media url='wysiwyg/need/home01/slide-01.jpg'}}');height:660px"; > <div class="container"> <div class="row slide-margin"> <div class="col-md-5 col-md-offset-3 col-sm-6 col-sm-offset-2 " style="margin-top:130px;"> <div class="carousel-content "> <h1 class="animated fadeInUp animate animation animated-item-1"><b>Un corpo </b> <br><b>Perfetto</b></h1> <a class="btn btn-lg btn-success btn-slide animation animated-item-3 " href="about-us.html" style="backgroundcolor:orange">about</a> </div> </div> <div class="col-sm-6 col-md-4 col-md-offset-7 hidden-xs animation animated-item-4 animated fadeInUp"> <div class="slider-img"> <img src="{{media url="wysiwyg/need/home01/ trucco.png"}}" alt="" style="width: 359px;height:359px;margin-top:-200px"/> </div> </div> https://www.liviobollini.it

</div> </div> </div> </div> </div> </div> <div class="owl-controls"> <div class="owl-nav"> <div class="owl-demo-prev"><i class="fa fa-angle-left"> </i></div> <div class="owl-demo-next"><i class="fa fa-angle-right"> </i></ div> </div> </div> <script type="text/javascript"> require(['jquery','owl.carousel/owl.carousel.min'],function(){ jQuery(document).ready(function() { jQuery("#owl-demo2").owlCarousel({ loop:true, margin:10, responsiveClass:true, dots: true, nav: false, responsive:{ 0:{ items:1 }, 480:{ items:1 }, 768:{ items:1 }, 1000:{ items:1 } } }); jQuery(".owl-demo-prev").click(function () { jQuery("#owl-demo2").trigger('prev.owl.carousel'); }); jQuery(".owl-demo-next").click(function () { jQuery("#owl-demo2").trigger('next.owl.carousel'); https://www.liviobollini.it

}); }); }); </script>

Pagina ContactUs

Per creare una pagina di contatti nel menu, basteraâ&#x20AC;&#x2122; creare un block in cui inserire: {{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}

CAMBIARE UN LAYOUT Per customizzare un layout possono essere modiRicati i Rile .xml. Questa tecnica serve per modiRicare la posizione dei blocchi ad esempio in una pagina .

https://www.liviobollini.it

Istruzioni per il layout Le istruzioni coinvolte sono: • <block> Un blocco è una unità della pagine che renderizza un contenuto speciRico. Blocchi vengono usati per visualizzare codice Html • <container> : Un container renderizza elementi Rigli. Puo’ essere vuoto o contenere blocchi. <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main"> <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/></container> Gli attributi di container sono: name, label, before, after, as, output, html Tag, htmlId, htmlClass. • before and after attributes : dove posizionare i blocchi • <referenceBlock> and <referenceContainer>: Contiene remove e dispaly. Esempi: <referenceBlock name="block.name" remove="true" /> <referenceContainer name="container.name" display="false" /> Remove viene usato per rimuovere un blocco • <move>: muovere un blocco <move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/> • <remove> : rimuovere una risorsa linkata in head. <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/ css/bootstrap-theme.min.css"/>

https://www.liviobollini.it

Per rimuovere i blocchi usare sempre l’istruzione reference blck (sopra) <update>: aggiornare un layout di un Rile <update handle="{name_of_handle_to_include}"/> • <argument>: trasferisce argomenti al template. Usato come segue <arguments> <argument> <item></item> <item></item> ... </argument> <argument></argument> </arguments> Gli attributi di argument sono: name, xsi:type, translate Esempio: setting a css_class in default.xml. <arguments> <argument name="css_class" xsi:type="string">header links</ argument> </arguments> Page layouts DeRinisce ad esempio quante colonna ha la pagina. Le istruzioni usate sono Container, Reference container, Move, update L’ubicazione delle page layout è: • Moduli. <module_dir>/view/frontend/page_layout • Tema. <layouts: <theme_dir>/<Namespace>_<Module>/ page_layout

https://www.liviobollini.it

Comuni Caustomizzazioni di layout Cambiare le colonne Esempio cambiare il numero di colonne della pegina di ricerca app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/ catalogsearch_advanced_index.xml.

...

</page>

Creare un container Per dichiarare un container <container name=â&#x20AC;?..container" as="..Container" label=".. Container" htmlTag="div" htmlClass="some-container" /> Creare un Blocco Creare un blocco con informazioni su SKU <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type"> <arguments> <argument name="at_call" xsi:type="string">getSku</argument> <argument name="at_code" xsi:type="string">sku</argument> <argument name="css_class" xsi:type="string">sku</argument> https://www.liviobollini.it

</arguments> </block>

Template dei blocchi Usando template attributi <referenceBlock name="page.main.title" template="%Namespace_Module::new_template.phtml%"/> Cambiare un layout Per cambiare il layout dovremo creare nel tema una cartella con il nome del modulo e dentro questâ&#x20AC;&#x2122; ultima il Rile che si vuole modiRicare. Ad esempio se si vuole modiRicare il layout di un prodotto, occorrera creare : Magento_Catalog/layout/catalog_product_view.xml Questo ad esempio: <? xml version =" 1.0"? > < page layout =" 1column" xmlns:xsi =" http:// www.w3. org/ 2001/ XMLSchema-instance" xsi:noNamespaceSchemaLocation =" urn:magento:framework:View/ Layout/ etc/ page_conRiguration.xsd" > < body > < move element =" product.info.stock.sku" destination =" product.info.price" after =" product.price.Rinal"/ > < move element =" product.info.review" destination =" product.info.main" before =" product.info.price"/ > < remove name =" report.bugs"/ > </ body > </ page > https://www.liviobollini.it

Poi i seguenti command line php bin/magento cache:clean php bin/magento setup:static-content:deploy Assicurarsi di aver pulito i Rile nella cartella: pub/ static/ frontend/ < Theme Vendor > var/ view_preprocessed/ css/ frontend/ < Theme Vendor > ModiYicare un template Per sovrascrivere un layout ad esempio. Per esempio se vogliamo modiRicare la barra sinistra dal modulo catalogo. Il Rile originale si trova in vendor/magento/module-catalog/view/frontend/templates/ navigation/left.phtml Che dovremo copiare nella cartella < theme >/ Magento_Catalog/ templates/ navigation/ left.phtml. Per poi modiRicarlo. Unâ&#x20AC;&#x2122; altra opzione Ă¨ quella di modiRicare il layout assegnato, speciRicando il template che si vuole usare < referenceBlock name ="[ blockname]" > < arguments > < argument name =" template" xsi:type =" string" >[ Module name]:: [ path to template] </ argument > </ arguments > </ referenceBlock > https://www.liviobollini.it

Blocchi da back end L’home page è costruita come una serie di blocchi, richiamati dal codice della sezione

Content | Pages | Home | Design L’istruzione tipica per richiamare un blocco è : <referenceContainer name="ves-showcase"> <block class="Magento\Cms\Block\Block" name="needshowcase-category"> <arguments> <argument name="block_id" xsi:type="string">needshowcase-category</argument> </arguments> </block> </referenceContainer> Dove il Container name indica la posizione, need-showcase-category, indica il nome del blocco che si trova in Content | Blocks | need-showcase-category Aprendo con il comando edit, il blocco si trova il codice html, che puo’ essere modiRicato, magari usando bootstrap, inserito come da pagina Default_head_blocks.xml. Se si vogliono modiRicare immagini in home page Pub| media | wysiwyg| home01

https://www.liviobollini.it

Inserire un modale : Blocco & Widget Una delle soluzioni per inserire un Modale Ă¨ quello di usare Blocchi Statici e Widget. Per questo Content | Blocks - Add New Block. Creare un nuovo blocci con nome e IdentiRicativo : Modale. Nella parte content, si puoâ&#x20AC;&#x2122; ad esempio inserire il codice che segue :  <style xml="space"> .h{ font-family: 'Lobster', cursive; } .modal-content{ background-color: white !important; margin-top:15% !important; border: 15px solid lightgrey; } #paragrafo{ font-size:16px; color: black; } https://www.liviobollini.it

--></style> <div class="modal fade" tabindex="-1" role="dialog" id="mioModale"> <div class="modal-dialog" role="document"> <div class="modal-content">  <div class="modal-body"> <div class="row"> <div class="col-md-2 col-md-offset-2 hidden-xs"> <img src="{{media url="wysiwyg/modale.png"}}" alt="" /> </div> <div class="col-md-8"> <h2 class="text-center h">Cosa trovi nel Sito</h2> </div> </div> <br> <div class="row"> <div class="col-md-6" style="text-center"> <br><br> <p id="paragrafo"><b>Abbi cura di TE.</b><br> Troverai prodotti dedicati a TE, per essere sempre bella.<br> <b>Profumi, Cosmetici, Prodotti per il corpo, , Accessori </b><br> Avere cura di TE, aiuta al successo. <br> Uomo o Donna è la stessa regola <br> Abbi cura di quello che sei, di ciò che senti ciò che vuoi e non dimenticarlo. </p> </div> <div class="col-md-6" style="text-center"> <img src="{{media url="wysiwyg/need/home01/trucco.png"}}" alt="" style="width: 300px; height:300px;"/> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" datadismiss="modal">Chiudi</button>  </div> </div> </div> https://www.liviobollini.it

</div> <script type="text/javascript">

$(window).on("ready",function(){ $('#mioModale').modal('show'); }); </script>

Da notare che questo codice utilizza: • Jquery e Boostrap; inseriti nel Rile default_head_blocks • L’istruzione jquery on load che consente un caricamento automatico dello script. Creato il block, va inserito nella sezione Content della Home page Content | Pages - Select | Edit – Insert Widget Scegliere poi Cms Static Block e il nome del blocco

https://www.liviobollini.it

Per Rinire:

Insert Widget

Template Un template deRinisce esattamente come il contenuto layout blocchi è presentato in una pagina: Css, elementi. Quando un template è chiamato in un blocco, viene visualizzato. Il suggerimento è di non effettuare mai le modiRiche sui template di defult, che normalmente sono con l’estensione phtml, ma anche html.

Individuare il template Per effettuare la customizzazione dei template, occorre innanzi tutto: https://www.liviobollini.it

-php bin/magento deploy:mode:set developer

- Nel back end: Store| ConYiguration Developer| Debug Settare la voce: Enable Path Hints… a YES Con quest’ultima operazione si è in grado di trovare a quale template è collegata la parte che si vuole modiRicare. Individuato il template andrà copiato nel tema, usando le convezioni di Magento. Ad esemio: <Magento_Checkout_module_dir>/view/frontend/templates/ cart.phtml

Qui potrà essere modiRicato.

Magespecialist: Estensione di Chrome Per individuare template, blocchi, altre info, puo’ essere utile la estensione di Chrome denominata MageSpecialist. I passi da fare per usarla sono Nel browser chrome, attivare la estensione

Poi nella directory di Magento, digitare i comandi line : composer require msp/devtools php bin/magento setup:upgrade Nel backend di Magento https://www.liviobollini.it

Store | ConYiguration | MageSpecialist, settare a

Fatto questo usando Tasto destro Ispeziona, apparirĂ la funzione Magento. Cliccando sopra, si otterranno le informazioni come da Rigura.

Inserire il template nel layout Ogni blocco ha un template. Per esempio il layout <Magento_Catalog_module_dir>/view/frontend/layout/ catalog_category_view.xml: ha un blocco che richiama

https://www.liviobollini.it

<block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/ image.phtml"/> Dove il template image.phtml è nella directory: <Magento_Catalog_module_dir>/view/frontend/templates. Copiato il Rile nel proprio tema, potra’ essere modiRicato. Esempio di modiﬁca di template Si vuole modiRicare la mini carta 1) step attraverso hints individuare quale è il template 2) si trova in: /vendor/magento/module-checkout/view/ frontend/web/template/minicart/content.html 3) Copiare il Rile nel tema Magento_Checkout/web/template/minicart/content.phtml ModiRicare content.phtml, secondo le necessità.

Sito Mul<lingua https://www.liviobollini.it

• Gerarchia Magento

Il tema scaricato e in genere tutti è già predisposto per la gestione di un sito Multilingua, nel menu. Per crearlo pero’ useremo la gerarchia di Magento2 e cioè la creazione di Vista del E-commerce : ITALIANO e INGLESE.

https://www.liviobollini.it

Con questa tecnica la realizzazione di siti Multilingua è piu’ semplice di ad esempio di WooCommerce. Mentre WooCommerce richiede il plugin WPML (a pagamento) Magento2 non richiede nessuna estensione. La gestione è nativa. • File lingua Per prima cosa occorre assicurarsi di avere nella cartella i18n i Rile .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-languagepack.html Per attivarlo occorrerà andare in : Stores > Con7iguration > General > Locale Options • Se@are una vista per ogni lingua 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:

https://www.liviobollini.it

• Conﬁgurare le viste per le diverse lingue Stores| Settings |conYiguration , 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 | ConYiguration| general | la nazione di default • Store | ConYiguration| general | locale, dove settare la lingua dello store view e le altre scelte. • Store | ConYiguration| currency setup : la valuta di default e qualle consentite. CMD , posizionarsi sulla valuta, tasto sinistro del mouse . • Store | General |(default view) |Scheduled Import Setting abilitare il modulo ceccando : Enabled. Questa opzione va abilitata nella vista default conRiguration. • Store | Currency Rates| : Introducendo il cambio dove richiesto nella Rinestra, Save Currency Rates. • Store| ConYiguration| Catalog | Price| Settare: Catalog Price Scope a GLOBAL Al termine a terminale, nella directory del tema • Php bin/magento cache : clean • Php bin/magento indexer: reindex A questo punto nella barra del menu in alto, apparirà la scelta delle diverse lingue.

https://www.liviobollini.it

• 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 Rile 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) { ?> https://www.liviobollini.it

<a class="lang-Rlag" href="#" data-post='<?php echo $block>getTargetStorePostData($_lang); ?>'><img src="<?php echo $this->getViewFileUrl('images/Rlags/' . $_lang->getCode() . '.png');?>" alt="<?php echo $_lang->getName(); ?>" /></a> <?php } ?> </div> <?php } ?>

1) Aggiungere al Rile default_head_blck.xml il codice <css src="css/languageSwitcher.css"/> 2) Nel File languageSwitcher.css Mettere il codice:

.langs-wrapper { height: 15px; } .lang-Rlag { width: 30px; height: 19px; Rloat: left; margin-left: 10px; border: 1px solid transparent; text-align: center !important;; } .lang-Rlag:hover { https://www.liviobollini.it

border: 2.5px solid #FFF; } .dropdown-menu{ text-align: center !important; }

3)Nella cartella design/frontend/<cartella tema>/<nome tema>/web/immages/ Ylags, Mettere 2 immagini: • Default.png • Italiano.png • Tradurre le pagine Se si vuole tradurre una pagina, occorre crearne copia Content | Page : • Duplicare la pagina, con titolo e identiRier diversi da quello originale. Il titolo va sempre cambiato, opzionale identiRier. • Nelle pagine, in alto a sinistra, selezionare la vista in cui si vuole che la pagina sia visibile. • Tradurre la pagina duplicata. Nel ns caso andra’ cambiato eventualmente il riferimento ai blocchi.(identiRier) • Store | ConYiguration | Default Pages, nella vista selezionata (in alto a sinistra), selezionare la pagina di default che verrà visionato all’apertura del sito ▪ Tradurre i blocchi Lo stesso processo della traduzione pagine: https://www.liviobollini.it

• Duplicare il blocco con titolo diverso, IdentiRier uguale a quello dell’originale. • Selezionare la vista • Tradurre il blocco • Se il blocco non è visibile, cambiare anche identiRier e riferimento a blocchi

▪ Tradurre ﬁeld labels Nel pannello amministrativo scegliere Product, Add new Attribrute si arriva a :

Come si vede in questa schermata indica dove inserire le traduzioni. • Tradurre le categorie Catalog | Categories, Il procedimento è sempre lo stesso. Nella parte alta a sinistra va scelta dal menu a tendina la store view da usare per la traduzione. Qui procedere alla traduzione 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 Rile :

https://www.liviobollini.it

/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

https://www.liviobollini.it

Inserire un prodo@o Prodo@o semplice

Dal bottone Add Products, scegliere dal menu a tendina: SIMPLE PRODUCTS Possono fare parte di questa famiglia ad esempio: • ReRlex di varie marche, collegate alla categoria reRlex • Obiettivi di varie dimensioni, categoria obiettivi • Accessori (zaino, cavalletto, etc) categoria accessori Per ogni prodotto andra’ compilato il form con le informazioni richieste. Informazioni Generali

• Nome • SKU : uguale al nome per default • Prezzo, incluso eventuale promozione(advanced price) • Classe tasse (iva 22%) • Quantita’ e Stock Content

• Descrizione completa • Descrizione breve

Immagine

• Immagini del prodotto S.E.O

• url

https://www.liviobollini.it

• title • key word • description UP and Cross Selling

• Related product: Prodotti collegati • UP selling un prodotto simile ma di qualita’ maggiore • Cross selling : un prodotto aggiunto (a una reRlex ad esempio un cavalletto) Design

• Opzioni di layout

Prodo@o conﬁgurabile

Un prodotto conRigurabile è simile ad un prodotto singolo, con una lista dropdown di opzioni per ogni variante. In sostanza, un prodotto conRigurabile, è un sistema che consente di raggruppare più oggetti uguali, ma con caratteristiche differenti.

https://www.liviobollini.it

Esempio di un prodotto conRigurabile, puo’ essere un capo di abbigliamento con diverse taglie, una maglietta con colori diversi e taglie diverse. Oltre alle conRigurazioni del prodotto semplice, il prodotto conRigurabile ha un campo in piu’: Create ConYigurations. Al click si apre la seguente maschera:

La creazione di un prodo5o conﬁgurabile, richiede la esecuzione di 4 step. Step 1 :a@ribute

Qui andranno speciRicati gli attributi del prodotto conRigurabile, scegliento Add Attribute

Create new a@ribute

Un attributo sostanzialmente è quell’elemento che deRinisce le caratteristiche di un prodotto. ADD ATTRIBUTE>Create New Attribute

I campi base da compilare sono: • Default label: identiRicativo, creato attraverso STORES>ATTRIBUTE SET > Add Attribute Set Da creare per ogni attributo https://www.liviobollini.it

• Catalog Input type for store Owner: Come scegliere l’attributo. Ad esempio, se colore dropdown. • Store front properties Manage Options(Value of your attributes) • DeRinisce le varie opzioni dell’attributo. Ad esempio se l’attributo è “taglia”, Options rappresenta valori delle taglie.(40,42, etc..). Ogni valore dell’opzione, rappresenta le diverse scelte del prodotto

Advanced • Attribute Code: codice attributo, senza spazi e non oltre 30 caratteri • Scope: store view • Unique Value: No • Input validation: letters e/o numbers • Add to Column: yes • Use in filter options: yes Titoli • Titoli della label Store Front Properties • Use in search : No • Comparable in store Front : No • Use in layered navigation : No • Use in search result: No • Used in Prome Rule: No • Allow html tags: yes • Visible on catalog Pages: no https://www.liviobollini.it

• Used in Product Listing: No • Used for Sorting in Product Listing: No

Per default Magento crea due attributi di default: • Colore • Produttore Step 2 : scegliere i valori delle opzioni

• Cioe’ per esempio per le taglie, i valori disponibili

Step 3: Immagini e quan<ta’

• Qui scegliere se unica immagine, prezzo per ogni valore delle opzioni.

Step 4: Sommario

Scegliendo piu’ attributi, possono essere fatte combinazioni

Prodo@o scaricabile

Per crearlo va scelto ADD PRODUCT>DOWNLODABLE In aggiunta ai campi di SIMPLE PRODUCT, esiste il campo

Link Mettere il titolo e se il link puo’ essere acquistato separatamente:

https://www.liviobollini.it

Cliccare Add New Link e compilare i campi.

Da notare : • nel campo File, attraverso BROWSE FILE, si puo’ allegare il Rile per il download. Al termine della conRigurazione SAVE e il prodotto è creato. Importazione ProdoQ

Magento poi consente l’importazione di Rile CSV

https://www.liviobollini.it

Metodi di spedizione I metodi di spedizione si trovano in Stores| Sales | Shipment Esistono le seguenti sezioni: â&#x20AC;˘ Shipping Settings: serve per deRinire lâ&#x20AC;&#x2122;origine della spedizione Ecco la schermata

https://www.liviobollini.it

• Multishipping adresses : nel caso di spedizioni a piu’ indirizzi

• Shipping methods: comprende tutte le opzioni delle spedizioni:

https://www.liviobollini.it

Attenzione nel caso di sito multilingua, scegliendo la store view i metodi di spedizione possono essere conYigurati per ogni vista Flat rate

Con questo metodo il costo di spedizione ha un unico valore, indipendentemente da peso o destinazione. Puoâ&#x20AC;&#x2122; essere deRinito per ordine o per item, un costo Risso oppure in percentuale. Free shipping

Nel caso il costo di spedizione sia gratuito . Puoâ&#x20AC;&#x2122; per esempio essere utile in caso di promozione, oppure nel caso di ordini maggiori di un certo valore. https://www.liviobollini.it

Table Rates

Premesso che collegarsi con le tariffe di uno spedizioniere offre maggiori informazioni, table rates, è utile quando si vuole deRinire il costo di spedizione, in base a piu’ parametri. I passi per conRigurare table rates, sono: • ConRigurare i parametri della Tabella • Compilare Rile .csv Table Rate • Import dei dati della tabella csv Conﬁgurare i parametri della Tabella

La schermata di Table rate, comprende, in particolare : • Enabled: yes • Title/method name • Condition : price vs destination e altre scelte • Include virtual product : no • Calculate Handling fee: Rixed o perc se si vuole caricare un costo addizionale per la gestione • Handling fee: valore Risso/percentuale del costo gestione • Applicable Countries • Ship to speciYic Countries • Show method • Sort Order

https://www.liviobollini.it

O@enere il ﬁle CSV per creare tabella

Nel lato in alto a sinistra, adesso impostato in default conRiguration, scegliere Main WEB site (dopo aver salvato), comparira’ il pulsante EXPORT. Cliccando si otterra’ il Rile CSV per la tabella. Questo Rile andra’ completato e poi salvato ad esempio su desktop Si deve quindi creare un Rile

https://www.liviobollini.it

Questo Rile ottenuto aprendo il Rile csv con textEditapp. Dove • Country : indica dove si applica il costo. Il suo valore * indica tutte. Se invece si vuole indicare allora deve contenere 3 valide lettere https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3

• Order Subtotal: Ogni item con un subototale di 50 ha uno shipping cost di 10 etc… Import dei da< della tabella

Basterà usare il bottone IMPORT, scegliere il Rile precedentemente salvato, poi Importare il Rile CSV, salvato e completato Per il test occorrera’, testare i pagamenti, con le differenti condizioni Table Rate Risoluzione dei problemi upload_tmp_dir doesn’t exist In questo caso bastera’ andare nel Rile phpini di Mamp e commentare la seguente riga : #upload_tmp_dir = /Applications/MAMP/tmp/php

https://www.liviobollini.it

Something went wrong impor<ng table rate Appena esportato il Rile CSV si nota che tutti i titoli della colonna sono in una sola cella. Per riportare ogni voce su una colonna, occorrerà aprire il Rile con Excell. Poi Dati | Testo in colonne dal menu di Excell. Poi nel tab che si presenta scegliere delimitati, poi virgola. Compilare il Rile come mostrato in Rigura e salvarlo in formato .csv: valori separati da una virgola. Può accadere di ricevere il messaggio: “Something went wrong importing table rate” In questo caso se si apre il Rile con TextEdit.app si potrà notare che le informazioni sono separate da punto e virgola “;” in questo caso, basterà sostituirlo con una virgola “,”. Separare i dati da “,” è coerente con il metodo di salvataggio: valori separati da una virgola.

https://www.liviobollini.it

Conﬁgurazione Tasse

Aggiungere Nuova aliquota ﬁscale Stores > Tax Zones and Rates . Add new Tax Rate. In questa parte potra ‘essere deRinito una nuova tax rate : IVA calcolata al 22% (esempio in Italia). Questa percentuale andra’ indicata nel campo Rate percent.

https://www.liviobollini.it

Save ConYiguration Impostare le regole Fiscali Stores>Tax Rules Proseguendo adesso dovremo deRinire la regola Riscale :

https://www.liviobollini.it

Poi applicarla a Clienti E Prodotto.

Nota: Per default Magento ha gia’ creato due classi: Customer e Product Tax: Retail Customer & Taxable Goods. Magento da pero’ la possibilità di crearne di nuove, nelle stessa schermata, con il pulsante : Add New tax class. Alla Yine del settaggio la conYigurazione andrà salvata!!

Customer Group STORES>Customer Group In questa sezione, esistono già delle classi di Cliente . Ne esistono già deRinite :

A questo punto si possono usare le classi predeRinite o crearne una nuova. Poi per ogni classe impostare la tassazione. https://www.liviobollini.it

Conﬁgurazione generale La conRigurazione generale delle tasse si esegue poi in: STORES|ConYiguration|Sales|Tax. Qui si puo’ scegliere : • Classe per prodotto, spedizione • Metodo di calcolo delle tasse • Default calculation • Prezzo se incluso o escluso tasse • Come mostrare tasse su fatture, ordini • Tasse Risse per prodotto

Metodi Pagamento

➢

STORES>CONFIGURATION>SALES>PAYMENT METHODS

https://www.liviobollini.it

Metodi di pagamento esisten<

• PayPal • Braintree • Altri metodi: o Assegni o vaglia o BoniRico Bancario o Contrassegno o Zero Subtotal Checkout: Quando ad esempio a causa di sconti il subtotal è uguale a zero, oppuer free of charge. o Purchaise order: usato nel caso un Cliente emetta ordine di acquisto. o Authorize.net: usato in Usa e Canada Conﬁgurare Paypal come metodo di pagamento Credenziali PayPal

Per prima cosa occorrera’ avere un account Paypal di tipo business, con email confermata, in modo da poter accettare pagamenti . Con questo accedere al sito di PayPal https://www.paypal.com/ Successivamente, tornati al sito di Magento, si puo’ accedere al pulsante “ConDigure”.

Accedendo, dopo aver cliccato su ConRigure si deve decidere se lavorare con : https://www.liviobollini.it

-Sandbox credential: la modalita’ di test di Paypal -Get credential: direttamente senza test Per entrambe le modalita’ esiste un pulsante, attraverso cui ottenere le credenziali “Credentials” direttamente da PayPal. Con questa procedura, conRigurando API signature, si otterrano le altre informazioni.(username, password, signature). Ottenute le credenziali, Magento richiede altri settaggi.

Basic seQng Paypal Magento

• Titolo: titolo del metodo di pagamento • Sort order: in che ordine vengono presentati i metodi di pagamento nel sito (0) • Payment action : se i pagamenti sono accettati dopo Autorizzazione, oppure se procedere all’addebito subito (Sale) • Display on Product details: scegliendo yes (suggerito), il metodo di pagamento sarà visibile in ogni pagina di dettaglio prodotto Advanced seQng PayPal

• Display on Shopping Cart: Yes suggerito, per mostre il metodo nella shooping cart. (YES) • Payment Applicable From: Nazioni dove applicabile • Debug mode (NO) • Enable SSL veriRication: Protezione SSL (YES) • Transfer Cart Line Items: Se si, verranno mostrati tutti gli item acquistati come dettagli della trnsazione PayPal (YES)

https://www.liviobollini.it

• Transfer Shipping Options: trasferisce le opzioni di spedizione da Magento 2 alla Rinestra PayPal (NO)

Altri metodi di pagamento Assegni o Vaglia

Questo metodo è abilitato per default • New order status: “Pending” , in attesa che pervenga il pagamento • Payment from applicable Countries: Nazioni abilitate • Make check payable to: il nome della persona a cui intestare l’assegno • Send to : a chi spedire l’assegno • Total Min/Max: valore min o max dell’ordine Boniﬁco Bancario

Oltre ai campi precedenti, esiste il campo • Instruction: dove inserire i dati bancari di chi vende e che chi compra dovra’ utilizzare per effettuare il pagamento.

Catalog Price Rule

Marketing | Catalog Price Rule

Con questo tool, si puo’ offrire in sconto uno speciRico prodotto. Non si usano coupon, perche’ queste regole si attivano prima che il prodotto sia posizionato nella shopping cart. Il processo da seguire è: • Add the new rule. Aggiungi una nuova regola https://www.liviobollini.it

• • • •

DeYine the rule's conditions. DeRinisci la regola DeYine the rule's actions. Azioni della regola Modify the rule's labels. Etichette della regola Test the rule. Test

Compilati i form di cui sopra , • Nome, descrizione • Status; Web Site e Customer Group • From .. to … andranno deRinite : • conditions • actions

https://www.liviobollini.it

Creare un Coupon in Magento

https://www.liviobollini.it

Marketing>Cart Price Rules>add new rules I campi da riempire, sono: • Rule Information • Conditions • Actions Rule Informa<on

I principali campi da riempire in "Rules information", sono : • Name, Status, Customer Group, Coupon, from..to... Un campo importante è anche il Coupon Code , che puo’ essere inserito a mano, ma anche autogenerato Condi<ons Scegliere la condizione, IF ALL these CONDITIONS are TRUE Per esempio per scegliere una categoria, inserita nello store. Ac<ons Apply: as a percentage e altre opzioni Discount amount Discard subsequent rules

Email Transazionali Marketing | Email Templates

https://www.liviobollini.it

Con questa scelta si accede ai template delle email transazionali. L’elenco è molto lungo: Payment Failed* Contact Us Form Forgot Password New Account New Account ConYirmation Key New Account ConYirmed New Account Without Password Remind Password Reset Password Currency Update Warning* Subscription ConYirmation Subscription Success Unsubscription Success https://www.liviobollini.it

Cron Error Warning* Price Alert Stock Alert Credit Memo Update Credit Memo Update for Guest (purchaser who does not log in) Invoice Update Invoice Update for Guest New Credit Memo New Credit Memo for Guest New Invoice New Invoice for Guest New Order New Order for Guest Order Update Order Update for Guest Shipment Update Shipment Update for Guest Send Product Link to Friend Sitemap Generation Warnings* Forgot Admin Password Reset Password Wish List Tra le personalizzazioni piĂš importanti : o Header o Footer Header

Scegliendo Header , poi load template, in TEMPLATE CONTENT, si ottiene il codice

https://www.liviobollini.it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <style type="text/css"> {{var template_styles|raw}} {{css Rile="css/email.css"}} </style> </head> <body> {{inlinecss Rile="css/email-inline.css"}}  <table class="wrapper" width="100%"> <tr> <td class="wrapper-inner" align="center"> <table class="main" align="center"> <tr> <td class="header"> <a class="logo" href="{{store url=""}}"> <img {{if logo_width}} width="{{var logo_width}}" {{else}} width="180" {{/if}} {{if logo_height}} height="{{var logo_height}}" {{else}} height="52" {{/if}} src="{{var logo_url}}" alt="{{var logo_alt}}" border="0" /> </a> </td> </tr> <tr> <td class="main-content">

https://www.liviobollini.it

Che puo’ essere personalizzato usando sia HTML che CSS. Da notare che essendo una email, l’allineamento avviene attraverso l’istruzione TABLE. Footer : Il codice da personalizzare  </td> </tr> <tr> <td class="footer"> <p class="closing">{{trans "Thank you, %store_name" store_name=$store.getFrontendName()}}!</p> </td> </tr> </table> </td> </tr> </table>  </body>

SALES :Ges<one ordini in Magento In questo capitolo tutte le sessioni relative alla gestine di un ordine , contenute nel Capitolo :SALES

https://www.liviobollini.it

In dettaglio questo il Rlusso dell’ordine 1)Ordine arrivato Quando un Cliente completa il Rlusso dell’ordine, lato front end, incluso il pagamento 2)Stato dell’ordine Per default Magento 2 aggiunge un ordine al Database con la deRinizione “Pending”. 3)Conferma pagamento Quando un pagamento è effettuato, l’ordine cambia stato, diventando “Processing“. 4)Fatturazione https://www.liviobollini.it

Quando un pagamento è ricevuto, viene generata una nuova fattura automaticamente. Questa fattura viene spedita via email al Cliente. 5) Informazioni di spedizione Dopo la conclusione del processo di acquisto, vengono generati i documenti di spedizione Il Cliente viene informato via email che i prodotti acquistati sono in spedizione e verranno spediti in accordo con il metodo scelto. 6) Tracking dell’ordine To track the status of any order, follow the steps below:

Conﬁgurazione Generale STORES | CONFIGURATION | SALES La sezione SALES:

https://www.liviobollini.it

General : Nascondi Ip Cliente Checkout Total Sort Orders: Ordine delle varie voci nel checkout Reorder: Consente ad un Cliente di ri-ordinare un prodotto, dopo che è stato completato il processo di pagamento. Logo dei documenti di spedizione Minimum order amount: Minimo valore di un ordine Minimum Advertised Price: MAP è il minimo prezzo un fornitore puo’ pubblicizzare il prodotto per la vendita. Il minimo prezzo che puo’ mostrare on line o in una pubblicità. La sezione SALES EMAIL

https://www.liviobollini.it

In questa sessione prendendo ad esempio Order: • • • • • •

Enalble : yes

New order confimation sender: chi invia New order confirmation template: Template della mail New Order Confirmation Template for Guest Send Order Email Copy To: a chi mandare copia email Send Order Email Copy Method : Metodo

Le altre sessioni come sopra

https://www.liviobollini.it

Ges<one di un Ordine

SALES | ORDERS : Con questa istruzione compaiono gli ordini esistenti Un ordine all’inizio viene posto da Magento 2 “Pending”. Il Cliente ricevera’ una email, il cui tempalte puo’ essere modiRicato (vedi Email transazionale ) :

Creare nuovo ordine Un ordine puo’ anche essere creato dal Back end. Per creare un nuovo ordine i passi da eseguire, sono quelli di seguito SALES>ORDERS>CREATE NEW ORDER Eseguita questa scelta, si accede alla sezione successiva, che richiede: CREATE NEW CUSTOMER. Per prima cosa andrà selezionato un Cliente. Se il Cliente non esiste, andra’ creato, attraverso:

https://www.liviobollini.it

La creazione di un nuovo Cliente richiede: • Informazioni anagraRiche (incluso P.IVA se disponibile) • Email • Payment e shipping Method ADD SELECTED PRODUCT Con questa istruzione, viene speciRicato il prodotto, oggetto dell’ordine. SUBMIT ORDER Cliccando poi SUBMIT ORDER : L’ ordine verra’ creato Fa@ura In questa sezione vengono gestite le fatture emesse : SALES>INVOICES. In precedenza il settaggio di queste fatture, il logo, è stato fatto attraverso, STORES>CONFIGURATION>SALES. Una volta ricevuti i pagamenti si puo’ emettere una fattura. Per questo basterà scegliere nel menu dell’ordine selezionato(SALES>ORDERS): Invoice

Poi submit invoice. Anche in questo caso puo’ essere inviata una mail al Cliente con la fattura.

https://www.liviobollini.it

Tornando all’ordine adesso è nello stato “Processing”. Spedizione E’ possibile creare una spedizione, cliccando nel menu Shipping. Una volta cliccato si aprirà una Nuova Spedizione .

In questa schermata è possibile inserire la quantità da spedire, ma anche il riferimento alla spedizione. Come per ordine e fattura è possibile inviare una email spuntando : Copy email for shipment

https://www.liviobollini.it

Completata la spedizione, tutte le informazioni relative all’ordine, sono reperibili nell’ordine, accedendo al menu a sinistra.

Ges<one Spedizioni con estensioni / tools Una delle soluzioni per il tracking delle spedizioni e’ https://www.qapla.it . Free Yino a 100 spedizioni/mese

https://www.liviobollini.it

Credit Memo Puo’ succedere che un Cliente decida di ritornare un articolo, Magento puo’ aiutare, creando un Credit Memo. Condizione pero’ per il Credit Memo è che la fattura per ordine sia stata emessa. Per prima cosa andra’ selezionato l’ordine oggetto del ritorno (SALES>ORDER). Poi nel menu’ a sinistra scegliere Credit Memo

A questo punto l’ordine va tornato in stock, e speciRicato la quantità da rimborsare. Inoltre • Refund shipping: il valore del costo delle spedizioni da rimborsare • Adjustement refund: un valore addizionale del rimborso • Adjustement fee: un valore che non verra’ rimborsato • Append comments • Email

https://www.liviobollini.it

REFUND OFFLINE. In SALES>CREDIT memo sara’ visibile l’elenco dei credit memo. Billing Agreement Un settaggio dei pagamenti che consente un rapido pagamento. Si tratta di un accordo di pagamento tra lo store e i suoi Clienti. L’amministratore puo’ gestire questi billing agreement attraverso il pannello

Per usarlo deve essere conRigurato in : STORES|CONFIGURATION|SALES|PAYABLE MET

https://www.liviobollini.it

Integrazione API.

Una delle funzioni piu’ importnati per Magento è l’integrazione. Cioè la possibilità di integrarsi con altre applicazioni: • Scambiare i dati con CRM e ERP. Una delle funzioni piu’ richiesta • Creare una shopping App • Effettuare una chiamata Asincrona: AJAX L’Integrazione con ad esempio ERP usa il metodo di autentiRicazione OAuth. Per effettare tale integrazione si usa la funzione

System | Integration Add New Integration

https://www.liviobollini.it

Si ottiene questa schermata

Dove : • Callback Url : Indica il link dove vengono trasmesse le credenziali di accesso • Indentity Link URl: il link dell’applicazione con cui sincronizzare l’applicazione Successivamente, dovranno essere scelte le risorse nel pannello API. Introdotti questi dati, l’integrazione andra’ attivata. Basterà in alto a desta scegliere

Save and Activate

https://www.liviobollini.it

A questo punto compariranno le credenziali di accesso : • Consumer Key • Consumer Secret • Access Token • Access Token Secret Dati necessari per l’ingresso con l’autentiRicazione OAuth.

SEO: Search Engineering Op<miza<on

Content | Page Ogni pagina che viene creata, contiene una sezione SEO

https://www.liviobollini.it

Content | Blocks

Nei blocchi statici, creati nella sezione content, possono essere aggiunti links, ad esempio nel footer : < ul class =" footer links" > < li class =" nav item" > < a href ="{{store url ="aboutus"}}"> About us </ a > </ li > < li class =" nav item" > < a href ="{{store url ="customer- service"}}" >Customer Service </ a > </ li > < li class =" nav item" > < a title ="Cusotmer Service "href ="{{store url = care-instructions}}" > Care Instructions </ a > </ li > </ ul >

Content | Widgets

Anche attraverso questa funzione possono essere creati links

https://www.liviobollini.it

Widgets possono essere poi essere usati per introdurre dynamic content nelle pagine. Questo nella sezione Layout update

Widget Op<ons Scegliendo poi Widget Option per esempio Category Product List, si possono introdurre condizioni

https://www.liviobollini.it

Sicurezza

https://www.liviobollini.it

100

Per rendere il sito il più sicuro possibile, occorre Usare cer<ficato SSL Configurazione del server • VeriRicare che l’accesso ai Rile sia conRigurato in modo che non siano accessibili dall’esterno. • Impedire dall’esterno l’accesso al DB. • Controllare l’accesso da parte di esterni al server. • Non lavorare in diretta sul server, ma sviluppare in locale e Trasferire le modiRiche dopo i test. • Accesso al server via SSH User Roles Ad ogni utente va attribuito solo ed esclusivamante il ruolo necessario System | User Roles Cliccando su User Roles , si possono per ogni utente assegnare le risorse a cui l’utente puo’ accedere. Verificare le regole per l’utente Attraverso Store | ConYiguration | Advanced | Admin Security panel, si possono Rissare le regole di sicurezza per l’utente

https://www.liviobollini.it

101

Aggiornare Magento Un punto importante per la sicurezza Ă¨ il continuo aggiornamento di Magento, oltre allâ&#x20AC;&#x2122;installazione delle Patches Patches Sono disponibile al sito https://magento.com/tech-resources/ download

https://www.liviobollini.it

102

Per scaricarle occorre avere un account Magnto Connetc Una volta scaricata la patch, i Rile che contiene vanno posizionati nelle directory che sono citate nella patch. Aggiornamento Versione Magento La strada migliore Ă¨ quella di usare Cliccando su System > WebSetupWizard, si arriva a:

scegliendo : SYSTEM UPGRADE Ottenendo questa schermata

https://www.liviobollini.it

103

seguendo poi le istruzioni Attenzione : importante che cron sia in funzione • php bin/magento cron:run Ran jobs by schedule.

• php bin/magento indexer:reindex • php bin/magento cache:clean In caso di problemi, installare la patch

Aggiornamento via terminale Alternativa a questo è l’aggiornamento via terminale, queste le istruzioni: • composer require magento/product-community-edition 2.2.4 -no-update • composer update • rm -rf var/di var/generation • php bin/magento cache:clean • php bin/magento cache:Rlush • php bin/magento setup:upgrade https://www.liviobollini.it

104

• php bin/magento setup:di:compile • php bin/magento indexer:reindex Al termine per veriRicare • php bin/magento –version Se tutto è andato bene, il terminale risponderà con • Magento CLI version 2.2.4

Che è la versione in atto in questo momento Costruire un modulo Installazione In Magento2 ogni modulo deve essere inserito all’interno di un folder “Namespace” all’interno del folder Code. Cosi ad esempio

App | Code| Modulo | EsempioModulo Il primo Rile da inserire, direttamente nella cartella è Registration.php

https://www.liviobollini.it

105

<?php /** * Venustheme * * NOTICE OF LICENSE * * This source Rile is subject to the Venustheme.com license that is * available through the world-wide-web at this URL: * http://www.venustheme.com/license-agreement.html * * DISCLAIMER * * Do not edit or add to this Rile if you wish to upgrade this extension to newer * version in the future. * * @category Venustheme * @package Ves_Setup https://www.liviobollini.it

106

* @copyright Copyright (c) 2014 Venustheme (http:// www.venustheme.com/) * @license http://www.venustheme.com/LICENSE-1.0.html */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Modulo_EsempioModulo', __DIR__ ); Successivamente deve essere creata una directory: etc in cui inserire il Yile module.xml <?xml version="1.0"?>  <conRig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/ Framework/Module/etc/module.xsd"> <module name="Modulo_EsempioModulo" setup_version="1.0.0"> </module> </conRig>

https://www.liviobollini.it

107

Creare una tabella Data Base e installare da< Per creare e inserire dati occorre creare una cartelle Setup, in cui includere due Riles: o InstallSchema.php o InstallData.php I due Riles InstallSchema.php <?php namespace Modulo\SampleModule\Setup; use Magento\Framework\Setup\InstallSchemaInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\SchemaSetupInterface; use Magento\Framework\DB\Ddl\Table; class InstallSchema implements InstallSchemaInterface { /** * {@inheritdoc} */ public function install(SchemaSetupInterface $setup, ModuleContextInterface $context) { $setup->startSetup(); $table = $setup->getConnection()->newTable( $setup->getTable('Esempio') )->addColumn( 'id', Table::TYPE_INTEGER, null, ['identity' => true, 'nullable' => false, 'primary' => true], 'Item ID' )->addColumn( 'name', Table::TYPE_TEXT, 255, https://www.liviobollini.it

108

['nullable' => false], 'Item Name' )->addIndex( $setup->getIdxName('Esempio', ['name']), ['name'] )->setComment( 'Sample Items' ); $setup->getConnection()->createTable($table); $setup->endSetup(); } }

InstallData.php <?php namespace Modulo\SampleModule\Setup; use Magento\Framework\Setup\InstallDataInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface; class InstallData implements InstallDataInterface { /** * {@inheritdoc} */ public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) { $setup->startSetup(); $setup->getConnection()->insert( $setup->getTable('Esempio'), [ 'name' => 'Livio' ] ); $setup->getConnection()->insert( $setup->getTable('Esempio'), https://www.liviobollini.it

109

[ 'name' => 'walter' ] ); $setup->endSetup(); } }

Dopo questa : php bin/magento module:enable Modulo_Social php bin/magento setup:upgrade php -dmemory_limit=5G bin/magento setup:di:compile php -dmemory_limit=5G bin/magento setup:static-content:deploy php bin/magento cache:clean php bin/magento cache:Rlush Nella directory di Magento

Legare Magento a MailChimp

Per la creazione di newsletter, una delle possibilità è usare MailCHIMP. Qui una vasta illustrazione di queste funzionalità. https://www.liviobollini.it/tutormailmktg

Per utilizzare Mailchimp è necessario utilizzare da Magento Store l’estensione: MageMonkey. https://www.liviobollini.it

110

O@enere estensione Magento Connect

L’estensione di Magento, MageMonkey che consente il Collegamento a MailChimp, è scaricabile in Magento Connect. (free) https://www.magentocommerce.com/magento-connect/

Una volta ottenuto MageMonkey, per installarlo sul sito di Magento, si deve ottenere Access Keys utente. Access Key utente e’ disponibile , andando in Magento connect alla sezione : • Market Place • My Access Keys, Magento2

Installare l’estensione su sito Magento. Comperata l’estensione, ottenute le API Key, queste ultime andranno copiate nello sito di Magento, per poi installare le estensioni appena ottenute. https://www.liviobollini.it

111

Cliccando su System > WebSetupWizard, si arriva a:

Cliccando su System ConYiguration, si apre la maschera dove copiare le chiavi di Access Keys utente ottenute in Magento Connect, precedentemente Per l’installazione di MageMonkey , occorre poi scegliere Component Manager, poi: • Sincronizzare il sito: SYNC • Install e successivamante sotto la colonna New Purchase: selezionare magento2-magemonkey. Seguire poi le istruzioni per installazione: • VeriRica compatibilità • Back up • Installazione Fino ad ottenere SUCCESS. Conﬁgurare MageMonkey

Per prima cosa occorre creare un account in MailChimp : https://www.liviobollini.it

112

https://www.liviobollini.it/tutorMailchimpAccount

• Reperire l’apiKey di Mailchimp, che si trova in menu >account > extras https://www.liviobollini.it/tutorMailchimpForm

• Andare in Stores>ConYiguration>MageMonkey, inserire sia Apikey che il nome della lista da usare. https://marketplace.magento.com/ebizmarts-magento2magemonkey.html Per veriRicare che tutto sia funzionante: o Nel footer inserire un’email di iscrizione alla newsletter o Controllare che il nuovo utente esiste nella lista di Mailchimp Risoluzione di problemi

Se doveste avere dei problemi per l’installazione tipo funzionamento di Cron Scripts. Le istruzioni da seguire per MAMP, sono descritte di seguito. Aprire il terminale CLI e digitare : • sudo crontab -u root -e • “i” per Insert

Nel Rile che si apre digitare: */1* * * * /Applications/MAMP/bin/php/php7.0.10/bin/php -c / Applications/MAMP/conf/php7.0.10/php.ini /Applications/ MAMP/htdocs/magentodev/bin/magento cron:run >> / Applications/MAMP/htdocs/magentodev/var/log/setup.cron.log&

*/1 * * * * /Applications/MAMP/bin/php/php7.0.10/bin/php – c / A p p l i c a t i on s/ M A M P / c on f/ p hp 7. 0. 10/ p hp . i n i / Applications/MAMP/htdocs/magentodev/update/cron.php >> /Applications/MAMP/htdocs/magentodev/var/log/ setup.cron.log&

https://www.liviobollini.it

113

*/1 * * * * /Applications/MAMP/bin/php/php7.0.10/bin/php -c / Applications/MAMP/conf/php7.0.10/php.ini /Applications/ MAMP/htdocs/magentodev/bin/magento setup:cron:run>> / Applications/MAMP/htdocs/magentodev/var/log/setup.cron.log&

Dove:

• 7.0.10 è la versione di php, da cambiare con quella in uso • /Applications/MAMP/htdocs/magentodev la directory dove è Magento , da cambiare • /Applications/MAMP/conf/php7.0.10/php.ini dove è il Rile php.ini, da cambiare se necessario Alla Rine digitare: • esc per uscire • ZZ(maiuscolo) per aggiornare Ultimo andare nel Rile php.ini e impostare: • memory_limit = 2G (almeno)

Pulsan< Social Network Creare un pulsante “like o condivisione” su un Social Network (es faceboook) di un prodotto inserito in un E-Commerce Magento2. Per creare un pulsante, occorre creare un modulo, cioè una struttura come sotto, all’interno della cartella code. Stru@ura

https://www.liviobollini.it

114

Dove i Rile : module.xml <?xml version="1.0"?> <!-- /** * Venustheme * https://www.liviobollini.it

115

* NOTICE OF LICENSE * * This source Rile is subject to the Venustheme.com license that is * available through the world-wide-web at this URL: * http://www.venustheme.com/license-agreement.html * * DISCLAIMER * * Do not edit or add to this Rile if you wish to upgrade this extension to newer * version in the future. * * @category Venustheme * @package Ves_Setup * @copyright Copyright (c) 2014 Venustheme (http:// www.venustheme.com/) * @license http://www.venustheme.com/LICENSE-1.0.html */ --> <conRig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/ Framework/Module/etc/module.xsd"> <module name="Modulo_Social" setup_version="1.0.0"> </module> </conRig>

registra<on.php <?php /** * Venustheme * * NOTICE OF LICENSE * * This source Rile is subject to the Venustheme.com license that is https://www.liviobollini.it

116

* available through the world-wide-web at this URL: * http://www.venustheme.com/license-agreement.html * * DISCLAIMER * * Do not edit or add to this Rile if you wish to upgrade this extension to newer * version in the future. * * @category Venustheme * @package Ves_Setup * @copyright Copyright (c) 2014 Venustheme (http:// www.venustheme.com/) * @license http://www.venustheme.com/LICENSE-1.0.html */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Modulo_Social', __DIR__ );

catalog_product_view.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/ Layout/etc/page_conRiguration.xsd"> <body> <referenceBlock name="product.info.addtocart"> <action method="setTemplate">

https://www.liviobollini.it

117

<argument name="template" xsi:type="string">Modulo_Social::catalog/product/view/ addtocart.phtml</argument> </action> </referenceBlock> </body> </page>

addtocart.phtml Copiato dal Rile con lo stesso nome che si trova in Vendor /Magento/module_catalog/view/frontend/templates/ product/view Questa tecnica usata anche per la modiRica del frontend, consente di lavorare con rischi ridotti, infatti, in caso di problemi sul Rile copiato, Magento punterĂ al Rile nella cartella Vendor.

Bo@one Facebook Il prossimo passo Ă¨ quello di ottenere in codice per il bottone facebook, andando al sito : https://developers.facebook.com/docs/plugins/share-button? locale=it_IT

https://www.liviobollini.it

118

OQeni il codice Per ottenerlo si devono compilare i campi e in particolare URL: â&#x20AC;˘ Sito Web o di una Pagina Facebook da condividere. In seguito va premuto il pulsante: Ottieni il codice, ottenendo:

da notare che la pagina di facebook, oltre al bottone condividi, offre altre alternative.

https://www.liviobollini.it

119

Copiare il codice in addtocart.phtml La prima parte del codice ottenuto, va incollata all’inizio del Rile addtocart.phtml, subito dopo la parte commentata. <?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile /** @var $block \Magento\Catalog\Block\Product\View */ ?> Qui copiare la prima parte <div id="fb-root"></div> ---------------------------------------------

La seconda parte va invece copiata all’interno del Rile, dove si vuole che appaia il pulsante facebook. Ad esempio sotto pulsante SUBMIT.

https://www.liviobollini.it

120

Comandi a Terminale Lâ&#x20AC;&#x2122;ultima operazione Ă¨ abilitare il modulo, allâ&#x20AC;&#x2122;interno della cartella di Magento2, i comandi sono : php bin/magento module:enable Modulo_Social php bin/magento setup:upgrade php -dmemory_limit=5G bin/magento setup:di:compile php -dmemory_limit=5G bin/magento setup:static-content:deploy php bin/magento cache:clean php bin/magento cache:Rlush dmemory_limit=5G dmemory_limit=5G, serve per aumentare la memoria di Composer, evitando un errore frequente.

https://www.liviobollini.it

121

https://www.liviobollini.it

122