Dezvoltarea temelor Magento pagina de produs, partea 2

În acest articol din seria Magento Theme Development, finalizăm pagina de produs de unde am lăsat-o în articolul precedent. Vom edita fișierele phtml responsabile de redarea secțiunii media, secțiunea de produse conexe etc..

Acum, să începem să adăugăm eticheta dinamică a imaginilor, a prețului, a descrierii etc. în interiorul produsului detaliu div pe care am început să îl editați în articolul precedent.

Vom începe prin adăugarea etichetei dinamice a imaginilor. Dacă ne uităm la codul HTML editat, codul pentru mass-media se extinde de la liniile 19 la 28. Vom înlocui toate acestea cu o singură linie de cod:

getChildHtml ('media')?>

După cum vedem din fișierul view.phtml real, această singură linie este preluarea întregului cod pentru afișarea imaginilor.

Deci noul cod de pe linia 18 va arata astfel:

 getChildHtml ('media')?>

Apoi vom înlocui numele produsului pe linia 22 cu acest cod dinamic:

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

Pe linia 24, vom înlocui codul de preț cu:

 getPriceHtml ($ _ produs); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?>

În interiorul clasei pull-right de pe linia 29, vom adăuga codul pentru a afișa recenzia și disponibilitatea produsului. Deci noul cod de pe linia 29 va arata astfel:

 getReviewsSummaryHtml ($ _ produs, "implicit", false)?> getChildHtml ( 'product_type_availability'); ?>

Înainte vom înlocui descrierea codată pe linie scrisă pe linia 33 cu această etichetă dinamică:

productAttribute ($ _ produs, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Dacă ne uităm la fișierul HTML pe care îl editați, următorul lucru pe care îl vedem este căsuțele drop-down pentru selectarea opțiunilor de produs. Vom înlocui acel cod în div divizarea dimensiune cu acest cod dinamic:

getChildHtml ( 'altele');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', "true, true)?>

Acum, acest cod nu va genera automat opțiunile pentru produs, dar va afișa, de asemenea, butonul "adăugați în coș" și opțiunile de partajare. Deci, putem șterge și următorul cod, care vine după .mărimea div:


  Cantitate:

Acum, dacă ne uităm la pagina curentă, totul este bine pus la punct și funcționează bine. Trebuie doar să modificăm codul interior al unor elemente cum ar fi zona imaginilor, secțiunea de produse conexe etc. Și, în fine, trebuie doar să citim CSS-ul și pagina noastră va fi gata.

Fără altă întârziere, să începem editarea codului pentru secțiunea de imagini. Amintiți-vă că am înlocuit toate imaginile HTML cu o singură linie de cod: getChildHtml ('media')?>. Această linie de cod afișează aici codul din șablonul de fișier \ catalog \ product \ view \ media.phtml: Puteți, de asemenea, să verificați acest lucru, permițând sugestiilor și verificării șablonului de unde vine codul pentru secțiunea de imagini.

Acum, că am determinat fișierul responsabil pentru generarea acestui cod, să copiem acel fișier din tema rwd implicită în noua noastră temă și să începem editarea acestuia. Codul pentru fișierul media.phtml arată astfel:

getProduct (); $ _helper = $ this-> helper ("catalog / output"); ?>    init ($ _ produs, 'imagine')?> "alt ="escapeHtml ($ this-> getImageLabel ())?> "title ="escapeHtml ($ this-> getImageLabel ()); ?> "/> getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?>  __ ("Mai multe viziuni")?>
  getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "date-image-index ="„>   
   
 
  getChildHtml ( 'după'); ?>

În primul rând, vom copia acest cod HTML al secțiunii noastre de imagini într-un fișier media.phtml copiat recent:

Acum, vom începe să modificăm acest cod pentru a insera codul dinamic în locurile potrivite, comparându-l cu fișierul media.phtml real.

Vom începe prin adăugarea acestor linii în partea de sus a fișierului:

getProduct (); $ _helper = $ this-> helper ("catalog / output"); ?>

Vom înlocui divul cu previzualizare de clasă - mic cu acest cod:

  init ($ _ produs, 'imagine')?> "alt ="escapeHtml ($ this-> getImageLabel ())?> "title ="escapeHtml ($ this-> getImageLabel ()); ?> "/> getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "date-image-index ="„>

În mod similar vom înlocui div cu clasa thum-image cu acest cod:

Și la sfârșitul codului, vom adăuga această linie:

getChildHtml ( 'după'); ?>

Deci, codul fișierului va arăta astfel:

getProduct (); $ _helper = $ this-> helper ("catalog / output"); ?>    init ($ _ produs, 'imagine')?> "alt ="escapeHtml ($ this-> getImageLabel ())?> "title ="escapeHtml ($ this-> getImageLabel ()); ?> "/> getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () ca $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "date-image-index ="„>   
   
 
  
 getChildHtml ( 'după'); ?>

Acum suntem aproape finalizați cu partea de imagini. În final vom rezolva câteva probleme CSS și va arăta destul de aproape de designul nostru HTML.

Înainte se stabilește secțiunea corespunzătoare. Putem vedea, permițând sugestii șablon că această porțiune de pagină vine din fișier: template \ catalog \ product \ list \ related.phtml.

După cum probabil puteți ghici, următorul pas ar fi să copiați fișierul în noul dosar tematic și apoi să îl editați.

Vom crea un fișier nou și vom copia codul HTML al secțiunii legate de produse din tema HTML. Aici vom păstra doar o instanță a produsului, așa cum o vom introduce în fișierul nostru phtml. Codul pe care îl vom copia va fi următorul:

 Fierbinte Produse
 <>
          Citeste mai mult 
 Iphone 5s Gold 32 Gb 2013
 $ 451.00

Acum vom începe să o facem dinamică prin plasarea de etichete dinamice în ea comparând-o cu actualul fișier related.phtml.

Vom plasa întregul cod în această etichetă dacă:

getItems () -> getSize ()):?>

Apoi vom plasa aceasta pentru bucle imediat după rândul div:

getItems () ca $ _item):?>

Apoi, vom începe să plasăm eticheta dinamică a numelui produsului, a prețului, a descrierii, a adresei URL etc. în divul de produse, așa cum am făcut-o în timpul editării produselor pe pagina de pornire.

Întregul cod pentru acest fișier după editare va arăta astfel:

getItems () -> getSize ()):?>  Legate de Produse
 <>
    getItems () ca $ _item):?>       getProductUrl ()?> "> Vizualizare produs 
 escapeHtml ($ _ element-> getName ())?>
  getPriceHtml ($ _ element, true, '-related')?>

Acum suntem aproape finalizați cu editarea fișierului phtml pentru pagina de produs. Trebuie să rezolvăm câteva probleme CSS, iar pagina noastră va fi gata. În prezent, pagina arată astfel:

Am terminat cu majoritatea. Acum trebuie doar să editați CSS pentru a face ultimele modificări în această pagină, pe care o vom face în următorul articol, care va fi, de asemenea, ultimul articol al seriei. Împreună cu modificările CSS pentru această pagină, vă voi explica cum puteți modifica alte pagini ale temei utilizând tehnicile pe care le-ați învățat în această serie.

Cod