Ora che abbiamo completato la home page e la pagina della categoria, in questo tutorial inizieremo a modificare la terza pagina più importante del sito eCommerce: la pagina del prodotto. Per prima cosa apriamo la pagina del prodotto e vediamo come appare ora e come vogliamo che appaia.

La pagina del prodotto nel nostro design HTML si presenta così:

La nostra attuale pagina del prodotto ha il seguente aspetto:

Per iniziare a modificarlo, faremo lo stesso passo che abbiamo fatto decine di volte fino ad oggi, cioè abilitando i suggerimenti del modello per capire quali file modello sono responsabili del rendering di questa pagina.

Come possiamo vedere, la pagina è una raccolta di oltre una dozzina di file, ma fortunatamente non è necessario modificarli tutti. Dovremo solo modificare tre o quattro di questi file, e per il resto modificheremo gli stili per renderli simili al nostro design, senza fare casino con i file phtml.

Se si guarda da vicino, la struttura generale della sezione prodotto proviene dal file \ template \ catalog \ product \ view.phtml. L'ho indicato attraverso una freccia nell'immagine qui sopra. Questo file fornisce la struttura esterna di tutti i componenti e quindi le parti interne provengono da altri modelli, ma modificheremo prima quello esterno.

Copieremo questo file view.phtml nel nostro nuovo tema e inizieremo a modificarlo. Il codice corrente di questo file è simile al seguente:

helper ( 'Catalogo / output'); ?> EsprProdotto (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 
 
getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?> 
   
 
 
 
productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
 getChildHtml ('media')?> 
 
 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?> 
 
 getPriceHtml ($ _ del prodotto); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?> 
 
 getReviewsSummaryHtml ($ _ product, 'default', false)?> getChildHtml ( 'product_type_availability'); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):?> 
 
productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ( 'altro');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ", true, true)?>  
 
 getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?> 
 isSaleable ()):?> getChildHtml ('addtocart')?> helper ('wishlist') -> isAllow () || $ _compareUrl = $ this-> helper ('catalog / product_compare') -> getAddUrl ($ _ product)):?> __ ('OR')?>   getChildHtml ('addto')?> getChildHtml ('condivisione')?> 
 getChildHtml ('extra_buttons')?> isSaleable ()):?> 
 getChildHtml ('addto')?> getChildHtml ('condivisione')?> 
  
 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')?> 

Ora dobbiamo controllare il nostro codice HTML e inseriremo tutto il nostro codice HTML in questo file view.phtml e quindi inizieremo a modificarlo. Il codice corrente del file details.html nel nostro file di progettazione HTML è come questo (sto solo copiando il codice per la parte del prodotto escludendo l'intestazione, la sezione footer, ecc.):

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Lincoln Unit Unit Products
 
 
Prezzo: 450.00$450.00$
 
sdf;, HKF
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et lorem nunc ... 
 
 
 
asddas
 
  Seleziona una taglia Nero Melanzana  
 
 
 
 
asddas
 
  Scegli un materiale X-Small Piccolo  
 
 
 
 
 
Qtà:  1  
 
 Aggiungi al carrello 
 
 
 
 
 
 
 
 
 
 
DESCRIZIONE
 
REVISIONE
 
TAG DEI PRODOTTI
 
 
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae ... 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
 
 
 
 
 
 
 
 
 
1 stella
 
2 stelle
 
3 stelle
 
4 stelle
 
5 stelle
 
 
 
 
 
Qualità
 
 
 
 
 
 
 
 
Prezzo
 
 
 
 
 
 
 
 
Valore
 
 
 
 
 
 
 
 
 
 
 
 Il tuo nome *  
 
 La tua email *  
 
 Riepilogo della recensione *  
 
 
 
 Il tuo nome *  
 
  
 
 
 
 
 
 
  
Nome del revisore
 
Data: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
  
Nome del revisore
 
Data: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
 
 
 Aggiungere etichette :   
 
 
 
 
 
 
Caldo Prodotti
 
<>
 
 
 
 
 
 
 
  
 Leggi di più 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Leggi di più 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Leggi di più 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 
 
 
 
 
 
 
  
 Leggi di più 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 
 
 
 
 
 
 
 
 
 
- 20%
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
Nuovo
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
 
 
 
 
- 20%
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
Nuovo
 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 Aggiungi al carrello 
 
 
 
 
 
 
 
 
 
 

So che è un sacco di codice e potrebbe spaventarti. Ma non preoccuparti, perché come vedrai quando iniziamo a posizionare i tag dinamici, il codice inizierà a sciogliersi velocemente e non dovremo preoccuparci di gran parte di esso.

Ora inizieremo a modificare questo codice HTML inserendo tag dinamici dal nostro file view.phtml effettivo.

Prima di tutto, aggiungeremo queste righe nella parte superiore, per fare un'inizializzazione:

helper ( 'Catalogo / output'); ?> EsprProdotto (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 

E poi chiudi la vista del prodotto div alla fine del file (riga 314):

Quindi avvolgeremo i dettagli del prodotto div all'interno di un elemento del modulo, come nel file view.phtml effettivo. Quindi aggiungeremo queste righe all'interno di Dettagli del prodotto div alla riga 10:

getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?> 
   

Allo stesso modo, ora chiudiamo questo modulo, e copia anche questo JavaScript da view.phtml alla riga 77:

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

Nel prossimo passaggio, all'interno di una tab-box div (iniziando dalla riga 129), rimuovi tutto il codice esistente e copia il seguente codice di tab da view.phtml (circa 100 righe di codice sostituite con queste poche righe). Per assicurarti che la scheda JavaScript funzioni correttamente, aggiungeremo la casella di tabulazione della scheda delle classi corrente div, quindi il nuovo codice sarà simile a questo:

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

Con tutto ciò, ora inseriremo il getChildHtml ('related_products')?> tag all'interno dei prodotti caldi div, dopo aver rimosso il codice esistente, in modo che assomigli alla riga 166:

 getChildHtml ('related_products')?> 
 

Vedi come circa 150 righe di codice vengono sostituite con solo queste tre linee? Salviamo tutto e vediamo come la pagina sta arrivando finora. Se hai fatto tutto bene, dovrebbe assomigliare a questo:

Potrebbe sembrare tutto incasinato, ma credimi, ci stiamo avvicinando a ciò che vogliamo che la pagina assomigli. Nel prossimo articolo modificheremo i file responsabili del rendering della sezione immagini, dei prodotti correlati, ecc. E infine apporteremo alcune correzioni di stile e la nostra pagina prodotto sarà pronta.

Alla fine, vorrei ribadire che i grossi blocchi di codice mostrati sopra potrebbero intimidirti all'inizio, ma una volta che inizi a sostituire il codice con tag dinamici appropriati, ti renderai presto conto che la modifica di questi non è molto lavoro.

Nel prossimo articolo, completeremo il resto di questa pagina modificando altri file phtml.