Acum, după ce am finalizat pagina de pornire și pagina de categorii, în acest tutorial vom începe editarea celei de-a treia site-uri importante a site-ului eCommerce: pagina de produs. Să deschidem prima pagină a produsului și să vedem cum arată acum și cum vrem să arătăm.

Pagina de produs din designul nostru HTML arată astfel:

Pagina noastră actuală de produse arată astfel:

Pentru a începe să o editați, vom face același pas ca și în cazul în care am făcut zeci de ori până acum, adică permiterea sugestiilor șablonului de a afla care fișiere șablon sunt responsabile pentru redarea acestei pagini.

După cum vedem, pagina este o compilație de peste o duzină de fișiere, dar din fericire nu trebuie să editați toate acestea. Va trebui doar să editați trei sau patru dintre aceste fișiere, iar pentru restul să modificăm stilurile pentru a le face să arate ca designul nostru, fără să ne amestecăm fișierele phtml.

Dacă vă uitați atent, structura generală a secțiunii produsului vine din fișierul \ template \ catalog \ product \ view.phtml. Am arătat asta printr-o săgeată din imaginea de mai sus. Acest fișier furnizează structura exterioară a tuturor componentelor și apoi părțile interioare provin de la alte șabloane, dar noi vom edita mai întâi acest exterior.

Vom copia acest fișier view.phtml în noua noastră temă și vom începe să îl editați. Codul curent al acestui fișier arată astfel:

ajutor ( 'catalog / ieșire'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 
 
getOptions ()):?> enctype = "multipart / forma-date"> getBlockHtml ('formkey')?> 
   
 
 
 
productAttribute ($ _ produs, $ _product-> getName (), 'name')?>
 
 getChildHtml ('media')?> 
 
 
 productAttribute ($ _ produs, $ _product-> getName (), 'name')?> 
 
 getPriceHtml ($ _ produs); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?> 
 
 getReviewsSummaryHtml ($ _ produs, "implicit", false)?> getChildHtml ( 'product_type_availability'); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):?> 
 
productAttribute ($ _ produs, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ( 'altele');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', "true, true)?>  
 
 getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?> 
 isSaleable ()):?> getChildHtml ('addtocart')?> helper (lista de dorințe) -> isAllow () || $ _compareUrl = $ this-> helper ('catalog / product_compare') -> getAddUrl ($ _ produs)): __ ('OR')?>   getChildHtml ('addto')?> getChildHtml ("partajare")?> 
 getChildHtml ('extra_buttons')?> isSaleable ()):?> 
 getChildHtml ('addto')?> getChildHtml ("partajare")?> 
  
 getChildHtml ('related_products')?> 
 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', 'true', true)?>  
  
 
 getChildGroup ('detailed_info', 'getChildHtml')):?> 
  $ Html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
 
 
 
  
  
 getChildHtml ('upsell_products')?> getChildHtml ('product_additional_data')?> 

Acum trebuie să verificăm codul nostru HTML și vom pune întregul cod HTML în acest fișier view.phtml și apoi vom începe să îl editați. Codul actual al fișierului details.html din fișierul nostru de proiectare HTML este astfel (copiem doar codul pentru partea de produs, cu excepția antetului, a subsolului etc.):

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Produse Lincoln Corner Unit
 
 
Preț : 450.00$450.00$
 
sdf;, HKF
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis în faucibus orci luctus și ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida și mattis vulps utate, tristique ut lectus. Sed și lorem nunc ... 
 
 
 
asddas
 
  Selectați o dimensiune Negru Aubergine  
 
 
 
 
asddas
 
  Alegeți un material X-Mici Mic  
 
 
 
 
 
Cantitate:  1  
 
 Adaugă în coș 
 
 
 
 
 
 
 
 
 
 
DESCRIERE
 
REVIZUIRE
 
TAGURI DE PRODUSE
 
 
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus și ultri ces posuere cubilia curae Aenean elefend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ul ces posuere cubilia curae Aenean elefend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus și ultri ces posuere cubilia curae Aenean elefend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis în faucibus orci luctus și ultri ces posuere cubilia curae ... 
 
Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus și ultri ces posuere cubilia curae Aenean elefend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ul ces posuere cubilia curae Aenean elefend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed și lorem nunc ... 
 
 
 
 
 
 
 
 
 
1 stea
 
2 stele
 
3 stele
 
4 stele
 
5 stele
 
 
 
 
 
Calitate
 
 
 
 
 
 
 
 
Preț
 
 
 
 
 
 
 
 
Valoare
 
 
 
 
 
 
 
 
 
 
 
 Numele dumneavoastră *  
 
 Email-ul tau *  
 
 Rezumatul revizuirii *  
 
 
 
 Numele dumneavoastră *  
 
  
 
 
 
 
 
 
  
Numele revistei
 
Data: 01-01-2014
 
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Integer un eros neque. În sapien est, malesuada nu interdum id, cursus vel neque.
 
 
  
Numele revistei
 
Data: 01-01-2014
 
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Integer un eros neque. În sapien est, malesuada nu interdum id, cursus vel neque.
 
 
 
 
 Adaugă etichete :   
 
 
 
 
 
 
Fierbinte Produse
 
<>
 
 
 
 
 
 
 
  
 Citeste mai mult 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Citeste mai mult 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Citeste mai mult 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Citeste mai mult 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 
 
 
 
 
 
- % 20
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
Nou
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
 
 
 
 
- % 20
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
Nou
 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 Adaugă în coș 
 
 
 
 
 
 
 
 
 
 

Știu că e mult cod și te-ar putea speria. Dar nu vă faceți griji, pentru că așa cum veți vedea când vom începe să plasăm etichetele dinamice în ea, codul va începe să se topească rapid și nu trebuie să ne facem griji pentru cea mai mare parte a acestuia.

Acum vom începe să editați acest cod HTML inserând etichete dinamice din fișierul view.phtml propriu.

Mai întâi de toate, vom adăuga aceste linii în partea de sus, pentru a face unele inițializare:

ajutor ( 'catalog / ieșire'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 

Apoi închideți vizualizarea produsului div la sfârșitul dosarului (linia 314):

Îți vom împacheta detaliile despre produs div în interiorul unui element de formă, așa cum se află în fișierul view.phtml. Așa că vom adăuga aceste linii în interiorul lui Detalii produs div la linia 10:

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

De asemenea, vom închide acum acest lucru formă, și de asemenea copiați acest JavaScript de la view.phtml la linia 77:

 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', 'true', true)?>    

În pasul următor, în interiorul casetei div (începând de la linia 129), eliminați tot codul existent și copiați următorul cod de file din vizualizarea.phtml (în jur de 100 de linii de cod înlocuite cu aceste câteva linii). Pentru a vă asigura că JavaScript-ul tab-ului continuă să funcționeze bine, vom adăuga caseta tab-clasă curentă div, astfel încât noul cod va arăta astfel:

 getChildGroup ('detailed_info', 'getChildHtml')):?> 
  $ Html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
 
 
 
  
  
 

Cu tot ce am făcut, acum vom insera getChildHtml ('related_products')?> eticheta în interiorul produselor fierbinți div, după eliminarea codului existent, astfel încât acesta să pară așa la linia 166:

 getChildHtml ('related_products')?> 
 

Vedeți cum în jur de 150 de linii de cod sunt înlocuite doar cu aceste trei linii? Să salvăm totul și să vedem cum vine pagina până acum. Dacă ați făcut totul corect, ar trebui să arate ceva de genul:

Ar putea să arate totul încurcat, dar crede-mă, ne apropiem de ceea ce vrem ca pagina să arate. În următorul articol, vom edita fișierele responsabile pentru redarea secțiunii de imagini, a produselor asociate etc., iar în cele din urmă vom face unele corecții de stil, iar pagina noastră de produse va fi gata.

În final, permiteți-mi să vă reamintesc că bucățile mari de coduri de mai sus ar putea să vă intimideze la început, dar odată ce ați început să înlocuiți codul cu etichete dinamice corespunzătoare, veți realiza în curând că editarea acestora nu este mult de lucru.

În următorul articol, vom finaliza restul paginii editând alte fișiere phtml.