Magento pentru designeri Partea 6

Magento este o platformă de e-commerce uimitor de puternică. În această miniserie, vom învăța cum să începeți cu platforma, să cunoașteți terminologiile, să configurați un magazin și toate aspectele legate de acesta și, în sfârșit, să învățați cum să îl particularizați pentru a deveni propriul nostru.

În această a șasea parte, vom construi una dintre cele mai citite caracteristici solicitate: obținerea unui slider de produse recomandat în pagina de pornire. 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
• Partea 6: Construirea paginii principale, cu un cursor de conținut

O recapitulare rapidă

În ultima parte, am construit pagina cu informații despre produs și am aruncat o privire asupra modului în care datele sunt extrase și afișate într-o temă tipică Magento.

De asemenea, am aruncat o privire asupra diferitelor metode de bază pe care le folosește tema noastră pentru a obține diferite media și date despre produsul nostru. Sper că îți aduci aminte cel puțin de o parte din acea informație, pentru că o vom folosi din nou astăzi.

Ce construim astăzi?

Astăzi, vom construi pagina principală importantă. Ca întotdeauna, o voi păstra cât mai simplu posibil și voi omite orice caracteristici străine. Diferitele magazine au conținut diferit în paginile lor de start. Una dintre cele mai populare și, cu siguranță, una dintre cele mai solicitate funcții este afișarea unui slider de conținut alimentat cu JavaScript, care include produse special prezentate. Știu că sună interesant și că ești mâncărime pentru a începe. Să începem!

Obiective pentru pagina

Ca și în celelalte pagini, obiectivele noastre pentru această pagină sunt relativ simple. Vrem un glisor simplu care afișează produse specifice într-un cursor elegant. Astfel, am redactat o scurtă listă de elemente pe care cred că are nevoie:

• Glisorul JavaScript pe pagina de pornire
• Sliderul are nevoie de o imagine atrăgătoare pe stânga pentru a atrage atenția asupra produsului
• În partea dreaptă, vom include numele produsului, prețul și o scurtă descriere
• O navigare în interiorul cursorului pentru a comuta între diferite diapozitive
• Și, cel mai important, nu se bazează pe o extensie pentru a obține elementele prezentate

Asta e. Vreau să o păstrez cât mai simplu posibil și astfel am optat să nu o fac. Vom avea, desigur, nevoie să lucrăm atât cu capătul din față, cât și cu cel din spate pentru a ne atinge toate obiectivele.

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.

 
 
 
    
 
 
Zonda F
 
700,000.00 
 
Pagani Zonda este o mașină sport cu motor de mijloc, produsă de Pagani în Italia. 
 
 
  

În acest moment, toate acestea sunt destul de elementare. home-slideshow este containerul pe care îl împachetăm întreaga prezentare de diapozitive și va fi transmis către JavaScript responsabil pentru cursor.

Fiecare diapozitiv este înfășurat de un div numit diapozitiv. În interior avem două containere plutitoare: una pentru imagine și a doua pentru informații despre produsul însuși.

Este vorba despre tot ce există. Putem trece acum la partea de styling.

Pasul 2 - CSS

 / * Prima pagină * / .slide clar: ambele; overflow: auto; padding: 10px; lățime: 898px; frontieră: 1px solid # E1E1E1; fundal: # F6F6F6;  .product-image float: left; lățime: 650px; padding: 10px; frontieră: 1px solid # E1E1E1; fundal: #FAFAFA;  .product-details float: left; lățime: 190px; margine: 0 0 0 20px;  .product-details .price marja: -15px 0 0 0; culoare: # 7db000; . detalii despre produs p margin: 10px 0 0 0;  #nav poziție: absolută; top: 255px; drept: 250px; z-index: 2000;  #de a marginea-dreapta: 10px; înălțime: 5px; lățime: 5px; z-index: 1000; plutește la stânga; text-indent: -9999px; cursor: pointer; frontieră: 1px solid #fff; fundal: #eee;  #nav a: hover border: 1px solid #fff; fundal: # 999;  #nav a.activeSlide graniță: 1px solid # 444; fundal: # 333; 

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

Singurul punct de reținut este declarația pentru clasă activeSlide. Această clasă este atribuită ancorei respective de navigare a diapozitivului curent.

Pasul 3 - Configurarea magazinului nostru

Primul lucru pe care trebuie să-l facem este să configurați o categorie separată, la care să putem aloca toate produsele pe care trebuie să le apară pe culisorul nostru. Faceți clic pe catalog și apoi pe categorii. Alege adăugați o nouă categorie rădăcină.

Introduceți un nume la alegere și alegeți nu pentru este activ scapă jos. Nu vrem să se afișeze în alte părți ale site-ului.

Odată ce noua categorie a fost salvată, puteți găsi ID-ul la care a fost alocată. Rețineți acest lucru. O să avem nevoie mai târziu.

Pasul 4 - Crearea codului nostru principal

Vom folosi un singur fișier de șablon pentru a scoate informațiile relevante, pentru a le forma după cum este necesar și pentru a afișa totul. Aveți libertate completă în ceea ce privește numele și locația acestui fișier, dar în interesul de a vă menține simplu, l-am denumit featured.phtml și a pus-o înăuntru / Catalog produse / featured.phtml. Amintiți-vă că acest lucru merge în dosarul dvs. de șablon, nu în folderul de aspect.

Conținutul fișierului arată ca atare. Nu vă faceți griji cu privire la lungime, ne vom uita la fiecare parte funcționează după cod.

 addAttributeToSelect (array ( 'nume', 'preț', 'small_image', 'SHORT_DESCRIPTION'), 'interior') -> addCategoryFilter (Mage :: getModel ( 'catalog / categorie') -> de încărcare ($ cat_id)); dacă (! $ _ productCollection-> count ()): echo $ this -> __ ('Nu există produse care să corespundă selecției.'); altfel:?> 
  
 
 getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produs, 'small_image'))?> ">  init ($ _ produs, 'small_image') -> redimensionare (650, 250); ?> "alt ="htmlEscape ($ this-> getImageLabel ($ _ produs, 'small_image'))?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produs, 'small_image'))?> "/> 
 
 
getName (); ?>
 
getFinalPrice (), 2);?> 
 
getShortDescription (); ?>
 
 
  
 

Iată prima piesă:

 $ cat_id = "2";

În primul rând, va trebui să specificăm ID-ul categoriei din care dorim să atragem produsele noastre. În cazul nostru, acesta va fi 2, ID-ul categoriei pe care tocmai am creat-o.

 $ _ProductCollection = Mage :: getResourceModel ( 'catalog / product_collection') -> addAttributeToSelect (array ( 'nume', 'preț', 'small_image', 'SHORT_DESCRIPTION'), 'interior') -> addCategoryFilter (Mage :: getModel ( 'Catalog / categorie') -> de încărcare ($ cat_id));

Acest lucru pare puțin complicat, dar permiteți-mi să vă asigur, este foarte simplu. Pentru a le pune în termeni de laic, vom trece, în esență, în ID-ul categoriei de care avem nevoie prin intermediul variabilei cat_id și cereți Magento să preia numele, prețul, imaginea și scurta descriere a produselor care se potrivesc. Chiar acum, v-aș sfătui să nu vă răsuciți cu restul, dacă nu sunteți bine familiarizat cu MVC și cu alte aspecte ale arhitecturii Magento.

 dacă (! $ _ productCollection-> count ()): echo $ this -> __ ("Ne pare rău, niciun element nu corespunde criteriilor de selecție"); altfel:?>

Va trebui să verificăm dacă avem elemente potrivite, nu-i așa? Asta facem aici. Asigurați-vă că avem elemente potrivite. Dacă nu, afișăm o eroare.

Să începem să introducem prin colecția noastră de produse!

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

 
getName (); ?>
 
getFinalPrice (), 2);?> 
 
getShortDescription (); ?>

Dacă ați citit partea anterioară a acestei serii, acest cod trebuie să vă fie destul de familiar. Folosim metode de coacere Magento pentru a recupera materialele care aparțin produsului nostru.

Al doilea fragment poate părea puțin diferit deoarece, în loc să utilizeze metode puțin mai abstracte, am folosit metode mai apropiate de os pentru a obține în mod direct datele de care avem nevoie.

Dacă vă simțiți puțin confuz aici, treceți mai departe codul de mai sus. Numele metodelor sunt destul de explicative. Singura piatră de poticnire trebuie să fie modul în care dobândim imaginea în sine: cerem unuia dintre ajutoarele noastre să obțină imaginea și să o redimensioneze la dimensiunea de care avem nevoie. Nimic mai mult.

Rețineți că deschidem și închidem o diapozitiv div de fiecare dată când rulează bucla noastră. Acest lucru este de a încapsula fiecare produs informații cu un element de container pentru a face usor pentru noi pentru a crea un cursor mai târziu.

Și cu asta, codul PHP de bază este complet.

Pasul 5 - JavaScript

Nu are nici un sens să reinventăm complet roata aici, deoarece focalizarea centrală a acestei serii este pe Magento. Astfel, vom folosi un plug-in excelent pentru a crea astăzi slider-ul nostru: pluginul Cycle jQuery.

Dar mai întâi, du-te la / rădăcină js și să creați un folder numit cirrus. Diferiți oameni au diferite metode de organizare aici. Prefer să am separat JS-ul unei teme, în loc să-i organizez prin sursă. Vom avea nevoie de o copie a jQuery [1.4 sperăm], pluginul ultimului ciclu și un fișier personalizat de script, pe care îl numesc cafea.

Iată conținutul fișierului nostru JS.

 (funcția ($) $ (document) .ready (funcția () $ ('# home-slideshow'
„) .Cycle (fx: 'decolorare', viteza: 1500, timeout: 5000, pauză: 1, întârziere: 5000, pager: '#nav'); ); ) (JQuery)

În primul rând, observați că împachetăm totul în interior (funcția ($) // Code) (jQuery) bloc. Asigurați-vă că jQuery nu intră în conflict cu alte biblioteci incluse.

Blocul de documente pregătit, ca întotdeauna, este să vă asigurați că codul nostru rulează numai după ce toate materialele paginii sunt încărcate, deoarece Magento îi place să pună fișierele noastre JavaScript în partea de sus.

Inițializarea pluginului este destul de simplă. Doar tastați ID-ul containerului principal, home-slideshow în cazul nostru, și departe mergem. Tocmai am modificat câteva dintre opțiuni pentru a face ca oferta noastră să fie licitată.

Ceva ce trebuie luat în considerare este faptul că creăm dinamic și poziționând containerul nostru pentru elementele de navigație din DOM cu JavaScriptS. Acest element este necesar doar dacă JavaScript este activat. Dacă nu, nu vrem codul gol și inutil în pagina noastră.

De asemenea, trecem în selector containerul de navigare în pluginul glisorului.

Asta e. Partea JavaScript a codului nostru este făcută.

Pasul 6 - Configurarea paginii noastre principale

Acum că toate lucrările noastre au fost finalizate, putem configura pagina noastră de pornire.

Faceți clic pe meniul CMS și alegeți pagini opțiune. Faceți clic pe pagina principală din pagina care rezultă.

Prima filă ar trebui să fie destul de explicită. Asigurați-vă că pagina noastră este activată.

În fila conținut, asigurați-vă că introduceți următoarele după dezactivarea editorului:

 tip bloc = "catalog / product_list" block_id = "featured.products" template = "catalog / product / featured.phtml"

Aceasta este metoda lui Magento de a include blocurile necesare. Noi îi oferim un ID care să îl adreseze și să-l îndreptați spre șablonul personalizat.

În fila de proiectare, schimbați șablonul de aspect la 1 coloană, deoarece îl folosim pentru tot și apoi introduceți următoarele în layout update xml camp.

  css / home.css    

Amintiți-vă cum la construirea paginii de produs am inclus CSS personalizat în fișierul de aspect al paginii pentru a vă asigura că întreaga pagină de cod nu este încărcată pentru fiecare pagină? Facem în esență același lucru aici. În loc să creați un fișier XML doar pentru acest lucru, Magento ne permite să introducem acest lucru direct prin interfață.

Încarcăm doar CSS personalizat, bibliotecile noastre JS și fișierul script care conține tot codul nostru.

Faceți clic pe "salvați" pentru a salva toate progresele înregistrate, golirea cache-ului Magento și urmăriți glisorul frumos de pe pagina de pornire alunecând prin gloria sa chinuitoare!

Ce vom construi în următoarea parte

... depinde de dvs. Am acoperit deja aproape toate informațiile relevante pentru personalizarea oricărei vizualizări și trecerea prin fiecare vizualizare este complet contra-intuitivă. Astfel, am ajuns la concluzia că tot ce a mai rămas este cum să creați un modul personalizat și cred că până atunci această serie va avea un curs. S-ar putea să scriu o scurtă schimbare de tip Magento și o optimizare a modului în care suficient de mulți oameni ar arăta interes pentru un astfel de articol.

Dacă simțiți că trebuie acoperit altceva înainte ca această serie să se încheie, nu ezitați să lăsați un comentariu de mai jos pentru a vă anunța!

Ultimul cuvant

Și am terminat! Astăzi, am învățat cum să creați o pagină de pornire personalizată completată cu un cursor care să afișeze produsele recomandate. De asemenea, am învățat să facem toate aceste lucruri fără a se baza pe o extensie a unui terț și, în schimb, să ne codificăm toate acestea. 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? Apăsați pe secțiunea de comentarii și lăsați-mi o notă. Codificare fericită!