Sviluppo di temi Magento Home Page, Parte 3

Ora che abbiamo completamente personalizzato la prima metà della pagina iniziale, dobbiamo modificare il contenuto della home page. Se guardiamo al nostro design in HTML, la sezione del contenuto della home page ha solo un titolo e un carosello per gli ultimi prodotti. C'è un widget Magento che possiamo usare per mostrare gli ultimi prodotti sulla home page. In realtà, se guardiamo alla nostra attuale sezione home page, abbiamo già attivato il widget dei prodotti più recente, ma dobbiamo modificarlo per soddisfare i nostri requisiti di progettazione.

Se guardiamo il contenuto della nostra home page andando al Pannello di amministrazione> CMS> Pagine> Isola di Madison> Contenuto, vedremo che c'è solo una riga di codice PHP (diversa da alcuni tag di stile), cioè:

widget type = "catalog / product_widget_new" display_type = "new_products" products_count = "5" template = "catalogo / prodotto / widget / nuovo / contenuto / new_grid.phtml"

Quindi, praticamente tutti i contenuti della home page provengono da questo modello (che è solo un modello per mostrare nuovi prodotti). Copieremo questo file dal tema RWD al nostro nuovo tema, in Catalogo / prodotto / widget di / new / content / new_grid.phtml, e inizia a modificarlo per far sembrare il nostro design HTML. Se guardiamo il codice corrente di questo file, è:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nuovi prodotti')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () come $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ product, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?> 
 isSaleable ()):?> __ ('Aggiungi al carrello')?>  
__ ("Non disponibile")?>
  
 helper ('wishlist') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Aggiungi alla lista dei desideri')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('Aggiungi a Confronta')?>
  
 
 
 
  
 
 
  

Quando guardiamo il nostro codice HTML per questa sezione, sembra che questo:

 
 
Caldo Prodotti
 
 
 
 
 
 
  
 Aggiungi al carrello 
 
Iphone 5s Gold 32 GB 2013
 
$ 451.00
 
 
 
 
 
 

Quindi, inizieremo collegando i tag dinamici in questo HTML. Il motivo per cui ti ho mostrato il codice corrente di questo file è che puoi trovare i tag dinamici richiesti da quel codice e inserirli nell'HTML.

Non dobbiamo apportare modifiche alla struttura div, quindi la prima riga che deve essere modificata è la h3 etichetta:

Caldo Prodotti

Dobbiamo sostituire il testo statico di Caldo e Prodotti con Magento $ questo tag, in modo che Magento possa successivamente tradurli in base alle preferenze dell'utente. Quindi, questa linea diventerà qualcosa del genere: 

__ ('Nuovo')?>__ ('Prodotti')?>

La prossima linea che deve cambiare è il Immagine tag, in cui è necessario modificare il percorso pertinente della sorgente dell'immagine. Attualmente sembra così:

Lo cambieremo in questo modo:

Qui questo tag dinamico otterrà la piccola immagine reale del prodotto di 236 x 357 pixel. Quindi, dobbiamo cambiare questo Aggiungi al carrello link:

Aggiungi al carrello

Lo cambieremo in questo modo:

getProductUrl ()?> "> isSaleable ()):?> __ ('Aggiungi al carrello')?>  __ ("Non disponibile")?>   

Ha un URL dinamico per la pagina dei dettagli del prodotto e mostra solo "Aggiungi al carrello" se il prodotto è disponibile. Altrimenti mostrerà "esaurito". Infine, aggiorneremo il prezzo e il nome del prodotto, sostituendo questa riga:

Iphone 5s Gold 32 GB 2013
 
$ 451.00
 

Con questo: 

helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 

Questo renderà pronta la nostra visione del singolo prodotto, ma per iterarlo su tutti i nuovi prodotti, dobbiamo racchiudere il nostro elemento div in un ciclo, quindi aggiungeremo questa riga all'inizio:

getItems () come $ _product):?>

E questa linea alla fine di esso per terminare il ciclo:

Quindi il codice completo per quel file diventerà così:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nuovo')?>__ ('Prodotti')?>
 
 
 getItems () come $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSaleable ()):?> __ ('Aggiungi al carrello')?>  __ ("Non disponibile")?>   
 
helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Aggiorna la tua home page ora. Dovrebbe avere una sezione di nuovi prodotti perfettamente funzionante e stilizzata, che assomiglierebbe a questo:

Ora abbiamo bisogno di modificare il piè di pagina prima che abbiamo finito con la home page. Se guardiamo al nostro design HTML, il piè di pagina ha quattro sezioni. Il primo mostra "Our Brands", il secondo mostra un box di iscrizione e link di social media, il terzo mostra alcuni URL e il quarto solo l'avviso di copyright.

La quarta sezione è già presente nel nostro tema, quindi dobbiamo solo modificare il contenuto e gli stili, ma gli altri tre componenti che dobbiamo aggiungere nel nostro tema. 

Per aggiungere un componente, creeremo un nuovo Blocco statico dal pannello di amministrazione e inseriremo il nostro contenuto. Quindi, andremo a Pannello di amministrazione> Blocchi statici> Aggiungi nuovo blocco, e aggiungere un nuovo blocco per il I nostri marchi sezione. Cambiamo il titolo del blocco in "I nostri marchi", impostiamo l'identificativo su "our_brands", selezioniamo la visualizzazione del negozio di "All Store Views" e lo inseriamo nella sezione del contenuto:

Nostro  Marche
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Se guardi da vicino, è lo stesso codice che abbiamo nel nostro codice HTML per questa sezione: abbiamo appena modificato i relativi percorsi delle immagini, caricando manualmente le nuove immagini dall'editor WYSIWYG. Salva il blocco e inizia a creare un altro blocco per la sezione di registrazione.

Per questo secondo blocco, utilizzeremo il titolo del blocco 'Above Footer'. Per l'identificatore utilizzeremo 'above_footer', e per il contenuto inseriremo questo codice:

Ora dobbiamo creare il blocco dei collegamenti in modo simile. Creeremo un nuovo blocco con il titolo del blocco di "Footer Links", con l'identificatore come "footer_links" e inserendo questo codice:

 
Cliente Supporto
 
 
FAQ
 
Opzione di pagamento
 
Consigli per la prenotazione
 
infomation
 
 
 
 
Cliente Supporto
 
 
FAQ
 
Opzione di pagamento
 
Consigli per la prenotazione
 
infomation
 
 
 
 
Cliente Supporto
 
 
FAQ
 
Opzione di pagamento
 
Consigli per la prenotazione
 
infomation
 
 
 
 
Contatto Informazioni
 
Anwar ul Haq, California
 
Chiamaci: (123) 398 5063
 
Chiamaci: (123) 398 5063
 
Email: abs @ tutsplus
 
 

Tutti questi collegamenti non si collegano da nessuna parte ora, ma è possibile modificarli in seguito. I collegamenti immagine sono di nuovo generati dinamicamente utilizzando la funzione di caricamento dell'editor WYSIWYG. Tutto il resto del codice è solo copiato e incollato dall'HTML.

Salva anche questo blocco e controlla la pagina iniziale, ma non vedrai ancora questi tre blocchi. Questo perché devi indicare esplicitamente a Magento dove mostrare questi nuovi blocchi e che possiamo fare dalla sezione di layout. Per questo, vai al layout / local.xml file, e aggiungere queste righe, appena prima della chiusura del predefinito etichetta.

  footer_links   above_footer   i nostri marchi   

Questo codice XML sta fondamentalmente dicendo a Magento di aggiungere questi due nuovi blocchi nella sezione del piè di pagina di Magento. Infine, dobbiamo chiamare questi blocchi dal file phtml del footer. Per questo creeremo un nuovo file footer.phtml in questa posizione: template / page / html / footer.phtml.

Aggiungi questo codice in questo footer.phtml file: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Questo è di nuovo solo il codice HTML preso, in cui tutti i codici di sezione sono sostituiti con collegamenti rilevanti a blocchi statici. E la sezione sul copyright viene sostituita con un tag dinamico di copyright.

Controlla la home page ora e dovrebbe ora mostrare questi blocchi statici appena creati, e dovrebbe assomigliare a questo:

La nostra home page è ora completa. L'unica cosa che rimane è un po 'di correzione dello stile, e lo faremo nel prossimo articolo.