Magento pentru designeri Partea 3

Magento este o platformă de e-commerce uimitor de puternică. În această miniserie, vom învăța cum să începem cu platforma, să cunoaștem terminologiile, să stabilim un magazin și toate aspectele legate de acesta și, în sfârșit, să învățăm cum să-l personalizăm pentru a-l face foarte proprie.

În această a treia parte, ne vom concentra asupra procesului din spatele temei Magento: cum să instalăm teme, diferitele concepte pe care trebuie să le înțelegeți pentru a crea o temă și structura generală a fișierelor. Excitat? Să începem!


Seria Full

  • Partea 1: Instalare și configurare
  • Partea 2: Produse, impozite, categorii, gateway-uri de plată etc..
  • Partea 3: Theming
  • Partea 4: Construirea temei
  • Partea 5: Construirea paginii cu informații despre produs

O recapitulare rapidă

În ultima parte, am văzut cum să obțineți magazinul Magento de la instalat la gata pentru implementare, inclusiv cum să vă configurați produsele, categoriile de produse, taxele, transportul maritim, gateway-urile de plată și multe altele.

Astăzi, vom analiza elementele de bază ale temei Magento. Vom învăța ideea generală din spatele temelor Magento, diferitele terminologii din spatele ei și structura de bază a unei teme.


Magento tematică de bază

În primul rând, Magento nu este chiar așa de tare cum se presupune. Este puțin diferit de modul în care WordPress sau Joomla se ocupă de teme, da, dar cu siguranță nu este dificil. Tot ce trebuie să știți este un pic știu cum să începeți să le faceți ca un profesionist!

Pentru a face acest lucru brutal de simplu, o temă Magento este o colecție de fișiere PHTML, CSS și JS aruncate împreună împreună cu fișierele XML pentru a defini structura. Un fișier PHTML constă din marcajul HTML obișnuit, intercalat de codul PHP pentru funcționalitate. În cazul în care sunteți confuz, un bloc aleatoriu de coduri arată astfel:

 
getChildHtml ('store_language')?>

getWelcome ()?>

getChildHtml ('topLinks')?>

Vedea? Este foarte simplu când îți înfășeri capul în jurul lui. Dacă ați lucrat cu crearea de teme pentru alte sisteme, minunat, veți alege destul de repede. Dacă nu, nu vă faceți griji, vă voi trece prin întregul proces.

Rețineți că în Magento, partea frontală și partea din spate sunt jupuite complet separat. Presupun că majoritatea nu va trebui să pătrundă backend-ul, așa că am să rămân singur în front.


Instalarea unei teme

Înainte de a începe, un număr de oameni mi-au dat prin Twitter / prin e-mail-mi întrebând aceeași întrebare: cum să instalați o temă. Voi vorbi mai întâi despre asta.

Există două modalități de a instala o temă Magento:

  • Metoda tradițională în care puteți copia tema ambalată în dosarul corespunzător
  • Magento Connect

Voi vorbi pe scurt despre ambele.

Upload direct / copiere

Prima metodă este cea cu care esti obișnuit. Descărcați o temă, încărcați-o și faceți-o. Dar va trebui să știți unde să încărcați, deoarece aceasta funcționează puțin diferit decât ați presupune.

Temele sunt ambalate diferit, în funcție de sursă, dar la bază, aveți 2 dosare:

  • aplicaţia
  • piele

Puteți să le trageți doar la rădăcina instalării și să o îmbinați cu datele existente.

Dacă întâmplați, obțineți tema ambalată ca o colecție de 3 dosare, nu vă faceți griji.

Se afișează folderul care conține fișierele PHTML și cel conținând fișierele XML rădăcină / app / proiectare / Frontend a / default / THEMENAME în timp ce este inclusă cea care conține fișierele CSS, imaginile și alte active rădăcină / piele / Frontend a / default / THEMENAME.

În acest moment, tot ce trebuie să faceți. Voi explica de ce fiecare parte merge într-o anumită locație mai târziu. Acum puteți activa tema.

Navigheaza catre Sistem -> Design și faceți clic pe Adăugați modificarea proiectului.

Alegeți tema dorită, faceți clic pe Salvați și ați terminat.

Magento Connect

Utilizarea Magento Connect este mai ușoară dacă este disponibilă acolo. Navigheaza catre Sistem -> Magento Connect -> Magento Connect Manager.

După ce vă conectați, vi se va cere să introduceți cheia de extensie a temei pe care doriți să o instalați. Introduceți cheia și așteptați ca sistemul să facă acest lucru.

După ce a descărcat fișierele necesare și le-a plasat acolo unde trebuie, acum puteți activa tema ca înainte.


Concepte de design Magento pe care trebuie să le învățați

Când lucrați cu Magento, există câteva concepte legate de proiectare pe care trebuie să le înfășurați înainte de a începe chiar să modificați tema prestabilită.

aspecte

Layouts este o idee inteligentă și nouă în Magento. Acest sistem vă permite să definiți o pagină, o structură a unei pagini, prin intermediul unor etichete XML corect formate.

În esență, puteți dicta care parte a paginii merge acolo, schimbând doar câteva atribute într-un fișier XML. Fiecare vizualizare sau modul obține aspectul specificat de propriul fișier XML.

Layouts în Magento este un subiect important și doar câteva paragrafe aici nu o vor face dreptate. Pe parcurs, voi acoperi toate informațiile necesare pentru a vă construi propria temă, împreună cu un articol detaliat cu privire la aspecte care să acopere toate lucrurile avansate pe care le puteți face cu această funcție.

Deocamdată, dacă sunteți interesat, iată un mic fragment pentru a obține o idee despre ce sunt machetele:

        top-container        

Template-uri

Șabloanele constau în fișiere PHTML umplută cu marcaj HTML obișnuit și cod PHP. Similar cu WordPress, utilizați o serie de metode predefinite pentru a specifica rezultatul. La fel ca și în cazul altor sisteme populare, secțiuni importante precum antetul, subsolul și bara laterală sunt plasate în fișiere separate și trase atunci când este necesar.

Puteți avea șabloane diferite pentru fiecare vizualizare a Magento. De exemplu, puteți avea cod diferit pentru o listă de preferințe sau pentru o pagină de plată în loc să utilizați același aspect pentru întregul site.

Iată o bucată de șablon pentru cei curioși:

 
  • getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produs, 'small_image'))?> "> init ($ _ produs, 'small_image') -> redimensionare (100, 100); ?> "alt ="htmlEscape ($ this -> getImageLabel ($ _ produs, 'small_image'))?> "title ="htmlEscape ($ this -> getImageLabel ($ _ produs, 'small_image'))?> "/>

    getProductUrl ()?> "title ="htmlEscape ($ _ product-> getName ())?> "> htmlEscape ($ _ product-> getName ())?>
    getReviewsSummaryHtml ($ _ product, 'short')?> getPriceHtml ($ _ product, true, '-new')?>

Pare puțin cam dezordonat, știu, dar eliminați componentele PHP și veți vedea cât de asemănătoare este cu alte sisteme.

Skins

Schiurile nu sunt altceva decât fișierele CSS, fișierele JavaScript, imaginile și alte elemente pe care le utilizați în marcaj pentru a crea designul. În esență, toate activele non-PHP merg aici. Fonturi pentru încorporare? Unele demo flash swanky? O piesă plină de SVG? Toate acestea se încadrează în această categorie.

blocuri

Blocurile reprezintă blocurile integrale ale unei teme și vă permit să vă construiți tema într-o manieră modulară.

Ca parte a layout-urilor, aceasta formează coloana vertebrală a sistemului puternic de template-uri Magento. Blocurile sunt în esență secțiuni pe care le puteți deplasa utilizând XML-ul menționat mai sus pentru a modifica modul în care este prezentată o pagină.

Blocurile trebuie să facă referire la un fișier de șablon relevant, astfel încât Magento să poată trage fișierul necesar. Puțin confuz? Iată un exemplu.

 

Definim în esență un bloc nou, care șablon să se încarce prin specificarea tipului de bloc și a unui nume. Este puțin diferit de ceea ce am fost obișnuit, dar credeți-mă că o veți obține odată ce veți începe să vă dezvoltați. În orice caz, voi acoperi blocurile un pic mai mult în detaliu atunci când ne construim tema noastră și mai mult voi face o scriere complet pe layouts și blocuri de pe linie astfel încât să nu vă faceți griji dacă nu se completează simți acum. Obțineți o simțire generală pentru subiectele la îndemână.

Blocuri structurale

Un bloc structural definește structura de bază a unei pagini. Gândiți-vă la secțiunile antet HTML 5, subsol și în afară. Acestea au fost create pentru unicul scop al demarcării vizuale a unui design.

Din documentele Magento

Blocuri de conținut

Blocurile de conținut sunt similare cu elementele obișnuite de containere / wrapper DIV pe care le utilizați într-un design. La fel ca în cazul designului, fiecare bloc de conținut conține o funcție sau un scop specific. Un meniu din antetul dvs., un indicativ în bara laterală, clarificările juridice din subsolul paginii intră în blocuri de conținut separate.

Amintiți-vă că blocurile de conținut sunt încă blocate și cărutați un anumit fișier PHTML pentru a genera și afișa conținutul HTML.

Din documentele Magento

Interfață

Menționată în sfârșit, deoarece dintr-o perspectivă strictă a unui începător, acest lucru nu ar trebui să intre în joc pentru o perioadă îndelungată.

Pentru a fi simplu, o interfață este o colecție numită de teme pe care le puteți folosi pentru a defini aspectul magazinului dvs..


Locații importante pe care trebuie să le țineți minte în timp ce apelați

La fel ca orice alt software puternic, Magento are o structură complexă de fișiere. Cu toate acestea, pentru a le putea juca de-a lungul timpului, vă puteți reduce considerabil concentrarea.

Iată locațiile la care veți lucra când creați o temă:

  • root / app / design / frontend / implicit - folderul interfeței implicite. Aplicabil numit implicit, în mod implicit. (Heh!)
  • root / app / design / frontend / implicit / Cirrus - dosarul pentru tema pe care o vom construi. Am numit tema noastră, Cirrus
  • root / skin / frontend / implicit - dosarul din interfața implicită.
  • root / skin / frontend / default / Cirrus - dosarul în care vor fi plasate toate activele pentru tema noastră.

Structura directorului unei tematici

Magento cere ca conținutul dvs. executabil PHP să fie plasat separat din activele statice, motiv pentru care aveți un director separat de pe rădăcină. Deși acest lucru poate părea inițial contraproductiv, odată ce ați adaptat ușor fluxul de lucru, veți înțelege că această mișcare crește securitatea generală a instalației dvs. ...

Cu toate acestea, o temă este de obicei împărțită în următoarele părți.

  • Aspecte - rădăcină / app / design / frontend / implicit / Cirrus / layouts
  • Șabloane - root / app / design / frontend / implicit / Cirrus / șabloane
  • Skins - root / skin / frontend / implicit / Cirrus

Cel de-al doilea cuvânt

Și am terminat! Ne-am uitat la conceptele de bază din spatele temei Magento și gestionarea temelor. Sperăm că acest lucru a fost util pentru dvs. și l-ați găsit interesant. Deoarece acesta este un subiect destul de nou pentru o mulțime de cititori, voi fi atent la secțiunea de comentarii, așa că amuzant acolo dacă aveți orice îndoieli.

Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!


Ce vom construi în piesele viitoare

Până acum, ne-am ocupat strict de teoretic cu platforma. O necesitate având în vedere dimensiunea și domeniul de aplicare al Magento. Dar acum, că avem toate elementele de bază înrădăcinate, putem trece la partea distractivă.

Amintiți-vă cum atunci când creați o piele pentru un sistem CMS / generic întotdeauna începeți de la un schelet și construiți spre exterior? Ca și Kubrick pentru WordPress? Dacă credeai că o să luăm una și să începem să construim o temă din ea, ai crezut greșit. Nu, domnule. Vom construi o piele obișnuită, goală, asemănătoare cu cea a pielii Blank complet de la zero. O piele pe care o poti folosi ca baza pentru pielea ta.

Toate acestea și mai mult în părțile viitoare. Rămâneți aproape!


Seria Full

  • Partea 1: Instalare și configurare
  • Partea 2: Produse, impozite, categorii, gateway-uri de plată etc..
  • Partea 3: Theming

Achiziționați teme Magento de la ThemeForest

Știați că cartierul dvs. prietenos ThemeForest vinde teme Magento premium de calitate? Indiferent dacă sunteți un dezvoltator calificat Magento care încearcă să înceapă să profite de eforturile dvs. sau un cumpărător, sperând să vă construiți primul magazin de eCommerce, v-ați acoperit!

Cod