Share
Cosa starai creandoIn questa serie di tutorial, svilupperemo un tema Magento da zero. Poiché Magento è un enorme CMS di eCommerce con un sacco di opzioni di personalizzazione, i temi di Magento sono generalmente considerati molto complessi da sviluppare, ma spero che una volta che seguirai questa serie, acquisirai molta familiarità con la terminologia di Magento e come vengono sviluppate le cose . Cercherò di spiegare tutto mentre procediamo, sviluppando ogni componente della pagina passo dopo passo.
Il primo passo verso lo sviluppo di Magento è avere una copia di Magento installata sul tuo server locale. Puoi avere una copia di Magento installata anche sul tuo server web, ma ciò rallenterà solo la tua velocità di sviluppo. Quindi consiglio sempre di usare un server locale per lo sviluppo, e una volta completato lo sviluppo e testato il prodotto finale, solo allora dovresti caricarlo sul tuo server.
Non reinventerò la ruota spiegando come dovresti installare Magento sul tuo server locale. Ci sono molti buoni articoli disponibili su internet per questo. Puoi anche trovare gli articoli di installazione di Magento sul nostro sito, come questo articolo di Tuts +, che ti guiderà attraverso come installare Magento sul tuo server locale.
Devi anche installare i dati di esempio di Magento, durante l'installazione di Magento. Questi dati di esempio aggiungeranno molti cataloghi, prodotti, recensioni, ecc. E attraverso di esso possiamo testare diversi scenari durante lo sviluppo.
Una volta che hai finito di installare Magento, il passo successivo è avere gli strumenti per lo sviluppo pronti. Puoi utilizzare l'editor di codice o IDE di tua scelta qui. Qualsiasi editor di codice con cui ti trovi bene funzionerà bene qui. Se non hai mai usato un editor di codice, ti consiglio di installare Notepad ++, poiché è un editor di codice molto leggero, facile da usare e gratuito.
Avremo anche bisogno di un ispettore degli elementi per controllare e modificare gli stili CSS sulle pagine web. Se usi Firefox, puoi installare l'estensione Firebug per quello. Tuttavia, se utilizzi Chrome, Chrome Web Inspector funziona alla grande. Viene fornito con Chrome, quindi non devi installare alcuna estensione per quello. Per gli scopi di questa serie, utilizzerò Chrome Web Inspector per eseguire il debug e modificare gli stili CSS.
Ho sviluppato alcuni HTML per lo scopo di questa serie. L'HTML contiene i modelli e gli elementi di progettazione che sono utilizzati principalmente nei temi di eCommerce, come il carrello superiore, il cursore dell'intestazione, il selettore di valuta e lingua, ecc. Trasformeremo gradualmente questo HTML in un tema Magento funzionante. Il pacchetto del tema HTML è allegato qui per il download.
Prima di immergerci nella fase di sviluppo reale, ti consiglio vivamente di passare attraverso questa serie di articoli Tuts + sullo sviluppo del tema Magento. Questa serie di tre tutorial ti renderà familiare la teoria alla base del tema Magento e dei suoi principi di base. Questa conoscenza dello sviluppo del tema Magento sarà particolarmente utile prima di iniziare a sporcarti le mani con la vera codifica a tema.
Ora che dovresti avere un'installazione Magento funzionante e strumenti per lo sviluppo pronti, e hai seguito le basi dello sviluppo del tema leggendo la serie raccomandata sopra, fammi brevemente familiarizzare con le cartelle in cui modificheremo i file.
Quando apri la cartella principale di Magento, vedrai un elenco di cartelle lì sotto. Fuori da queste cartelle, le cartelle in cui modificheremo i file sono solo le App cartella e il pelle cartella.
A volte potremmo usare anche la cartella js per posizionare i file di libreria JavaScript come jQuery, se non ci sono già. Vai avanti e familiarizza con le cartelle contenute nelle cartelle app e skin, prima di iniziare a seguire i passaggi nei prossimi articoli di questa serie.
Abbiamo bisogno di modificare alcune impostazioni in Magento, che ci aiuteranno a sviluppare più velocemente il nostro tema Magento e ci faranno sapere se qualcosa va storto in Magento.
Prima di tutto, disabiliteremo Magento Cache. Per quello, vai a Sistema> Gestione cache, e selezionare tutti i tipi di cache. Dalle azioni selezionate disattivare, e inviare.
Una volta disattivate tutte le cache, il passaggio successivo consiste nel reindicizzare i dati. Per quello, vai a Sistema> Gestione indice. Seleziona tutti gli indici e seleziona le azioni Reindex Data, e inviare.
Ora, abiliteremo i registri e i suggerimenti sui blocchi in Magento. Vai a Sistema> Configurazioni, e nella barra laterale sinistra, l'ultimo elemento sarà Sviluppatore. Clicca su quello Nella pagina successiva, da Registra le impostazioni, abilitare i log e premere Salva config pulsante in alto a destra.
Successivamente, nella parte superiore della barra laterale sinistra, vedrai il Ambito di configurazione corrente seleziona la barra. Selezionare Sito Web principale da li.
Ora dal mettere a punto sezione, abilitare Suggerimenti sul percorso del modello, e colpisci il Salva config pulsante di nuovo.
Infine, vai alla directory principale di Magento e apri il file index.php da lì. Alla riga 77, decommenta questa riga di codice:
ini_set ( 'display_errors', 1);
Questo è tutto per ora. Potresti non rendertene conto, ma abbiamo creato una solida base per lo sviluppo del tema reale nei prossimi tutorial di questa serie. Alla fine, ti incoraggerò nuovamente a seguire da vicino la serie di sviluppo di temi Magento che ho suggerito sopra, se non l'hai già fatto.
Nel prossimo tutorial, creeremo la struttura delle cartelle del nuovo tema. Copiremo i file CSS, JS e di immagini da HTML nel nostro tema e creeremo il file local.xml del nostro tema per assicurarci che il nostro tema rimandi a questi file.
È tutto, e spero che seguirai con noi nei prossimi tutorial.
Accentsconagua