Tema child per Magento 2

Tempo di lettura: 5 minuti
Tema child Magento 2

Come per qualsiasi CMS, potrebbe tornare utile creare un tema child per Magento 2 che, per impostazione di default, installa Luma come tema predefinito.
Installare un tema child è opportuno quando abbiamo la necessità di apportare personalizzazioni al front end del nostro sito di eCommerce e, di conseguenza, garantirci la possibilità di aggiornare in qualsiasi momento la piattaforma senza perdere le modifiche implementate.

Tema child per Magento 2, pratico tutorial per crearne uno

Il tema child consente, quindi, di personalizzare tante sezioni del nostro sito eCommerce rispetto al tema genitore (parent): personalizzare le dimensione delle immagini del catalogo, cambiare la visualizzazione della pagina del prodotto, modificare la disposizione dell’elenco degli articoli nella pagina delle categorie o semplicemente lo stile dei font, il colore dello sfondo e tutto quello che non piace del tema principale.

Struttura tipo di un tema child Magento 2

Prima di iniziare diamo un’occhiata alla struttura di un tema personalizzato di Magento 2.

  • Vendor: è in genere il nome dell’organizzazione o il nome degli sviluppatori che hanno realizzato il tema child. In questo articolo, useremo “Magento” come nome del fornitore;
  • Theme: è il nome del tema child. Nel nostro esempio useremo “luma_child“, poiché lo realizziamo per il tema principale che si chiama Luma. Quindi includendo “luma_” nel nome del child possiamo memorizzare meglio a quale tema è associato. Ovviamente si può scegliere di usare qualsiasi nome;
  • /etc/view.xml: questo file contiene tutta la configurazione relativa alle immagini del negozio e dei prodotti. Il file è facoltativo se vogliamo utilizzare le stesse impostazioni del tema principale;
  • Web: la directory Web contiene tutti i file statici come css, font, immagini e file js;
  • /web/css/source: questa directory contiene i file less che sovrascrivono quelli del tema predefinito. In questa fase possiamo copiarli dal tema genitore Luma;
  • /web/fonts: contiene i font del tema. Se si desidera un font diverso da quello installato di default, caricarli in questa directory;
  • /web/images: contiene le immagini del tema;
  • /web/js: questa directory contiene i file js del tema;
  • /i18n: contiene i file di traduzione;
  • /media: contiene l’immagine di anteprima del tema, visibile nella sezione di configurazione del tema di Magento 2 del pannello di amministrazione;
  • /composer.json: file che descrive le informazioni relative al tema;
  • /registration.php: file utilizzato per la registrazione del tema nel sistema Magento 2;
  • /theme.xml: indica a Magento 2 il nome del nostro tema, il nome del tema principale, ecc;

Il tema personalizzato deve essere creato nella directory “app/design/frontend/”

Basandosi sulla indicazioni sopra riportate e considerando solo le directory e file necessari, il nostro tema child dovrebbe avere la seguente struttura:

Struttura directory tema child

Realizzazione del tema child in 9 step

Tempo richiesto: 15 minuti

Segui questi semplici passaggi per la realizzazione del thema child per Magento 2

  1. Crea la directory del fornitore e quella del tema in app/design/frontend

    Nel nostro caso sarà quindi: “app/design/frontend/Magento/luma_child“

  2. Crea il file registration.php

    crea il file “registration.php” nella directory “app/design/frontend/Magento/luma_child” con il seguente contenuto:

    <?php
    \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Magento/luma_child',
    __DIR__
    );

  3. Crea il file theme xml

    crea il file “theme.xml” nella directory “app/design/frontend/Magento/luma_child” con il seguente contenuto:

    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Tema Luma Child</title>
    <parent>Magento/luma</parent>
    <media>
    <preview_image>media/preview.jpg</preview_image>
    </media>
    </theme>

    Nel file “theme.xml”, poiché stiamo usando il tema Luma come tema principale, lo dobbiamo dichiarare nel tag “<parent>”.
    Nel tag “<preview_image>” abbiamo dichiarato il percorso ed il nome dell’immagine preview del tema che risiede nella directory media. Quindi è necessario inserire un’immagine identificativa del tema, denominata “preview.jpg”, nella directory media (“app/design/frontend/Magento/luma_child/media”).

  4. Crea il file composer.json

    crea il file “composer.json” nella directory “app/design/frontend/Magento/luma_child” con il seguente contenuto:

    {
    "name" : "Magento/luma_child",
    "description" : "Il tema child di Luma per Magento 2",
    "require" : {
    "php" : "~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",
    "magento/theme-frontend-luma" : "100.0.*",
    "magento/framework" : "100.0.*"
    },
    "type" : "magento2-theme",
    "version" : "100.0.2",
    "license" : [
    "OSL-3.0",
    "AFL-3.0"
    ],
    "autoload" : {
    "files" : [
    "registration.php"
    ]
    }
    }

  5. Verifica l’albero della directory

    completati gli step sopra dovresti ottenere un albero di directory e file come il seguente.
    Nota: puoi copiare i file _extends.less, _theme.less e view.xml dal tema genitore Luma.

    Albero directory tema child
    Se vuoi puoi scaricare il tema child senza doverla scrivere a mano, clicca su questo link
    Una volta decompresso il file zip, fai l’upload tramite un client FTP della directory “Magento” in “app/design/frontend/”

  6. Registra il tema

    Registra il tema dal pannello di controllo di amministratore: “Content > Design > Configuration
    Clicca su “Edit” del tuo “Default Store View”

    impostazione tema Magento 2

  7. Attiva il tema

    Quindi, in Default Theme – Applied Theme, nel menu a tendina dovresti vedere “Luma Child”, selezionalo e clicca su “Save Configuration”

    attivazione tema child Magento 2

  8. Svuota la cache

    svuota la cache di Magento 2: “System > Cache Management > Flush Magento Cache”

  9. Aggiorna il contenuto statico di Magento

    se Magento 2 è in modalità produzione, accedi tramite ssh e vai nella root directory dove è installato Magento 2 ed esegui il comando seguente:

    php bin/magento setup:static-content:deploy

A questo punto aggiorna dal browser la home page del sito e dovresti visualizzare il tema child e le eventuali modifiche apportate. Se non hai apportato modifiche dovresti visualizzare la stessa versione del tema genitore Luma, ma ovviamente sarà attivo il child.

Nota: Se si verificano errori nella visualizzazione del tuo sito eCommerce, assicurati che tutti i file e le cartelle abbiano i permessi di lettura e scrittura corretti: 755 per tutte le directory e 644 per tutti i file.

Risorse utili
Documentazione ufficiale sviluppo temi per Magento 2

Devi realizzare un sito eCommerce ed hai bisogno di una consulenza professionale per la scelta della piattaforma da utilizzare?

Contattaci e ti aiuteremo a trovare la soluzione più adatta.