Share
Sei un principiante di Magento? Vuoi creare un tema tutto tuo? Se è così, questo articolo è scritto appositamente per te.
Per iniziare con il design e la personalizzazione del tema Magento, è molto importante avere una buona conoscenza della terminologia di design di Magento e dei concetti di base del flusso di controllo di Magento.
Prima di iniziare, vale la pena chiarire alcune cose sulle versioni di Magento perché l'applicazione ha due diversi gusti: Edizione comunitariae Edizione Enterprise. Questo articolo supporta le seguenti versioni di Magento:
Per capire tutto ciò che stiamo coprendo, devi aver già installato e una copia funzionante di Magento (che puoi ottenere da qui). Se hai già una conoscenza del cruscotto Magento, probabilmente seguirai più facilmente questo tutorial.
In caso contrario, nessun problema. Copriremo tutti i dettagli in tutto l'articolo.
Prima di approfondire la terminologia attuale del design, è molto importante capire il concetto di gerarchia del negozio. Una delle caratteristiche principali di Magento è che supporta la creazione e la manipolazione di più negozi e punti vendita in un'unica configurazione.
Diamo un'occhiata a questi termini di base e andiamo più in dettaglio:
Qui puoi vedere che un sito web può avere un negozio o più negozi e un negozio può avere una vista negozio o più negozi. Uno scenario predefinito sarebbe il sito Web principale, il negozio principale del sito Web e la visualizzazione archivio predefinita.
Se hai già installato e configurato Magento, vai al pannello di amministrazione di Magento quindi punta a Sistema scheda. In quella pagina, nella parte in alto a sinistra nel menu in alto, puoi vedere il Ambito di configurazione correntediscesa - questo mostra lo scenario predefinito del tuo negozio Magento.
Diamo un'occhiata a diversi scenari per ottenere una comprensione più chiara del sito Web, dei negozi e delle visualizzazioni degli store.
Diciamo che vuoi vendere abbigliamento per uomo e donna. Come avvio, non vuoi offrire cataloghi separati o supporto multilingue per il tuo negozio. In tal caso, lo scenario includerebbe un sito Web, un negozio e una vista negozio predefinita.
Ora dì che vuoi vendere abbigliamento per uomo e donna in negozi separati e vuoi condividere gli ordini dei clienti e le informazioni sul carrello dei clienti. In questo modo, i clienti possono creare un account presso uno qualsiasi dei negozi e avere comunque accesso a tutte le loro informazioni in un'unica posizione.
Nota che non vuoi ancora supportare più lingue. In questo caso, questo scenario sarebbe un sito web: un negozio di abbigliamento maschile, un negozio di abbigliamento femminile e un negozio predefinito.
Man mano che la tua azienda cresce, potresti volerlo ampliare in modo tale da offrire un negozio di accessori per complimentarmi con il tuo negozio di abbigliamento.
Inoltre, in ogni negozio, si desidera condividere le informazioni sui clienti e si desidera supportare più lingue. Questo scenario include due siti Web e due negozi:
Ciò si traduce in due visualizzazioni del negozio: una vista negozio inglese e una vista negozio spagnolo.
Le possibilità di creare l'istanza di un sito Web, un negozio e le visualizzazioni degli store dipendono dalle tue esigenze. Puoi configurare tanti siti Web, negozi e archiviazioni come desideri Pannello di amministrazione di Magento> Sistema> Gestisci negozi.
Abbiamo visto che Magento ci consente di configurare più negozi in una singola installazione Magento. In base a ciò, ci consente anche di dare un aspetto diverso a diversi siti Web, negozi e punti vendita. Questo è possibile attraverso Temi. Possiamo creare tanti temi che vogliamo e possiamo anche applicare temi diversi a negozi diversi.
UN Pacchetto di design si riferisce alla raccolta di vari temi. Vai alla tua directory Magento app / design / frontend.Qui puoi vedere il pacchetto "Base". Questo è il pacchetto predefinito fornito con Magento. Questo pacchetto è denominato diversamente all'interno di ciascuna versione di Magento. Ad esempio, nella Community Edition, questo pacchetto chiamato è "Base", nella Pro Edition, questo pacchetto chiamato è "Pro" e in Enterprise Edition il suo nome è "enterprise".
Oltre a questo, è possibile aggiungere il proprio pacchetto sotto fine frontaledirectory. Nelle versioni precedenti di Magento, i pacchetti di progettazione sono riferiti alle interfacce.
Temi sono raccolte di file, cioè modelli e skin, che renderanno il layout reale sul front-end. In base alle nostre esigenze, possiamo modificare il layout modificando e creando nuovi file di modelli in temi particolari.
Un pacchetto di progettazione può avere più temi correlati, ma è consigliabile che ogni pacchetto abbia un tema predefinitoper il rendering di default quando Magento non riesce a trovare un altro tema.
Ogni tema in Magento ha due tipi di directory:
Accentsconagua
css file relativi a quel particolare tema.js file relativi a quel particolare tema.Magento ci consente di creare il maggior numero di variazioni del tema secondo necessità. Quando si lavora con più negozi, è possibile assegnare diverse varianti del tema a diversi negozi. Puoi creare variazioni di temi copiando il tema predefinito in un nuovo tema e applicando variazioni CSS minori a quel nuovo tema.
Ad esempio, supponiamo che tu abbia creato due negozi che condividono le stesse informazioni ma desideri che il cliente percepisca una differenza in termini di colore e layout di entrambi i negozi. In tal caso, puoi creare due varianti di tema, assegnandole a ciascuna di esse css, js, e immagini e quindi applicarli ai singoli negozi.
Come accennato in precedenza in questo articolo, è consigliabile avere un tema predefinito in ogni pacchetto di progettazione. Perché quando non hai assegnato alcun tema al tuo negozio, Magento cercherà il tema predefinito come per il sistema di ripiego del tema(di cui parleremo nella prossima sezione). Se non trova il tema predefinito, restituirà un errore 404.
Quando si lavora con qualsiasi nuova installazione di Magento, utilizzerà il pacchetto "Base" che include anche il tema predefinito. Per i file richiesti che non si trovano nel tema predefinito, verranno visualizzati nel tema predefinito del pacchetto base.
È molto importante che il tema predefinito contenga tutti i file richiesti.
Quando lavori con i temi di Magento, è importante capire il sistema di fallback del tema Magento; altrimenti, potresti perderti all'interno della directory dei temi di Magento quando cerchi di scoprire quali blocchi stanno visualizzando i file del tema.
Ad esempio, se il tema personalizzato richiede un file, ad esempio header.phtml, che renderà la tua intestazione, Magento cercherà il file usando il seguente diagramma:
Come da diagramma, il sistema di fallback cercherà prima nella directory dei temi personalizzati. Se non viene trovato, cercherà il tema predefinito nello stesso pacchetto del tema personalizzato. Se non è presente anche nel tema predefinito del pacchetto di progettazione, verrà esaminato il tema predefinito del pacchetto base. Se Magento non è in grado di trovare il file specifico attraverso questo processo, verrà visualizzato un messaggio di errore.
Nelle precedenti versioni di Magento, il sistema di fallback del tema non includeva il pacchetto Base come parte finale del sistema fallback. Nelle versioni precedenti, il sistema fallback cercava solo un pacchetto specifico per il tema.
Includendo il pacchetto Base nel sistema fallback, Magento ci consente di mantenere più facilmente il nostro tema con solo i file richiesti. Ad esempio, supponiamo che desideri applicare un aspetto completamente diverso ai tuoi due negozi, ad eccezione delle pagine dell'account cliente. Questo è possibile creando due varianti di temi e sfruttando il sistema di fallback.
Per raggiungere questo obiettivo è necessario creare due varianti di tema e un tema predefinito che contenga tutti i file richiesti. In tal modo, il pacchetto di progettazione contiene un tema predefinito e due varianti di tema.
Le due varianti del tema dovrebbero contenere tutti i file personalizzati per le pagine dell'account cliente (poiché sono comuni a entrambi i temi). In questo modo, quando Magento inizia a eseguire il rendering dei file dal tema specifico, eseguirà il ripristino delle pagine dell'account cliente del tema predefinito poiché non sono state definite nel nostro tema personalizzato.
Blocchi e Layout possono essere nuovi termini per te, ma per essere un designer Magento di successo, dovresti capire questi concetti.
I blocchi sono l'entità principale attraverso cui Magento esegue il rendering del layout front-end. Attraverso l'uso di blocchi, Magento differenzia diverse parti del layout. Fondamentalmente, ci sono due tipi di blocchi.
Blocchi strutturalisono il profilo principale di qualsiasi layout di front end in Magento.In genere, contengono la sezione Intestazione, Sinistra, Destra, Principale e Piè di pagina di un layout.
I blocchi di contenuto sono i blocchi reali che risiedono all'interno dei blocchi strutturali per produrre l'output visivo finale. Questi blocchi presentano la funzionalità specifica del blocco tramite HTML. L'elenco delle categorie, l'elenco dei prodotti, l'elenco delle sottocategorie, i tag dei prodotti, le sezioni dei prodotti della home page e così via sono i blocchi di contenuto all'interno del blocco strutturale.
Infine, i layout sono i file XML che mappano la pagina con blocchi strutturali e blocchi di contenuto. Ogni file di layout contiene i tag, attraverso i quali è possibile controllare blocchi particolari.
Ogni modulo Magento ha file di layout separati in modo da poter gestire facilmente i layout specifici del modulo.
Questo articolo mira a fornire un inizio completo su dove iniziare con lo sviluppo del tema Magento.
Hai ancora domande? Non esitare a lasciare commenti, domande o altri commenti generali nei commenti!
