Share
In questa serie, daremo un'occhiata alle basi dello sviluppo dei temi di Magento.
Magento si è guadagnato la reputazione di essere una delle piattaforme di eCommerce più flessibili e potenti disponibili oggi.
La documentazione per questo è scarsa lasciando agli sviluppatori un dilemma da risolvere. Vale a dire che è relativamente semplice una volta che si ha familiarità con le basi particolarmente se sei qualcuno che sta bene con lo sviluppo front-end.
Prima di andare avanti è importante capire lo scopo di questa serie e dove ci dirigeremo nelle prossime settimane.
Questa serie è rivolta ai principianti e tratterà le basi dello sviluppo del tema front-end. Se sei uno sviluppatore Magento avanzato, questa potrebbe non essere la serie adatta a te.
In questa serie, tratteremo i seguenti argomenti:
Alla fine della serie sarete ben attrezzati per avere almeno una solida conoscenza dei principi del tema Magento e sarete in grado di creare e modificare i vostri temi personali come un professionista!
Detto questo, siamo pronti per iniziare.
Per prima cosa, dobbiamo capire la Gerarchia di Magento e dove il nostro tema cade a posto. Ci sono centinaia di cartelle e migliaia di file, troppi per elencarli, mi concentrerò solo su quelli con cui dobbiamo lavorare.
app / design / frontend / base / default / app / design / frontend / default / default / app / design / frontend // / skin / frontend / base / default / skin / frontend / default / default / skin / frontend / / /
Magento, nel suo nucleo, ha due cartelle App e pelle che corrispondono tra loro. Il App la directory contiene i file che controllano il rendering dei modelli di pagina, la struttura. Il pelle la directory contiene i file che controllano l'aspetto del sito Web come CSS, JavaScript e immagini.
All'interno di una sottocartella di App e pelle dove sono reperibili i nostri pacchetti e temi, una tipica installazione di Magento viene fornita con due pacchetti base e predefinito.
Quindi, prima di andare oltre, è importante capire quali sono i pacchetti e i temi. Se lo facciamo bene, tutto il resto andrà a postopiacevolmente.
UN pacchetto è una raccolta di temi correlati, non c'è limite al numero di pacchetti che possiamo avere e dobbiamo avere almeno un pacchetto presente. Magento viene fornito con a speciale pacchetto, se vuoi, chiama base. È un repository per rendere disponibili i file di base di Magento sul front-end. Devi mai modifica il base file del pacchetto, fallo a tuo rischio e pericolo - più su questo più tardi!
UN tema d'altra parte è una sottocartella diretta di un pacchetto che contiene i file che compongono il tuo negozio, ancora una volta non c'è limite su quanti temi possiamo avere all'interno di un pacchetto. Un tema può appartenere solo a un pacchetto e per convenzione ogni pacchetto deve contenere un tema denominato "default" che è il tema principale per quel pacchetto.
Il base il pacchetto contiene solo un tema chiamato predefinito. Viene fornito in bundle con ogni installazione di Magento e contiene i file front-end che fanno girare il nostro negozio. Ci sono un paio di regole che dobbiamo accettare con il pacchetto base.
La prima regola, come ho detto prima, non è quella di modificare questi file, questo significa entrambi app / design / frontend / base / e pelle / frontend / base / dovrebbero essere usati solo come riferimento. I file che devono essere modificati devono essere copiati da base alla tua pacchetto / a tema. Ci sono un paio di ragioni per questo che spiegherò.
Questi file sono ciò che rende i file principali di Magento app / code / core / disponibile per il front-end. Semplicemente non dovremmo modificare i file core, questa teoria non si applica solo su Magento ma si applica anche su altre piattaforme, tra cui WordPress.
Il secondo è che quando si aggiorna Magento probabilmente sovrascriverà il file base file del pacchetto. Quindi tutto il tuo duro lavoro e le modifiche per ottenere il tuo sito Web in cima alla lista saranno tutti andati. A meno che tu non abbia fatto un backup, ce l'hai praticamente!
La seconda regola sono i file nel base il pacchetto fa parte del sistema fallback, che spiegherò in seguito. In breve, Magento tornerà sui file core trovati in base dopo utilizza il pacchetto e il tema. Quando ricade dovrebbe essere sul file originale intatto e non su una versione modificata.
La terza regola è non creare temi all'interno del base pacchetto.
In sintesi, usa solo base per riferimento e se è necessario modificare un file copiarlo sul proprio pacchetto / a tema. Se hai mai bisogno di modificare base fallo a tuo rischio e pericolo e tieni traccia delle tue modifiche in quanto potresti aver bisogno di ripristinarle manualmente dopo gli aggiornamenti, altrimenti lascialo stare da solo!
Il predefinito il pacchetto viene di nuovo incluso in ogni installazione Magento, ma questa volta ha più temi assegnati. A partire dalla versione 1.8.1.0 della comunità, ha quattro temi diversi di cui sono:
Proprio come il base pacchetto le stesse regole si applicano qui. I temi in predefinito il pacchetto è essenzialmente puramente a scopo dimostrativo. Ideale per negozi dimostrativi o se vuoi mostrare cosa è capace Magento per i tuoi clienti, è una configurazione rapida.
Magento fa affidamento su una logica di fallback per rendere i temi più facili da mantenere e più facili da aggiornare. Ci consente di modificare e gestire solo i file di cui abbiamo bisogno all'interno del nostro tema. Se non abbiamo bisogno di modificare il file non ne abbiamo bisogno nel nostro tema, il file verrà prelevato da altrove. Per spiegare questo in dettaglio abbiamo bisogno di un esempio di vita reale.
Diciamo che abbiamo il nostro sito Web che è configurato per utilizzare il nostro pacchetto e il tema in questo modo:
app / design / frontend / our_package / our_theme / skin / frontend / our_package / our_theme /
Il nostro sito Web richiede un file modello denominato 1column.phtml e un file CSS chiamato styles.css ma Magento non è in grado di localizzare questi file all'interno del nostro tema. La logica di fallback di Magento ora cercherà il tema successivo nella gerarchia per i file e continuerà a cercare finché non individua i file richiesti.
Il seguente ordine dimostra la logica di fallback che Magento attraversa quando cerca i nostri file:
app / design / frontend / our_package / our_theme / template / page / 1column.phtml app / design / frontend / our_package / default / template / page / 1column.phtml app / design / frontend / base / default / template / page / 1column. phtml skin / frontend / our_package / our_theme / css / styles.css skin / frontend / our_package / default / css / styles.css skin / frontend / base / default / css / styles.css
Con questa logica di fallback, significa che possiamo avere una base di codice pulita mantenendo i nostri temi al minimo. Copia solo i file da base che abbiamo bisogno di apportare modifiche per lasciare i file fuori dal nostro tema. Se il nostro sito Web richiede il file e non lo abbiamo nel nostro tema, verrà individuato passando attraverso la logica di cui sopra.
Nota:Se dopo Magento ha passato la logica di fallback e il file ancora non può essere trovato o genera un errore di rendering se si trova nella directory dell'app o se è presente nella directory skin probabilmente getterà un file 404 non trovato.
Giusto, basta parlare, mettiamoci a fare le cose.
Per prima cosa creeremo il nostro pacchetto / tema. Inizieremo creando le seguenti cartelle:
app / design / frontend / jasonalvis / default / skin / frontend / jasonalvis / default /
Ora abbiamo un pacchetto chiamato jasonalvis e un tema chiamato predefinito, sentiti libero di rinominare il tuo pacco in base alle tue esigenze. Manterremo il nome del tema come predefinito come ogni pacchetto dovrebbe sempre avere un predefinito tema, ricordando anche questo predefinito fa automaticamente parte della logica di fallback.
Tutto ciò che resta da fare ora è abilitare il pacchetto tramite l'area di amministrazione di Magento. Una volta effettuato l'accesso, vai su sistema> configurazione. Da qui clicca su design dal menu a sinistra e quindi inserire il nome del pacchetto nel Nome del pacchetto corrente campo.
Mentre siamo qui sotto, c'è un avviso temi sezione. Qui è dove inseriremo il nostro nome del tema, ma perché lo stiamo usando predefinito non è necessario digitare nulla qui perché Magento cerca automaticamente questo nome.
A scopo dimostrativo diciamo che avevamo ad esempio un tema che volevamo utilizzare durante una vendita, avremmo creato il tema in questo modo:
app / design / frontend / jasonalvis / sale / skin / frontend / jasonalvis / sale /
Quindi tutto quello che dovremmo fare è abilitare il tema nell'area admin proprio come abbiamo fatto con il nostro pacchetto:
Così ora sai come configurare il tuo pacchetto / tema, ma qual è il migliore per quale scenario?
Beh, ci sono innumerevoli scenari là fuori e sono sicuro che ognuno di voi ne ha uno diverso. Diventa anche un po 'più complicato quando si ha un'installazione di Magento con una configurazione multi-store. Come regola generale, i temi contenuti nel pacchetto devono essere simili, altrimenti dovrebbero essere suddivisi in pacchetti.
Il predefinito il tema dovrebbe essere l'hub del sito e i temi aggiuntivi dovrebbero semplicemente essere adattamenti all'hub. Se cambi drasticamente ogni aspetto del sito in un tema, probabilmente lo giustifica in un pacchetto separato interamente.
Nota: Quando crei temi aggiuntivi all'interno del nostro pacchetto, non è necessario crearlo nelle directory dell'app e della skin, ma solo creare il tema in cui è pertinente. Prendiamo ad esempio il nostro tema di vendita, cambieranno solo lo stile, diversi schemi di colori, ecc. I file dei template non verranno modificati. Pertanto, crea il tema solo nella directory dello skin e modifica i file pertinenti come richiesto.
Detto ciò, chiamiamolo un giorno. Ora dovresti avere una solida conoscenza della gerarchia di Magento che dovrai mettere in pratica attraverso il resto della serie. Come sempre ogni domanda lascia un messaggio nei commenti qui sotto.
Nel prossimo articolo, daremo un'occhiata alle basi del layout XML. Nel frattempo, non esitare a inviarci domande, commenti o feedback di seguito!
Accentsconagua