Dezvoltarea temei Magento Pagina de pornire, Partea 3

Acum că am personalizat complet prima jumătate a paginii de pornire, trebuie să modificăm conținutul paginii de pornire următoare. Dacă ne uităm la designul HTML, secțiunea de conținut de pagină de pornire are doar o rubrică și un carusel pentru cele mai recente produse. Există un widget Magento pe care îl putem folosi pentru a afișa cele mai noi produse pe pagina de pornire. De fapt, dacă ne uităm la secțiunea curentă a paginii noastre de acasă, aceasta are deja widget-ul celor mai recente produse, dar trebuie să-l modificăm pentru a se potrivi cerințelor de proiectare.

Dacă ne uităm la conținutul paginii noastre de pornire, mergeți la Panoul de administrare> CMS> Pagini> Insula Madison> Conținut, vom vedea că există o singură linie de cod PHP (altul decât unele etichete de stil), adică

widget type = "catalog / product_widget_new" display_type = "new_products" produse_count = "5" template = "catalog / product / widget / new / content / new_grid.phtml"

De fapt, tot conținutul de pagină de pornire provine din acest șablon (care este doar un șablon pentru a afișa produse noi). Vom copia acest fișier din tema RWD la noua noastră temă, în / Catalog produse / widget / noi / content / new_grid.phtml, și începeți să o editați pentru a arăta ca designul HTML. Dacă ne uităm la codul curent al acestui fișier, acesta este:

getProductCollection ()) && $ _products-> getSize ()):?>   __ ("Produse noi")?>
 
  getPagerHtml ()?> getColumnCount (); ?>   getItems () ca $ _product):?>   getProductUrl ()?> "title ="($ _ product-> getName (), null, true)?> ">  init ($ _ product, 'small_image') -> redimensionare (85)Stripuri ($ _ product-> getName (), null, true)?> "/>   getProductUrl ()?> "title ="Stripuri ($ _ product-> getName (), null, true)?>) ">helper ('catalog / output') -> productAttribute ($ _ produs, $ _product-> getName (), 'nume'))
 getPriceHtml ($ _ product, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?>  isSaleable ()):?>   __ ("În afara stocului")?>
   helper ("lista de dorințe") -> isAllow ()):?> getAddToWishlistUrl ($ _ produs)?> ">__ ('Adaugă în lista de dorințe')?>
  getAddToCompareUrl ($ _ produs)):?> | „>__ ('Adaugă la comparare')?>

Când ne uităm la codul nostru HTML pentru această secțiune, vom arăta astfel:

  Fierbinte Produse
 
        Adaugă în coș 
 Iphone 5s Gold 32 Gb 2013
 $ 451.00

Deci, vom începe prin conectarea etichetelor dinamice din acest HTML. Motivul pentru care v-am arătat codul curent al acestui fișier este că puteți găsi etichetele dinamice necesare din acel cod și le puteți pune în codul HTML.

Nu trebuie să facem nicio modificare în structura div, deci prima linie care trebuie schimbată este h3 etichetă:

Fierbinte Produse

Trebuie să înlocuim textul static al Fierbinte și Produse cu Magento $ this astfel că Magento poate traduce ulterior acestea în funcție de preferințele utilizatorilor. Deci, această linie va deveni așa:

__ ("Nou")?>__ ("Produse")?>

Următoarea linie care trebuie schimbată este imagine tag, unde trebuie să schimbăm calea relevantă a sursei de imagine. În prezent, se arată astfel:

Vom schimba acest lucru:

 isSaleable ()):?> __ ("Adaugă în coș")?>  __ ("În afara stocului")?>

Are o adresă URL dinamică pentru pagina cu detalii despre produs și afișează numai "Adăugați în coș" dacă produsul este disponibil. În caz contrar, va apărea "Out of Stock". În cele din urmă, vom actualiza prețul produsului și numele, înlocuind această linie:

Iphone 5s Gold 32 Gb 2013
 $ 451.00

Cu acesta:

helper ('catalog / output') -> productAttribute ($ _ produs, $ _product-> getName (), 'nume'))
 getPriceHtml ($ _ product, true, '-widget-new-grid')?>

Acest lucru va avea gata de vizualizare a produsului nostru unic, dar pentru ao repeta peste toate produsele noi, trebuie să închidem elementul div într-o buclă, așa că vom adăuga această linie în partea de sus a acesteia:

getItems () ca $ _product):?>

Și această linie la sfârșitul anului pentru a termina bucla:

Deci, codul complet al fișierului va deveni astfel:

getProductCollection ()) && $ _products-> getSize ()):?>   __ ("Nou")?>__ ("Produse")?>
 
  getItems () ca $ _product):?>      isSaleable ()):?> __ ("Adaugă în coș")?>  __ ("În afara stocului")?>   
 helper ('catalog / output') -> productAttribute ($ _ produs, $ _product-> getName (), 'nume'))
 getPriceHtml ($ _ product, true, '-widget-new-grid')?>

Actualizați acum pagina de pornire. Ar trebui să aibă o secțiune de produse perfect de lucru și stil, care ar arăta astfel:

Acum trebuie să modificăm subsolul înainte să terminăm cu pagina de pornire. Dacă ne uităm la designul HTML, subsolul are patru secțiuni. Prima dintre acestea afișează "Brand-urile noastre", cea de-a doua conține o casetă de abonament și link-uri pentru social media, al treilea arată câteva adrese URL, iar al patrulea doar anunțul privind drepturile de autor.

A patra secțiune este deja prezentă în tema noastră, așa că trebuie doar să modificăm conținutul și stilurile, dar celelalte trei componente pe care trebuie să le adăugăm în tema noastră.

Pentru a adăuga o componentă, vom crea un nou bloc static din panoul de administrare și vom pune conținutul nostru acolo. Deci, vom merge la Panoul de administrare> Blocuri statice> Adăugați un nou bloc, și adăugați un nou bloc pentru Brandurile noastre secțiune. Vom schimba titlul Blocului la "Brand-urile noastre", vom stabili identificatorul în "brand-urile noastre", vom selecta vizualizarea magazinului "Afișări ale tuturor magazinelor" și vom pune în secțiunea de conținut:

Al nostru  Mărci
 <>

Dacă vă uitați atent, este același cod ca și în codul HTML pentru această secțiune - tocmai am schimbat căile relative ale imaginilor, în timp ce încărcați manual imaginile noi din cadrul editorului WYSIWYG. Salvați blocul și începeți să creați un alt bloc pentru secțiunea de înscriere.

Pentru acest al doilea bloc, vom folosi titlul blocului "Above Footer". Pentru identificator vom folosi "above_footer", iar pentru conținutul vom introduce acest cod:

Acum trebuie să creăm blocul de legături într-un mod similar. Vom crea un nou bloc cu titlul Bloc de "Footer Links", cu identificatorul ca "footer_links", și puneți acest cod acolo:

 Client A sustine
  FAQ
 Opțiune de plată
 Sfaturi de rezervare
 Informație de
 
 
  Client A sustine
  FAQ
 Opțiune de plată
 Sfaturi de rezervare
 Informație de
 
 
  Client A sustine
  FAQ
 Opțiune de plată
 Sfaturi de rezervare
 Informație de
 
 
  a lua legatura Info
 Anwar ul Haq, California
 Sunați-ne: (123) 398 5063
 Sunați-ne: (123) 398 5063
 Email: abs @ tutsplus

Toate aceste link-uri se leagă nicăieri acum, dar le puteți modifica mai târziu. Link-urile de imagine sunt din nou generate dinamic utilizând funcția de încărcare a editorului WYSIWYG. Tot restul codului este doar copiat și inserat din HTML.

Salvați și acest bloc și verificați pagina de pornire, dar tot nu veți vedea aceste trei blocuri. Acest lucru se datorează faptului că trebuie să îi spuneți Magento în mod explicit unde să arătați aceste noi blocuri și pe care le putem face din secțiunea layout. Pentru aceasta, mergeți la aspect / local.xml fișier și adăugați aceste linii, chiar înainte de închiderea Mod implicit etichetă.

  footer_links   above_footer   brandurile noastre

Acest cod XML îi spune în principiu Magento să adauge aceste două blocuri noi în secțiunea subsol Magento. În cele din urmă, trebuie să sunăm aceste blocuri din fișierul phtml din subsol. Pentru aceasta, vom crea un nou fișier footer.phtml în această locație: șablon / pagina / html / footer.phtml.

Adăugați acest cod aici footer.phtml fişier:

   getChildHtml ("our_brands")?> 
 
 
     getChildHtml ("above_footer")?> 
 
 
    getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
     getCopyright ()?>

Acest lucru este din nou doar cod HTML luate, în cazul în care toate codurile de secțiune sunt înlocuite cu link-uri relevante la Static Blocks. Și secțiunea privind drepturile de autor este înlocuită cu o etichetă dinamică privind drepturile de autor.

Verificați pagina de pornire acum și ar trebui să afișeze acum aceste blocuri statice nou create și ar trebui să arate astfel:

Pagina noastră de pornire este acum completă. Singurul lucru rămas este fixarea stilului și vom face acest lucru în următorul articol.

Cod

Dezvoltarea temei Magento Pagina de pornire, Partea 3

__ ("Produse noi")?>

getProductUrl ()?> "title ="Stripuri ($ _ product-> getName (), null, true)?>) ">helper ('catalog / output') -> productAttribute ($ _ produs, $ _product-> getName (), 'nume'))

Fierbinte Produse

$ 451.00

Fierbinte Produse

("Nou")?> ("Produse")?>

$ 451.00

getPriceHtml ($ _ product, true, '-widget-new-grid')?>

("Nou")?> ("Produse")?>

getPriceHtml ($ _ product, true, '-widget-new-grid')?>

Al nostru Mărci

Client A sustine

Client A sustine

Client A sustine

a lua legatura Info