Share
Magento è una piattaforma di e-commerce incredibilmente potente. In questa miniserie impareremo come iniziare con la piattaforma, conoscere i termini, impostare un negozio e tutti gli aspetti correlati e imparare finalmente come personalizzarlo per renderlo nostro.
In questa terza parte, ci concentreremo sul processo dietro il tema di Magento: come installare temi, i vari concetti che devi capire per creare un tema e la struttura generale dei file. Eccitato? Iniziamo!
Nell'ultima parte, abbiamo visto come installare il tuo negozio Magento in modo che fosse pronto per l'implementazione, compreso come impostare i tuoi prodotti, le categorie di prodotti, le tasse, la spedizione, i gateway di pagamento e molti altri.
Oggi guarderemo le basi del tema Magento. Impareremo l'idea generale dei temi di Magento, le varie terminologie dietro di esso e la struttura di base di un tema.
Per prima cosa, il tema Magento non è così difficile come si pretende. È un po 'diverso da come WordPress o Joomla gestiscono i temi, sì, ma sicuramente non è difficile. Tutto quello che devi sapere è un po 'sapere come iniziare a lavorare come un professionista!
Per renderlo brutalmente semplice, un tema Magento è una raccolta di file PHTML, CSS e JS messi insieme insieme ai file XML per definire la struttura. Un file PHTML è costituito da normali tag HTML intercalati dal codice PHP per la funzionalità. Nel caso in cui sei confuso, un blocco casuale di codice è simile al seguente:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('toplink')?>
Vedere? È davvero semplice una volta che ti avvolgi in testa. Se hai lavorato con la creazione di temi per altri sistemi, ottimo, lo raccoglierai piuttosto rapidamente. In caso contrario, non preoccuparti, ti guiderò attraverso l'intero processo.
Nota che in Magento, la parte anteriore e quella posteriore sono completamente separati dalla pelle. Presumo che la maggior parte di voi non avrà bisogno di scorticare il backend, quindi mi limiterò a considerare il front-end da solo.
Prima di iniziare, un certo numero di persone mi ha contattato tramite Twitter / mi ha inviato via email chiedendo la stessa domanda: come installare un tema. Parlerò prima di tutto.
Esistono due modi per installare un tema Magento:
Parlerò brevemente di entrambi.
Il primo metodo è quello a cui sei abituato. Scarica un tema, caricalo e fallo. Ma dovrai sapere dove caricare perché funziona in modo leggermente diverso da come potresti pensare.
I temi sono confezionati in modo diverso a seconda della fonte, ma al suo interno sono presenti 2 cartelle:
Puoi semplicemente trascinarli nella root dell'installazione e fartelo unire con i dati esistenti.
Se per caso, ottieni il tema impacchettato come una raccolta di 3 cartelle, non ti preoccupare.
Entra la cartella contenente i file PHTML e quella contenente i file XML root / app / design / frontend / default / THEMENAME mentre quello contenente i file CSS, le immagini e le altre risorse vanno dentro root / pelle / frontend / default / THEMENAME.
In questo momento, questo è tutto ciò che devi fare. Spiegherò perché ogni parte va in una posizione specifica più avanti. Puoi attivare il tuo tema ora.
Navigare verso Sistema -> Progettazione e fare clic su Aggiungi modifiche al design.
Scegli il tema che desideri, fai clic su Salva e il gioco è fatto.
L'uso di Magento Connect è più semplice a condizione che sia disponibile lì. Navigare verso Sistema -> Magento Connect -> Magento Connect Manager.
Dopo aver effettuato l'accesso, ti verrà chiesto di inserire la chiave di estensione del tema che desideri installare. Inserisci la chiave e attendi che il sistema faccia la sua cosa.
Dopo aver scaricato i file necessari e averli posizionati dove devono essere, puoi ora attivare il tema come prima.
Quando lavori con Magento, ci sono alcuni concetti relativi al design che ti servono per comprendere prima di poter iniziare a modificare il tema predefinito.
Layouts è un'idea intelligente e nuova in Magento. Questo sistema consente di definire la struttura di una pagina, qualsiasi pagina, attraverso tag XML opportunamente formati.
In sostanza, è possibile dettare quale sezione della pagina va dove cambiando solo alcuni attributi in un file XML. Ogni vista o modulo ottiene il suo layout specificato dal proprio file XML.
Layout in Magento è un grande argomento e solo pochi paragrafi qui non renderanno giustizia. Lungo la strada, coprirò tutte le informazioni necessarie per costruire il tuo tema insieme a un articolo dettagliato sui layout per coprire tutte le cose avanzate che puoi fare con questa funzionalità.
Per ora, se sei interessato, ecco un piccolo snippet per avere un'idea di quali sono i layout:
top-contenitore
I modelli sono costituiti da file PHTML riempiti con normali tag HTML e codice PHP. Simile a WordPress, si utilizza un numero di metodi predefiniti per specificare l'output. Proprio come con altri sistemi popolari, sezioni importanti come l'intestazione, il piè di pagina e la barra laterale sono collocati in file separati e inseriti quando necessario.
Puoi avere diversi modelli per ogni vista di Magento. Ad esempio, puoi avere un codice diverso per un elenco di desideri o una pagina di checkout invece di utilizzare lo stesso look per l'intero sito.
Ecco un pezzo di un modello per i curiosi:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> ridimensiona (100, 100); ?> "<?php echo $this->htmlEscape ($ this -> getImageLabel ($ _ product, 'small_image'))?>")
Sembra un po 'confuso, lo so ma spogliamo le parti di PHP e vedrai quanto è simile agli altri sistemi.
Le skin non sono altro che i file CSS, i file JavaScript, le immagini e altre risorse che stai usando nel markup per creare il tuo design. Essenzialmente tutte le risorse non PHP vanno qui. Caratteri per l'incorporamento? Qualche demo flash sfacciata? Un pezzo spettrale di SVG? Tutti quelli rientrano in questa categoria.
I blocchi sono gli elementi costitutivi di un tema e consentono di creare il tema in modo modulare.
Come parte dei layout, questo costituisce la spina dorsale del forte sistema di templating di Magento. I blocchi sono essenzialmente sezioni che puoi spostare usando l'XML sopra menzionato per modificare il modo in cui viene presentata una pagina.
I blocchi devono fare riferimento a un file modello pertinente in modo che Magento possa estrarre il file richiesto. Un po 'confuso? Ecco un esempio.
Definiamo essenzialmente un nuovo blocco, quale modello caricare, specificando il tipo di blocco e un nome. È un po 'diverso da quello a cui siamo abituati, ma credimi, lo otterrai una volta iniziato lo sviluppo. Ad ogni modo, tratterò un po 'più dettagliatamente i blocchi quando costruiremo il nostro tema e ancora di più eseguirò una scrittura completa su layout e blocchi lungo la linea, quindi non preoccuparti se non lo completa senso ora. Basta avere un'idea generale degli argomenti a portata di mano.
Un blocco strutturale definisce la struttura di base di una pagina. Pensa all'intestazione HTML, al piè di pagina e alle sezioni a parte. Sono stati creati per il solo scopo di delimitare visivamente un design.
Dai documenti Magento I blocchi di contenuti sono simili ai normali elementi DIV contenitore / wrapper utilizzati in un disegno. Proprio come con il design, ogni blocco di contenuto contiene una funzionalità o uno scopo specifici. Un menu nella tua intestazione, un callout nella barra laterale, i chiarimenti legali nel footer passano tutti in blocchi di contenuti separati.
Ricorda, i blocchi di contenuti sono ancora blocchi e mappano su un file PHTML specifico per generare e visualizzare i suoi contenuti HTML.
Dai documenti Magento Citato infine perché da una prospettiva di tematizzazione rigorosa di un principiante, questo non dovrebbe entrare in gioco per un bel po '.
Per essere semplice, un'interfaccia è una raccolta di temi denominata che puoi sfruttare per definire l'aspetto del tuo negozio.
Proprio come altri potenti software, Magento ha una struttura di file complessa. Tuttavia, per quanto riguarda i temi, è possibile restringere notevolmente l'attenzione.
Ecco le posizioni su cui lavorerai durante la creazione di un tema:
Magento richiede che il tuo contenuto PHP eseguibile sia collocato separatamente dalle tue risorse statiche ed è per questo che hai una directory skin separata sulla tua radice. Anche se all'inizio potrebbe sembrare controproducente, una volta che hai adattato leggermente il tuo flusso di lavoro, ti renderai conto che questa mossa aumenta la sicurezza generale della tua installazione ...
Tuttavia, un tema è tipicamente suddiviso nelle seguenti parti.
E abbiamo finito! Abbiamo esaminato i concetti di base alla base del tema Magento e la gestione dei temi. Spero che questo ti sia stato utile e l'hai trovato interessante. Dato che questo è un argomento piuttosto nuovo per molti lettori, osserverò attentamente la sezione dei commenti in modo da sentirci dentro se hai dei dubbi.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!
Finora, abbiamo trattato in modo strettamente teorico con la piattaforma. Una necessità considerando le dimensioni e lo scopo di Magento. Ma ora che abbiamo tutte le basi inchiodate possiamo passare alla parte divertente.
Ricorda come quando crei una skin per un sistema CMS / generico parti sempre da uno scheletro e costruisci verso l'esterno? Ti piace Kubrick per WordPress? Se pensavate che ne avremmo preso uno e avremmo iniziato a costruire un tema, pensavate di aver sbagliato. No signore. Costruiremo una pelle personalizzata, nuda e ossea simile alla pelle bianca completamente da zero. Una pelle che puoi usare come base per la tua pelle.
Tutto questo e altro nelle prossime parti. Rimanete sintonizzati!
Sapevi che il tuo quartiere amichevole ThemeForest vende temi Magento di qualità premium? Se sei un abile sviluppatore Magento che cerca di trarre profitto dai tuoi sforzi, o un acquirente, sperando di costruire il tuo primo negozio di e-commerce, ti abbiamo coperto!
Accentsconagua