Accentsconagua

Sviluppo di temi Magento Pagina prodotto, Parte 2

Codice
Share

In questo articolo della serie di sviluppo di temi di Magento, completeremo la pagina del prodotto da dove l'abbiamo lasciata nell'articolo precedente. Modificheremo i file phtml responsabili del rendering della sezione media, della sezione prodotti correlati, ecc.

Ora, iniziamo ad aggiungere il tag dinamico di immagini, prezzo, descrizione, ecc. All'interno del div del dettaglio del prodotto che abbiamo iniziato a modificare nell'articolo precedente.

Inizieremo aggiungendo il tag dinamico delle immagini. Se guardiamo al nostro HTML modificato, il codice per i media si estende dalle righe 19 a 28. Sostituiremo tutto ciò con una singola riga di codice:

getChildHtml ('media')?>

Come possiamo vedere dal file view.phtml, questa riga recupera tutto il codice per mostrare le immagini.

Quindi il nuovo codice alla riga 18 sarà simile a questo:

 getChildHtml ('media')?>

Successivamente sostituiremo il nome del prodotto alla riga 22 con questo codice dinamico:

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

Sulla linea 24, sostituiremo il codice prezzo con questo:

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

All'interno della classe pull-right della riga 29, aggiungeremo il codice per mostrare la recensione e la disponibilità del prodotto. Quindi il nuovo codice sulla riga 29 sarà simile a questo:

 getReviewsSummaryHtml ($ _ product, 'default', false)?> getChildHtml ( 'product_type_availability'); ?>

Successivamente sostituiremo la descrizione hard-coded scritta sulla riga 33 con questo tag dinamico:

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

Se guardiamo il file HTML che stiamo modificando, la prossima cosa che vediamo sono le caselle a discesa per la selezione delle opzioni del prodotto. Sostituiremo quel codice all'interno del div-size-input con questo codice dinamico:

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

Ora, questo codice non genererà automaticamente le opzioni per il prodotto, ma mostrerà anche il pulsante "aggiungi al carrello" e le opzioni di condivisione. Quindi, possiamo anche cancellare il seguente codice, che viene dopo .size-input div:

 
 
Qtà:

Ora, se guardiamo alla pagina corrente, tutto è a posto e funziona bene. Abbiamo solo bisogno di modificare il codice interno di alcuni elementi come l'area delle immagini, la sezione relativa ai prodotti, ecc. Infine, abbiamo solo bisogno di rispolverare il CSS e la nostra pagina sarà pronta.

Senza ulteriori ritardi, iniziamo a modificare il codice per la sezione delle immagini. Ricorda che abbiamo sostituito tutte le immagini HTML con una sola riga di codice: getChildHtml ('media')?>. Questa riga di codice mostra qui il codice dal file template \ catalog \ product \ view \ media.phtml: puoi anche verificarlo, abilitando i suggerimenti del modello e verificando da dove proviene il codice per la sezione delle immagini.

Ora che abbiamo determinato il file responsabile della generazione di questo codice, copiamo quel file dal tema rwd predefinito nel nostro nuovo tema e iniziamo a modificarlo. Il codice per il file media.phtml è simile al seguente:

EsprProdotto (); $ _helper = $ this-> helper ('catalog / output'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?> 
 
__ ('Altre viste')?>
 
     getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  getChildHtml ( 'dopo'); ?>

Prima di tutto, copieremo questo codice HTML della nostra sezione immagini in un file media.phtml appena copiato:

 
 
 
     
    •  
    •  
    •  
    •  
    •

Ora, inizieremo a modificare questo codice per inserire il codice dinamico nelle posizioni appropriate confrontandolo con il file media.phtml effettivo.

Inizieremo aggiungendo queste righe nella parte superiore del file:

EsprProdotto (); $ _helper = $ this-> helper ('catalog / output'); ?>

Sostituiremo il div con la classe preview-small con questo codice:

 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •

Allo stesso modo sostituiremo il div con thum-image di classe con questo codice:

E alla fine del codice, aggiungeremo questa riga:

getChildHtml ( 'dopo'); ?>

Quindi il codice del file sarà simile alla fine:

EsprProdotto (); $ _helper = $ this-> helper ('catalog / output'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () as $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  
 getChildHtml ( 'dopo'); ?>

Ora abbiamo quasi finito con la parte delle immagini. Alla fine sistemeremo alcuni problemi relativi ai CSS e sembrerà molto vicino al nostro design HTML.

Il prossimo è il fissaggio della sezione correlata. Possiamo vedere abilitando i suggerimenti del modello che questa porzione di pagina proviene dal file: template \ catalog \ product \ list \ related.phtml.

Come puoi probabilmente indovinare, il prossimo passo sarebbe copiare quel file nella nostra nuova cartella tematica, e quindi iniziare a modificarlo.

Creeremo un nuovo file e copieremo il codice HTML della sezione relativa del prodotto dal nostro tema HTML. Qui manterremo solo un'istanza del prodotto, come lo faremo attraverso il nostro file phtml. Il codice che copiamo sarà questo:

 
Caldo Prodotti
 
<>
 
     
  •  
     
     
     
     
      
     Leggi di più 
     
    Iphone 5s Gold 32 GB 2013
     
    $ 451.00
     
     
     
     
    •

Ora inizieremo a renderlo dinamico inserendo tag dinamici mentre lo confrontiamo con il file related.phtml effettivo.

Inseriremo l'intero codice in questo tag se:

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

Ora inseriremo questo ciclo per il ciclo subito dopo il div di riga:

getItems () as $ _item):?>

Inizieremo a posizionare il tag dinamico del nome del prodotto, il prezzo, la descrizione, l'URL, ecc. Nel div del prodotto, come abbiamo fatto durante la modifica dei prodotti nella home page.

L'intero codice per questo file dopo la modifica sarà simile a questo:

getItems () -> getSize ()):?> 
 
Relazionato Prodotti
 
<>
 
     
  •  
     getItems () as $ _item):?> 
     
     
     
     <?php echo $this->escapeHtml ($ _ item-> getName ())?>  
     getProductUrl ()?> "> Visualizza prodotto 
     
    escapeHtml ($ _ item-> getName ())?>
     
     getPriceHtml ($ _ item, true, '-related')?> 
     
     
     
     
      
     
    •

Ora abbiamo quasi finito con la modifica del file phtml per la pagina del prodotto. Dobbiamo solo correggere alcuni problemi CSS e la nostra pagina sarà pronta. Attualmente la pagina si presenta così:

Abbiamo finito con la maggior parte di esso. Ora abbiamo solo bisogno di modificare il CSS per fare le ultime modifiche in questa pagina, cosa che faremo nel prossimo articolo, che sarà anche l'ultimo articolo della serie. Insieme alle modifiche CSS per questa pagina, spiegherò come è possibile apportare modifiche alle altre pagine del tema utilizzando le tecniche apprese in questa serie.

Codice
×