Share
Ce veți creaÎn această serie de tutori, vom dezvolta o temă Magento de la zero. Pe măsură ce Magento este un CMS eCommerce enorm cu multe opțiuni de personalizare, temele Magento sunt de obicei considerate a fi foarte complexe de dezvoltat, dar sper că odată ce veți urma împreună cu această serie veți cunoaște foarte bine terminologia Magento și modul în care lucrurile sunt dezvoltate în ea . Voi încerca să explic totul pe măsură ce mergem, dezvoltând fiecare componentă a paginii pas cu pas.
Primul pas către orice dezvoltare Magento este să aveți o copie a Magento instalată pe serverul dvs. local. Puteți avea o copie a programului Magento instalat și pe serverul dvs. Web, dar acest lucru va încetini doar viteza de dezvoltare. Așadar, vă recomand să folosiți întotdeauna un server local pentru dezvoltare, iar odată ce ați finalizat dezvoltarea și ați testat temeinic produsul final, numai atunci ar trebui să îl încărcați pe serverul dvs..
Nu voi reinventa roata explicând cum ar trebui să instalați Magento pe serverul dvs. local. Există o mulțime de articole bune disponibile pe internet pentru asta. Puteți găsi, de asemenea, articole de instalare Magento pe site-ul nostru, precum acest articol Tuts +, care vă va ghida în modul de instalare a Magento pe serverul dvs. local.
De asemenea, trebuie să instalați datele de probă ale Magento, în timp ce instalați Magento. Aceste date de probă vor adăuga mai multe cataloage, produse, recenzii etc., prin care putem testa diferite scenarii în timpul dezvoltării.
Odată ce ați terminat instalarea programului Magento, următorul pas este să aveți pregătite instrumentele de dezvoltare. Puteți folosi editorul de cod sau IDE-ul ales de dvs. aici. Orice editor de cod cu care vă simțiți bine va funcționa bine aici. Dacă nu ați mai folosit niciun editor de cod înainte, aș recomanda instalarea Notepad ++, deoarece este un editor de cod foarte ușor, ușor de utilizat și gratuit.
De asemenea, vom avea nevoie de un inspector de elemente pentru verificarea și editarea stilurilor CSS pe paginile web. Dacă utilizați Firefox, puteți instala extensia Firebug pentru aceasta. Cu toate acestea, dacă utilizați Chrome, Chrome Web Inspector funcționează excelent. Se livrează cu Chrome, deci nu trebuie să instalați extensii pentru asta. În scopul acestei serii, voi folosi Chrome Web Inspector pentru depanarea și editarea stilurilor CSS.
Am creat câteva cod HTML în scopul acestei serii. HTML-ul conține modelele și elementele de design care sunt utilizate în principal în teme de eCommerce, cum ar fi cartul superior, glisorul cu antet, selectorul valutar și limbaj, etc. Noi vom transforma pas cu pas acest HTML într-o temă de lucru Magento. Pachetul tematic HTML este atașat aici pentru a putea descărca.
Înainte de a ne scufunda în faza de dezvoltare reală, aș recomanda cu insistență să treceți prin această serie de articole Tuts + pe tema dezvoltării temelor Magento. Această serie de trei tutori vă va familiariza cu teoria din spatele temei Magento și cu principiile sale de bază. Această cunoaștere a dezvoltării temelor Magento va fi deosebit de utilă înainte de a începe să vă murdăriți mâinile cu codarea temelor reale.
Acum că ar trebui să aveți o instalare de lucru Magento și instrumente pentru dezvoltare gata și ați trecut prin elementele de bază ale dezvoltării temelor, citiți seria recomandată mai sus, permiteți-mi să vă familiarizăm pe scurt cu dosarele în care editați fișierele.
Când deschideți dosarul rădăcină Magento, veți vedea o listă de directoare acolo. Din aceste dosare, folderele în care vom edita fișierele sunt doar cele aplicaţia și folderul piele pliant.
S-ar putea să folosim ocazional folderul js, de asemenea, pentru a plasa fișiere de bibliotecă JavaScript cum ar fi jQuery, dacă acestea nu sunt deja acolo. Mergeți mai departe și familiarizați-vă cu dosarele conținute în dosarele aplicației și ale pielii, înainte de a începe să urmați pașii din următoarele articole din această serie.
Trebuie să schimbăm câteva setări în Magento, ceea ce ne va ajuta să dezvoltăm mai repede tema Magento și ne va comunica dacă ceva nu merge în Magento.
Mai întâi de toate, vom dezactiva Magic Cache. Pentru asta, du-te la Sistem> Gestionare cache, și selectați toate tipurile de cache-uri. Din acțiunile selectați Dezactivați, și să prezinte.
Odată ce am dezactivat toate Cache-urile, următorul pas este re-indexarea datelor. Pentru asta, du-te la Sistem> Gestiune index. Selectați toate indexurile și selectați din acțiuni Reindex Data, și să prezinte.
Acum, vom permite jurnalele și blocarea sugestiilor în Magento. Mergi la Sistem> Configurații, iar în bara laterală din stânga, ultimul element va fi Dezvoltator. Faceți clic pe asta. Pe pagina următoare, de la Setări jurnal, activați jurnalele și apăsați Salvați Config butonul din dreapta sus.
Apoi, în partea de sus a barei laterale din stânga, veți vedea Domeniul actual de configurare selectați bara. Selectați Site principal de acolo.
Acum de la debug secțiune, permiteți Sugestii pentru parcursul de șablon, și apăsați pe Salvați Config butonul din nou.
În cele din urmă, accesați directorul rădăcină Magento și deschideți fișierul index.php de acolo. Pe linia 77, rupeți această linie de cod:
ini_set ( 'display_errors', 1);
Atât deocamdată. S-ar putea să nu realizați acest lucru, dar am construit o bază solidă pentru dezvoltarea temelor reale în următoarele tutoriale din această serie. În cele din urmă, vă încurajez din nou să parcurgeți cu atenție seria Magento Theme Development recomandată mai sus, dacă nu ați făcut-o deja.
În tutorialul următor, vom crea structura folderului temei noi. Vom copia fișierele CSS, JS și de imagini din HTML în tema noastră și vom crea fișierul local.xml al temei pentru a ne asigura că tema noastră face legătura cu aceste fișiere.
Asta este, și sper că veți urma împreună cu noi în următoarele tutoriale.
Accentsconagua