Come creare un tema personalizzato in Magento

Anche se Magento 2 è in fase di sviluppo, ha già fatto molto scalpore nel settore dell'e-commerce a causa dei nuovi e migliorati approcci front-end che dovrebbe offrire. Sebbene i miglioramenti del front-end sembrino rendere il processo del tema Magento molto più efficiente, molti sviluppatori (soprattutto i principianti) non sono ancora consapevoli del processo di creazione di un tema personalizzato in Magento 2.

Attraverso questo post, tratterò passo passo il processo di creazione di un tema Magento 2 personalizzato. Ma prima diamo prima una panoramica del tema Magento.

Tema Magento: una panoramica

Un tema aiuta a creare una rappresentazione visiva del tuo negozio Magento, utilizzando una combinazione di quanto segue:

• Modelli personalizzati
• Layout
• File CSS/LESS

L'applicazione Magento offre due diversi temi di progettazione, ovvero Luma (chiamato anche come tema dimostrativo) e Blank (usato per la creazione di temi personalizzati). Dal momento che dobbiamo creare un tema Magento personalizzato, utilizzeremo il tema Magento Blank.

Per creare un nuovo tema usando Blank, dovrai personalizzarlo. Tuttavia, apportare modifiche al tema predefinito renderà le modifiche sovrascritte, ogni volta che viene aggiornata la nuova versione dei file predefiniti. Una valida alternativa a questo problema consiste nel creare un nuovo tema personalizzato che erediti la funzionalità dal tema predefinito o da qualsiasi tema esistente.

In parole povere, creeremo un tema figlio personalizzato che eredita la funzionalità del tema esistente. In questo modo, ti aiuterà a superare la seccatura di creare un nuovo tema autonomo da zero. Quindi, invece di copiare un'ampia serie di file e modificarli, dovrai solo sovrascrivere ed estendere i file esistenti all'interno del tema principale.

Iniziamo ora a discutere i passaggi necessari per creare un nuovo tema Magento (cioè quello uno per uno.

Comprensione del processo di creazione del tema

In questa sezione, tratteremo della creazione di file che potrebbero aiutare nella creazione del tema. Inoltre, daremo anche un'idea del processo di aggiunta di un logo al tema o di come possiamo configurare le immagini.

Passaggio 1: crea una directory di temi

Il primo passaggio che devi eseguire durante la creazione di un tema personalizzato richiede la creazione della struttura della directory del tema. Per fare ciò, segui i punti chiave indicati di seguito:

1. Accedi e apri il tuo backend di amministrazione di installazione di Magento, quindi passa a dir>/app/design/frontend.

2. La maggior parte degli e-store offre prodotti di diversi fornitori, quindi è importante avere una directory dei fornitori separata, in cui sono elencati tutti i prodotti offerti dai fornitori. Quindi, il tuo prossimo passo è creare una nuova directory con il nome simile al nome del tuo fornitore: /app/design/frontend/<Vendor>.

Nel caso in cui stai utilizzando un tema Magento integrato, devi fare riferimento alla directory: app/design/frontend/Magento

3. Ora che hai creato la directory del fornitore, crea un'altra directory con il nome simile a quello del tuo tema nella directory del fornitore, come mostrato di seguito.

app/design/frontend/

>> <Fornitore>/

>>…<tema>/

>>…

Passaggio 2: comprensione della dichiarazione del tema

Una volta che hai finito di creare la struttura della directory del tuo tema, dovrai creare theme.xml per definire il layout del tuo tema. Il file xml deve contenere almeno il nome del tema figlio e il nome del tema principale. Tutti gli aggiornamenti apportati al layout del tema verranno archiviati in questo file.

Ci sono due attività che il layout del tema deve eseguire.

• Per prima cosa aggiungi o copia i contenuti dal theme.xml corrente nella directory del tuo tema app/design/frontend/<Vendor>/<theme>

• In secondo luogo, per rendere visibile il tuo tema, devi configurarlo. A tale scopo, utilizzare il seguente esempio:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework /Config/etc/theme.xsd”>

<title>Nuovo tema</title> <!– il nome del tuo tema –>

<parent>Magento/blank</parent> <!– il tema principale, nel caso in cui il tuo tema erediti da un tema esistente –>

<media>

<preview_image>media/preview.jpg</preview_image> <!– il percorso dell'immagine di anteprima del tema –>

</media>

</tema>

Per assicurarti che il tuo tema sia riconosciuto dall'applicazione Magento, accedi al pannello di amministrazione di Magento e controlla se puoi vedere il tema nella griglia sotto Contenuto-> Design -> Temi.

Spillo

Passaggio 4: configurare le immagini (modifica delle dimensioni delle immagini del prodotto)

Quando carichi le immagini del prodotto, se le sue dimensioni superano quelle del tema predefinito, dovrai aggiungere un file view.xml. Questo file contiene i dettagli di configurazione delle dimensioni dell'immagine del prodotto visualizzate nella vetrina. Vediamo ora i passaggi da seguire per configurare le immagini:

1. Accedi al tuo server Magento, tuttavia, dovrai accedere al server come utente con un determinato set di autorizzazioni. È necessario disporre delle autorizzazioni per creare directory e file nella directory dell'installazione di Magento.

2. Nella cartella del tema, crea la directory etc.

3. Quindi, copia il file view.xml dalla "directory etc" del tuo tema esistente (diciamo, ad esempio, dal tema Blank) nella directory etc appena creata del tuo tema personalizzato.

4. Infine, devi configurare tutte le dimensioni dell'immagine del prodotto utilizzate nel front-end del tuo negozio in view.xml. Ad esempio, puoi scegliere di rappresentare le immagini dei prodotti nella visualizzazione griglia delle categorie di prodotti come quadrati, assegnandogli una dimensione di 250 x 250 px. Diamo un'occhiata a come sarebbe la configurazione dell'immagine:

<var name="category_page_grid:type">immagine_piccola</var>

<var name="category_page_grid:width">250</var>

<var name="category_page_grid:ratio">1</var>

<var name="category_page_grid:height">250</var>

Passaggio 5: crea directory per i file statici del tuo tema

Proprio come qualsiasi tema Magento standard, il tuo tema conterrà anche più file statici, inclusi stili, JavaScript, immagini e altri file. Assicurati di archiviare ogni tipo di file in una sottodirectory "web" separata all'interno della cartella del tema, come segue:

app/design/<area>/<Vendor>/<tema>/

>> web/

>> css/

>> fonte/

>> caratteri/

>> immagini/

>> js/

Nota: tutti i file statici del tema generale devono essere archiviati in …<theme>/web/images, ad esempio, il logo del tuo tema deve essere archiviato in …<theme>/web/images. C'è una maggiore possibilità che il tuo tema includa alcuni file specifici del modulo. Questi file sono archiviati nelle sottodirectory come …/<theme>/<Namespace_Module>/web/css e nelle relative sottodirectory. Tuttavia, questo è un argomento di discussione completamente nuovo. Quindi, per ora salteremo questo argomento.

Applicare e configurare il tuo tema in Magento

Questa sezione ti farà sapere come applicare il tuo tema al negozio Magento. Per farlo, segui semplicemente i passaggi elencati di seguito:

Passaggio 1: apri il pannello di amministrazione dell'installazione di Magento e vai su CONTENUTI-> Design-> Temi. Assicurati di poter vedere il tuo tema nell'elenco dei temi fornito.

Passaggio 2: dal tuo pannello di amministrazione, visita Negozi -> Configurazione -> Design.

Passaggio 3: dal campo a discesa "Ambito", scegli la visualizzazione del negozio a cui desideri applicare il tuo tema.

Passaggio 4: quindi, dalla scheda Tema "Design", scegli il tema che hai appena creato elencato nel menu a discesa Tema design.

Passaggio 5: infine, fai clic sull'opzione "Salva configurazione" per applicare le modifiche apportate finora. E una volta fatto, assicurati di ricaricare le pagine del tuo negozio.

Nota: nel caso in cui la memorizzazione nella cache sia abilitata nel tuo back-end Magento, è importante svuotare la cache oppure potresti non essere in grado di vedere le modifiche che hai appena applicato.

Conclusione

Spero che la lettura di questo tutorial serva come guida di base che ti aiuterà a capire il processo di creazione di un tema personalizzato in Magento 2.

Biografia dell'autore:

Isabella Morris è attualmente impiegata con una rinomata società di sviluppo Magento personalizzata ed è anche impegnata nella scrittura di articoli informativi sui migliori strumenti e trucchi per lo sviluppo di Magento. I suoi scritti si sono rivelati utili per un gruppo più ampio di sviluppatori Magento in tutto il mondo.