Magento pentru designeri Partea 5

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 cincea parte, vom construi una din vederile principale ale magazinului nostru - pagina cu informații despre produs. 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 stabilit cadrul pentru temă construind porțiunile repetate ale temei și definind, în esență, aspectul general al temei.

Am analizat, de asemenea, modul în care temele în Magento funcționează, trecând prin modul în care se construiește structura, modul în care funcționează blocurile și modul în care toate piesele diferite ale puzzle-ului se potrivesc împreună.

Ce construim astăzi?

Astăzi, vom construi pagina de vizualizare a produselor individuale. La fel ca înainte, fișierele sursă, atât partea frontală cât și cea din spate, sunt incluse. Puteți să o utilizați pentru a vedea cum arată pagina, dar în afară de aceasta, tema ar trebui să pară ruptă, deoarece, încă nu am atins restul vizualizărilor. Așa că până construim restul, încercați să nu vă aventurați din nisipul nostru.

Obiective pentru pagina

Scopul nostru pentru această pagină specifică este relativ simplu. Vrem o pagină fără nonsens, care nu are decât cele esențiale. Astfel, am redactat o scurtă listă de elemente pe care cred că are nevoie:

Titlul produsului: Foarte evident
Capacitatea de a afișa o imagine a produsului
O prezentare rapidă și completă
Disponibilitatea și prețul produsului și, în final
Un buton de adăugat în coș pentru al plasa în cărucior

Asta e. Vreau să o păstrez cât mai simplu posibil și astfel am optat să nu o fac. Odată ce ați învățat principiile generale, nu ezitați să adăugați cât mai multe caracteristici whizbang posibil.

Aspectul de bază

Pagina trebuie să arate așa:

Pasul 1 - HTML

Vom analiza mai întâi codul HTML numai pentru partea de conținut. Presupun că sunteți destul de fluent în HTML și CSS, așa că voi trece la părțile destul de importante.

  
  Disponibilitate In stoc
 Preț $ 29.00
 Adaugă în coș 
 Photoshop pentru HTML
 Vizualizare rapidă
  descrierea produsului

În primul rând, observați că am împachetat imaginea produsului cu un div pentru a facilita adăugarea de funcții în viitor. Să presupunem că doriți să adăugați în viitor o imagine a imaginii afișate, în acest fel ne va permite să adăugăm acest lucru mult mai rapid.

Avem un alt element div care deține informații despre disponibilitate și prețuri, împreună cu adaugă în coș buton. Vom fi spruding-o cu un mic CSS3 într-un pic.

Restul codului HTML este foarte simplu. Titlul se află într-o secțiune h1 în timp ce titlurile secțiunilor individuale ocupă h2. Prezentarea rapidă este imbricată într-un paragraf, în timp ce întreaga imagine de ansamblu ocupă un div.

Putem trece acum la partea de styling.

Pasul 2 - CSS

 / * Pagina produsului * / # principal-produs-imagine marja: 0 20px 10px 0; padding: 10px; plutește la stânga; frontieră: 1px solid # E1E1E1; fundal: # F3F3F3;  # detalii despre produs width: 180px; padding: 10px; float: dreapta; frontieră: 1px solid # E1E1E1; fundal: # F3F3F3; margine: 0 0 0 20px;  # disponibilitatea produsului span.available, # span cu prețul produsului culoare: # 7db000; float: dreapta;  butonul margin: 10px auto; afișare: bloc; lățime: 140px; padding: 5px 10px; text-align: centru; text-decoration: nici unul; culoare: # 555; frontieră: 1px solid #ccc; font-size: 18px; fundal: #ddd; raza de graniță: 12 pixeli; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-shadow: 1px 1px 2px rgba (0,0,0, .5); -webkit-box-shadow: 1px 1px 2px rgba (0,0,0, .5); -moz-box-shadow: 1px 1px 2px rgba (0,0,0, .5); text-shadow: #fff 0px 1px 1px; fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (#eeeeee), până la (#cccccc)); fundal: -moz-linear-gradient (top, #eeeeee, #cccccc);  .button: hover background: # 014464; fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (#cccccc), la (# 999999)); fundal: -moz-linear-gradient (sus, # cccccc, # 999999); culoare: # 000;  .button: activ -moz-box-shadow: 0 2px 6px negru; -webkit-box-shadow: 0 2px 6px negru;

Nimic nu este aici. CSS de bază pentru a plasa elementele în poziție.

De asemenea, am folosit un pic de CSS3 pentru a face butoanele sa arate mai bine.

Pasul 3 - Crearea fișierului catalog.xml

După cum am menționat în partea anterioară, fiecare modul obține propriul fișier XML pentru a dicta ce elemente să includă și aspectul general al paginii. Pagina pe care o construim astăzi se bazează pe un fișier numit catalog.xml pentru a defini conținutul și structura sa.

Acest fișier ar trebui să fie prezent în schemă astfel încât să creați un fișier XML și să îl denumiți catalog.

Fișierul complet pentru astăzi arată așa. Voi explica fiecare parte de biți de partea de jos.

    Catalog Vizualizare produs (oricare)      css / product.css

Nu luați în considerare declarațiile inițiale XML și layout version. Ei nu au nici o importanță pentru noi acum.

Mai întâi, lăsăm sistemul să știe că intenționăm să modificăm partea de vizualizare a produsului din sistem. Asta pentru ca catalog.xml găzduiește aspectul pentru o serie de alte puncte de vedere și este imperativ să specificăm ce viziune intenționăm să modificăm.

Acum îi spunem lui Magento să-l încarce 1column.phtml fișierul ca șablon principal pentru această vizualizare. Acest lucru se datorează faptului că fiecare vizualizare individuală poate utiliza orice structură predefinită. De exemplu, pagina dvs. de pornire ar putea să utilizeze o structură personalizată foarte complexă, pagina dvs. de produse o coloană duală și pagina dvs. de căutare o singură dispunere coloană.

Dacă nu este specificat nimic, se va încărca șablonul implicit menționat în page.xml. Deoarece îl folosim pentru orice altceva, această parte este redundantă, dar când modificați acest șablon pentru uz personal, editarea numelui fișierului este mult mai ușoară decât adăugarea de bucăți de fișiere XML în fișierul de aspect.

  css / product.css

Și acum întâlnim una din părțile niftier ale lui Magento. Da, putem să aruncăm toate vizionările noastre specifice CSS într-un singur fișier CSS gigantic, dar nu suntem oameni de peșteră, nu-i așa? Plătesc mai multe cereri HTTP, această metodă ne permite să optimizăm CSS mai bine.

Mai întâi, achiziționăm o referință la secțiunea de cap a fișierului și apoi inserăm conținutul nostru specific paginii. Aici, introduc un fișier numit product.css care conține toată CSS specifică paginii pe care am analizat-o mai sus.

Rețineți că nu vă limitați la CSS. Includerea JS și a altor active este posibilă.

Acum solicităm Magento să utilizeze un șablon specific pentru porțiunea de conținut a paginii

Acest bloc definește toate blocurile individuale din interiorul blocului principal de conținut. În esență, folosim șabloane individuale pentru a afișa imaginea produsului, prezentarea generală și descrierea, disponibilitatea / prețul și, în final, funcția add to cart.

Și cu asta, baza noastră catalog.xml fișierul este complet.

Pasul 4 - Crearea șablonului principal

Ok, acum că am specificat aspectul nostru, putem trece la crearea acestuia / Catalog produse / view.phtml fișier pe care l-am specificat ca șablon principal pentru secțiunea de conținut din XML mai devreme.

Acest fișier este ușor diferit de șablonul schelet pe care l-am creat în ultima parte, deoarece vom adăuga câteva lucruri mici în loc să treceți prin calea șablonului pentru a evita umflarea împreună cu un apel smidgen al API pentru a ne ajuta.

 ajutor ( 'catalog / ieșire'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / forma-date">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ produs, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ("Prezentare rapidă")?>
 productAttribute ($ _ produs, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('descriere')?>

Dacă te uiți rapid, vei observa că facem un număr de getChildHtml solicită să achiziționați conținutul blocurilor. Acestea funcționează la fel cum era de așteptat, iar conținutul acestor conținuturi va fi acoperit puțin mai târziu.

 ajutor ( 'catalog / ieșire'); $ _product = $ this-> getProduct (); ?>

În prezent, nu trebuie să știm ce înseamnă asta. Cu toate acestea, în termeni de layman, solicităm în mod esențial Magento pentru informațiile despre magazinul respectiv, astfel încât să îl putem procesa și apoi să îl afișăm pe pagină.

 getOptions ()):?> enctype = "multipart / forma-date">

Aici folosim una dintre metodele API ale Magento pentru a genera dinamic adresa URL pe care formularul trebuie să-l postați.

 productAttribute ($ _ produs, $ _product-> getName (), 'name')?>

Folosim o altă metodă a Magento pentru a achiziționa titlul produsului direct.

 getShortDescription ()):?> __ ("Prezentare rapidă")?>
 productAttribute ($ _ produs, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Și din nou, din moment ce prezentarea rapidă va fi doar o propoziție sau două, voi opta să o importați direct în loc să utilizați un șablon. Folosim aceeași funcție pe care am folosit-o pentru a obține titlul.

Pasul 5 - Crearea șabloanelor pentru blocurile noastre

Cu toate piesele principale realizate, ne putem concentra acum pe blocurile individuale. Acum, că am făcut deja acest lucru la construirea șablonului principal, acest lucru ar trebui să fie mult mai ușor acum.

Vom aborda fiecare în ordinea apariției în codul nostru:

Imaginea produsului

getChildHtml ( 'media') hărți direct la / Catalog produse / vizualizare / media.phtml. Fișierul nostru arată astfel:

 getProduct (); $ _helper = $ this-> helper ("catalog / output"); ?> helper ("catalog / imagine") -> init ($ _ produs, 'imagine'). "" alt = "'$ this-> htmlEscape ($ this-> getImageLabel) ($ _ product, $ _img, 'image');?>  getImageLabel ()).

Un cod simplu PHP. Utilizăm metodele de ajutor pentru a obține imaginea produsului și apoi a le face pe ecran.

Disponibilitate / Preț

getChildHtml ( 'product_type_data') hărți direct la / Catalog produse / vizualizare / Tip / simple.phtml. Fișierul nostru arată astfel:

 getProduct ()?> Disponibilitate isSaleable ()):?> __ ("În stoc")?>  __ ("În afara stocului")?>  
 Preț getPriceHtml ($ _ produs)?>

Mai întâi verificăm dacă elementul este disponibil sau nu și apoi ieșiți codul HTML necesar. Dobândirea prețului produsului este o metodă simplă!

Adaugă în coș

getChildHtml ( 'addToCart') hărți direct la / Catalog produse / vizualizare / addtocart.phtml. Fișierul nostru arată astfel:

 getProduct ()?> isSaleable ()):?>

După cum este logic, verificăm dacă un element este pus în vânzare înainte de a ieși codul HTML necesar. Este un buton simplu, după cum se vede.

descrierea produsului

getChildHtml ( 'descriere') hărți direct la / Catalog produse / vizualizare / description.phtml. Fișierul nostru arată astfel:

 getProduct () -> getDescription (); ?>  descrierea produsului
 helper ('catalog / output') -> productAttribute ($ this-> getProduct (), nl2br (descriere $), descriere)?>

Similar cu modul în care am inclus o prezentare rapidă, folosim metodele integrate ale Magento pentru a obține informațiile necesare. Noi verificăm existența descrierii înainte de ao face.

În cazul în care sunteți curios, am tendința de a include descrierea separat prin șabloane, în special deoarece în șabloane de producție veți fi aproape întotdeauna post procesiune descrierea într-un fel. În aceste scenarii, este mai ușor să împărțiți această logică pe propriul șablon. O privire de ansamblu rapidă, pe de altă parte, este, de obicei, destul de mică și, astfel, este inclusă direct.

Ce vom construi în următoarea parte

... depinde de dvs. Există destul de multe viziuni pe care le-ați putea proiecta, dar este destul de îndrăzneț să-mi aleg una. Astfel, vă rog, cititorul, să sugerați o viziune care să acopere în următoarea parte printr-un comentariu în secțiunea de comentarii de mai jos. Nu uitați să-mi spuneți care dintre acestea să acoperiți în continuare!

Ultimul cuvant

Și am terminat! Astăzi, am creat prima vizualizare a temei personalizate Magento, viziunea produsului împreună cu o privire asupra modului în care Magento ne permite să adăugăm materiale și conținut specifice paginii. 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ă!

Cod