magento-template-custom

Magento 2: primi passi per la creazione di un template custom

Indice dei contenuti

Magento 2 come creare un template custom

Vediamo quali sono i primi passi per creare un modulo custom per Magento 2 partendo da zero!

 
Magento rappresenta, ad oggi, una delle piattaforme eCommerce open source maggiormente performanti, sicure e flessibili a livello mondiale. La sua diffusione su larga scala ha consentito il proliferarsi di una community tra le più attive del settore. Oggi vediamo come muovere i primi passi verso la creazione di un tema custom per rivestire il nostro eCommerce realizzato in Magento 2E’ importantissimo, infatti, offrire ai nostri clienti una veste grafica fresca e unica, un user experience piacevole ed intuitiva, un’interfaccia accattivante e facile da utilizzare.
 
Questi, insieme a fattori come la velocità, l’affidabilità e le performance di un buon Hosting per Magento, se utilizzati con la giusta metodologia, possono portare ad un costante e significativo aumento delle conversioni.

Per prima cosa installiamo Magento 2

Magento 2 come creare un template custom

Farlo è molto semplice: basta recarsi all’interno dell’area download del sito web magento.com e scaricare il pacchetto .zip relativo alla versione desiderata.

Il suggerimento è quello di scaricare il pacchetto contenente i sample data in modo tale da avere già una base di partenza sulla quale operare.

Una volta scaricato il file zip, scompattiamolo e copiamo i files sul nostro server Magento. Raggiungendo il frontend dello store, ci troveremo di fronte l’interfaccia di setup di Magento.

Il setup è molto intuitivo, dovremo sostanzialmente fornire alcuni dettagli circa la paternità del nostro store e inserire i dati del database MySql ad esso associato. Una volta terminata l’installazione, troveremo già attivo il tema Luma.

Magento 2 guida su come creare un template custom

Luma è un template per addetti ai lavori, utilizzato dagli stessi sviluppatori di Magento per test operativi sulla piattaforma, ecco perchè è sconsigliato utilizzare Luma come base per il nostro tema. Utilizzeremo invece il tema Blank che, come suggerisce il nome, è un contenitore spoglio, una solida base per la creazione del nostro custom theme.
Apriamo il nostro IDE preferito (io utilizzerò PHPStorm, ma è un fattore irrilevante) e creiamo  l’ossatura del tema che dovrà necessariamente risiedere all’interno del path app/design/frontend ed essere composta da una struttura simile a quella presente in figura

Magento 2 creare un template custom

Analizziamo nel dettaglio la struttura. Per prima cosa abbiamo creato una folder allo stesso livello della cartella Magento nominandola MyTheme. Figlia della cartella MyTheme, vi è la cartella Custom, che rappresenta il nome del template stesso e lo identifica in maniera univoca.

All’interno della cartella Custom, troviamo il file composer.json che illustra le dipendenze del tema. Ecco il suo contenuto:

{

“name”: “magento/theme-frontend-custom”,

“description”: “Custom Theme Powered by US”,

“require”: {

  “php”: “~5.5.0|~5.6.0|~7.0.0”,

  “magento/theme-frontend-blank”: “100.0.*”,

  “magento/framework”: “100.0.*”

},

“type”: “magento2-theme”,

“version”: “100.0.1”,

“license”: [

  “OSL-3.0”,

  “AFL-3.0”

],

“autoload”: {

  “files”: [

    “registration.php”

  ]

}

}

In questo file si evince chiaramente l’intenzione di comunicare a Magento 2 l’ordine di ereditare le proprietà dal tema di base Blank mediante l’ausilio del costrutto require.

Infine, attraverso l’autoload, carichiamo il file “registration.php” che conterrà le informazioni utili per la registrazione del nostro tema all’interno del sistema, ecco il suo contenuto

<?php

/**

* Copyright © 2015 Magento. All rights reserved.

* See COPYING.txt for license details.

*/

\Magento\Framework\Component\ComponentRegistrar::register(

  \Magento\Framework\Component\ComponentRegistrar::THEME,

  ‘frontend/MyTheme/Custom’,

  __DIR__

);

Ovviamente, non è necessario conoscere a menadito il contenuto di tale file, possiamo infatti copiarlo dalla path dei template Blank o Luma e cambiare le occorrenze laddove necessario.

Infine, come ultimo file della cartella Custom, troviamo “theme.xml” il quale ha il compito di dichiarare il tema, registrare il parent theme dal quale il tema stesso andrà ad ereditare parte delle sue funzioni e sancire l’immagine di preview.

Il suo contenuto sarà dunque molto simile al seguente:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

  <title>Custom</title> <!– your theme’s name –>

  <parent>Magento/blank</parent> <!– the parent theme, in case your theme inherits from an existing theme –>

  <media>

      <preview_image>media/preview.jpg</preview_image> <!– the path to your theme’s preview image –>

  </media>

</theme>

La cartella etc, anch’essa necessaria nella creazione del tema, contiene invece il file view.xml. Con questo file andremo ad indicare alcuni parametri riguardanti le immagini contenute all’interno del nostro store, come ad esempio le dimensioni delle thumbnail dei prodotti e le immagini utilizzate nel listing. Al momento basta semplicemente copiarlo dal tema Blank situato in:

\vendor\magento\theme-frontend-blank\etc\view.xml

Creazione delle cartelle di storage su Magento 2

Creiamo poi delle semplici cartelle di storage che utilizzeremo per le nostre risorse, siano esse JS, CSS, Fonts o Immagini e le posizioniamo all’interno della folder Web.

A questo punto dovremo lanciare alcuni comandi da linea di comando, necessari per passare alla modalità developer di Magento 2, svuotare la cache ed effettuare il deploy degli static content.

Posizioniamoci quindi nella root dove ha sede il nostro Magento, apriamo il terminale e lanciamo i seguenti comandi.

php /bin/magento deploy:mode:set developer

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

Vi consigliamo inoltre di disabilitare la cache in fase di sviluppo. Possiamo farlo sia dall’admin di Magento oppure, sempre da linea di comando, lanciando

php bin/magento cache:disable

Nonostante la cache sia ora disabilitata, le modifiche effettuate potrebbero non essere immediatamente visibili, questo accade poichè Magento effettua una copia delle nostre risorse originali e le inserisci all’interno dei percorsi

var/view_processed e pub/static/frontend

Se non visualizziamo le nostro modifiche, dunque, possiamo provare ad eliminare il contenuto di queste cartelle.

Non preoccupatevi, esso verrà rigenerato automaticamente.

Fate però attenzione a non eliminare il file .htaccess contenuto in pub/static

Attivazione del nuovo tema su Magento 2

Non ci resta che attivare il nostro nuovo tema. Per farlo rechiamoci nell’admin di Magento 2 e, attraverso il menu di sinistra, selezioniamo CONTENT -> DESIGN -> CONFIGURATION, clicchiamo su Edit a livello di store view e, se tutto è andato per il verso giusto, troveremo il nome del nostro tema all’interno del menù a tendina. (Fig 1.4)

Magento 2 come creare un template custom

Applichiamo il tema e rechiamoci sul frontend del nostro store. Come possiamo notare, il tema Luma è stato sostituito con il Custom appena creato. Fig 1.5

Magento 2 creazione di un template custom

Non ci resta che customizzare il tema a piacimento aggiungendo, di volta in volta, blocchi e sezioni fino a trovare il giusto equilibrio grafico. Per fare questo dovremo svolgere sostanzialmente tra operazioni a seconda delle necessità:

  • Sfruttare il sistema di Fallback di Magento.

Come detto, il nostro tema non fa altro che ereditare funzionalità dal tema Blank. Dovremo quindi andare a sovrascrivere i files del tema Blank posizionandoli all’interno della corrispondente cartella app/design/MyTheme/Custom estendendo di fatto il tema padre.

  • Modificare i moduli

Magento è composto prevalentemente da moduli che svolgono determinate funzioni. La struttura di questi moduli è visibile all’interno della cartella vendor/magento. Qui potremo trovare, ad esempio, il modulo responsabile della ricerca (module_catalog_search) o quello adibito alla gestione degli utenti (module_customer).

Ognuno di questi moduli può essere modificato/esteso dal nostro tema. Per farlo bisognerà creare una cartella che andrà a sovrascriverne il contenuto. Questa cartella dovrà rispettare una precisa sintassi, in particolar modo la parola “module” verrà sostituita da “Magento” e le successive dovranno essere in CamelCase

Qualora ci fossero più parole, l’underscore tra esse andrà rimosso.

Facendo quindi un esempio pratico, per effettuare l’override della cartella module_catalog_search contenuta all’interno di vendor/magento, dovremo creare, nella root del nostro tema, una cartella che si chiamerà Magento_CatalogSearch, in accordo con le regole precedentemente illustrate.

  • Rimuovere e aggiungere blocchi

Magento 2 utilizza un sistema basato sugli xml, attraverso questi ultimi possiamo manipolare e decidere la presenza di alcuni blocchi di codice, facendo riferimento ad essi attraverso le parole chiave ReferenceBlock e ReferenceContainer

Ecco alcune operazioni di routine che spiegano meglio il concetto
Rimuovere il link alla ricerca avanzata

<referenceBlock name=”advanced-search-link” remove=”true”/>

Rimuovere i link a Wishlist e Mio Account dalla top bar

<referenceBlock name=”header.links”>

  <referenceBlock name=”wish-list-link” remove=”true” />

  <referenceBlock name=”my-account-link” remove=”true” />

</referenceBlock>

Aggiungere dei link personalizzati all’interno dei top links

<referenceBlock name=”top.links”>

  <block class=”Magento\Customer\Block\Account\RegisterLink” name=”register-link”>

      <arguments>

          <argument name=”label” xsi:type=”string” translate=”true”>Create an Account</argument>

          <argument name=”class” xsi:type=”string” translate=”true”>account-link</argument>

      </arguments>

  </block>

</referenceBlock>

Abbiamo dunque gettato le basi per la creazione di un tema custom in Magento 2, partendo dalla semplice dichiarazione fino ad arrivare alle best practice per affrontare i problemi più comuni.

Ora tocca a voi sperimentare e cimentarvi nella creazione di un template personalizzato: l’unico limite è la vostra fantasia!

CONDIVIDI SUI SOCIAL

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

− 6 = 1