Sviluppo di temi Magento pagina di categoria, parte 1

Congratulazioni per aver completato la home page del tuo nuovo tema e iniziando dalla pagina successiva. In questo tutorial, inizieremo a modificare la pagina delle categorie del nostro tema Magento.

La pagina della categoria consiste essenzialmente in quattro sezioni: la barra degli strumenti, la modalità griglia, la modalità elenco e la barra laterale. Tratteremo le prime tre sezioni di questo articolo, quindi nel prossimo tutorial modificheremo la barra laterale e faremo alcune correzioni ai CSS.

Se guardi una qualsiasi pagina di categoria del nostro tema, al momento assomiglierà a qualcosa del genere:

Mentre vogliamo farlo apparire come questo:

Se si nota, la nostra attuale pagina di categoria ha ampi spazi vuoti a sinistra ea destra. Dobbiamo capire perché l'area del contenuto non occupa abbastanza spazio. Diamo prima un'occhiata a quale modello è responsabile per il rendering di questa pagina. Possiamo farlo abilitando i suggerimenti sui template dal pannello di amministrazione, come avete fatto più volte in questa serie.

Qui abbiamo scoperto che aveva un layout a tre colonne che mostrava questa pagina, e questo è il motivo per cui c'è spazio vuoto a sinistra, dato che nessun blocco è assegnato alla barra laterale di sinistra.

Per rendere questa pagina simile al nostro design HTML, la modificheremo su due colonne. Dal pannello di amministrazione, vai a Catalogo> Gestisci categorie> Design personalizzato> Layout di pagina e cambiarlo in 2 colonne con barra sinistra.

Ora la nostra pagina dovrebbe avere un layout a due colonne con una barra laterale sul lato sinistro, come era il requisito del nostro progetto.

Come in questo articolo cambieremo solo l'area giusta (non la barra laterale), inizieremo il processo di modifica dalla barra degli strumenti. Con i suggerimenti sul modello, controlleremo i file phtml responsabili del rendering attivando nuovamente i suggerimenti del modello.

Come abbiamo scoperto, questo file è: \ template \ catalog / product / list / toolbar.phtml.

Lo copiamo nel nostro nuovo tema, lo confrontiamo con il codice del nostro file HTML e quindi iniziamo a fare cambiamenti. Il nostro codice attuale del file toolbar.phtml è simile al seguente:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Visualizza come')?> getModes () as $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Ordina per')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Imposta la direzione ascendente')?> ">__ ('Imposta la direzione ascendente')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Imposta la direzione discendente')?> ">__ ('Imposta la direzione discendente')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s di% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s Item (s)', $ this-> getTotalNum ())?> 
   __ ('Mostra')?>  
 
 getPagerHtml ()?>

Dobbiamo confrontarlo con il codice HTML responsabile della parte della barra degli strumenti, che è questo:

  ListGrid
 Ordina per :  
 Mostrare :

Inizieremo a modificare questo codice inserendo i tag dinamici e diversi per e Se dichiarazioni. Ad esempio, per rendere i collegamenti per la griglia e le modalità di elenco per la modalità di visualizzazione, aggiungeremo questo codice:

1):?> getModes () as $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">

Ciò che questo codice essenzialmente fa è iterare su tutte le modalità attive (elenco e griglia), quindi elenca un tag di ancoraggio per ognuno di questi. Qui, molto elegantemente, abbiamo assegnato classi e titoli diversi, usando il $ _label variabile, che sarà diversa per ciascuna modalità.

Allo stesso modo è possibile modificare il ordina per e limitatore parti te stesso confrontandolo con il file toolbar.phtml effettivo. Dopo le modifiche, il codice finale per questo file sarà simile a questo:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () as $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Ordina per :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Imposta la direzione ascendente')?> ">__ ('Imposta la direzione ascendente')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Imposta la direzione discendente')?> ">__ ('Imposta la direzione discendente')?>  
 __ ('Mostra:')?>  
 
  getPagerHtml ()?>

E se aggiorniamo la pagina ora, sarà simile a questa. Tutto è a posto, ma il CSS è abbastanza spento, che ripareremo nel prossimo articolo.

Ora è il momento di cambiare i prodotti effettivi visualizzati in questa pagina. I prodotti qui possono essere mostrati in due modi diversi, vale a dire la modalità elenco e la modalità griglia. Se abilitiamo i suggerimenti del template per scoprire il file responsabile di questa parte, vedremo che il codice per entrambe le modalità grid e list è scritto nello stesso file, che è frontend \ rwd \ default \ template \ catalog / product / list .phtml.

Il codice di elenco in questo file è sulle righe da 44 a 116, che è questo:

 getMode ()! = 'grid'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ prodotto)?>  getChild ('name.after')) $ _nomeAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nomeAfterChildren come $ _nomeAfterChildName) $ _nomeAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nomeAfterChildName); $ _NameAfterChild-> setProduct ($ _ del prodotto); echo $ _nomeAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ product, true)?> 
  canConfigure () && $ _product-> isSaleable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Visualizza dettagli')?> "Href ="getProductUrl ()?> ">__ ('Visualizza dettagli')?>
  __ ("Non disponibile")?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Aggiungi alla lista dei desideri')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Aggiungi a Confronta')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('Ulteriori informazioni')?>

Ora dobbiamo confrontarlo con il codice elenco HTML in productlist.html nel nostro modello HTML.

  Nuovo
 
  Lincoln Unit Unit Products
 02 Recensione / i
 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 etds mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
  450.00^$450.00^$

La modifica di questo codice è abbastanza semplice. Useremo queste linee di inizializzazione:

 getMode ()! = 'grid'):?>

Quindi piazzeremo un ciclo for attorno al Li etichetta:

Infine, sostituiremo il nome del prodotto, il prezzo, la descrizione, il link del file immagine e l'URL con i tag dinamici. Il codice finale sarà simile a questo:

 getMode ()! = 'grid'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ prodotto)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ product, true)?>

Ora, se aggiorniamo la pagina, vedremo la pagina delle categorie in modalità elenco che assomiglierà a questa. So che non è quello che vogliamo che assomigli, ma tutto il nostro codice HTML è a posto, quindi ora abbiamo solo bisogno di modificare il suo CSS, cosa che faremo nel prossimo tutorial.

Ora arrivando alla modalità griglia, il codice per questo è da 118 a 176 nello stesso file list.phtml.

 count ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('name.after')) $ _nomeAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nomeAfterChildren come $ _nomeAfterChildName) $ _nomeAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nomeAfterChildName); $ _NameAfterChild-> setProduct ($ _ del prodotto); echo $ _nomeAfterChild-> toHtml (); ?> getPriceHtml ($ _ product, true)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>   canConfigure () && $ _product-> isSaleable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Visualizza dettagli')?> "href ="getProductUrl ()?> ">__ ('Visualizza dettagli')?>  __ ("Non disponibile")?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Aggiungi alla lista dei desideri')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Aggiungi a Confronta')?>

Il codice HTML è simile a questo nel file productgrid.html nel nostro modello HTML:

       Leggi di più 
 Iphone 5s Gold 32 GB 2013
 $ 451.00

La modifica di questa parte sarà abbastanza simile a quella che abbiamo fatto nella parte della lista. Prima di tutto faremo alcune inizializzazioni, come nel file list.phtml predefinito.

 count ()?> getColumnCount (); ?>

Quindi li avvolgeremo ciascuno Li elemento all'interno di un ciclo for per iterare su tutti i prodotti.

Infine sostituiremo gli attributi del prodotto come nome del prodotto, prezzo, descrizione, ecc. Con i tag dinamici pertinenti. Li puoi trovare abbastanza comodamente dal file list.phtml attuale.

Il codice finale sarà simile a questo:

 count ()?> getColumnCount (); ?>         getProductUrl ()?> "> Aggiungi al carrello 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ product, true)?>

Ora se aggiorni la pagina, la modalità griglia sarà simile a questa:

In questo articolo, abbiamo modificato la barra degli strumenti e le sezioni elenco e griglia di questa pagina. Nel prossimo articolo modificheremo la barra laterale e faremo alcune correzioni di stile CSS. Alla fine del prossimo articolo, la nostra pagina delle categorie apparirà molto simile al design HTML.

Codice