Sviluppo di temi Magento Home Page, Parte 2

Nel precedente tutorial di questa serie, abbiamo iniziato a modificare la sezione dell'intestazione della home page. In questo tutorial, inizieremo da dove abbiamo interrotto il miglioramento della sezione di intestazione, quindi creeremo il nuovo blocco CMS del dispositivo di scorrimento e lo chiameremo dai nostri file modello. Dato che abbiamo molto da trattare in questo articolo, iniziamo senza ulteriori ritardi.

Dato che abbiamo parzialmente riparato l'intestazione superiore, l'unica cosa che deve essere riparata è la sezione superiore del carrello. Per personalizzare il carrello dell'intestazione, in primo luogo cercheremo di scoprire quali file modello sono responsabili del rendering di quella parte. Per analizzarlo, prima aggiungiamo alcuni prodotti al carrello, in modo da consentirci di studiarlo completamente.

Quando abilitiamo i suggerimenti del modello, possiamo vedere che il contenitore esterno del carrello dell'intestazione proviene da questo file modello: frontend / RWD / default / template / cassa / carrello / minicart.phtml.Quindi, al clic, la porzione espansa viene sottoposta a rendering tramite questo file: frontend / RWD / default / template / cassa / carrello / minicart / items.phtml. Infine, ogni articolo del carrello viene visualizzato tramite questo file: frontend / RWD / default / template / cassa / carrello / minicart / default.phtml.

Importeremo tutti questi file nel nostro tema appena creato e quindi inizieremo a modificarli.

Iniziamo il processo di modifica con il più esterno minicart.phtml file. Questo è il codice corrente di questo file:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> helper ('checkout / cart') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __('Carrello'); ?>    getChildHtml ( 'minicart_content');?>

Ora, prima di iniziare qualsiasi modifica, controlliamo il codice della nostra sezione del carrello di test nel nostro file HTML originale. Il codice ci appare così:

 carrello     
  Sedia Lincoln
 Taglia: Taglia unica
 Quantità: 01
 
  $ 30.00
 
 
 
   
  Sedia Lincoln
 Taglia: Taglia unica
 Quantità: 01
 
  $ 30.00
 
 
 
 Totale $ 60.00

Quindi, inizieremo a modificare il codice del file PHP per renderlo simile al nostro codice HTML. Qui useremo solo un tag di ancoraggio per avvolgere l'icona del carrello, dopodiché mostreremo il contenuto del minicart. Quindi il nostro codice sarà simile a questo:

helper ( 'checkout / cart') -> getCartUrl (); ?> "> Carrello  getChildHtml ( 'minicart_content');?>

Qui abbiamo sostituito il wrapper più esterno del carrello in alto, ma ora dobbiamo modificare il wrapper della sezione a discesa. Come abbiamo già visto, da quel wrapper arriva frontend / RWD / default / template / cassa / carrello / minicart / items.phtml. Controlliamo il codice corrente di questo file:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Articoli aggiunti di recente')?> __ ('Chiudi'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('TOTALE D'ORDINE SARÀ VISUALIZZATO PRIMA DI INVIARE L'ORDINE'); ?>  __ ('Totale parziale carrello:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Checkout')?> "Href ="getCheckoutUrl ()?> "> __ ('Checkout')?>  
 
  getUrl ( 'cassa / carrello'); ?> "> __('Vedi il Carrello'); ?>  
  __ ('Non ci sono articoli nel carrello.')?>

Quando lo confrontiamo con il nostro modello HTML, ci sono un paio di cose che dobbiamo fare. Prima di tutto, all'interno del wrapper minicart div, inizieremo ad implementare il nostro ul, e per ogni oggetto andremo a scorrere sotto Li etichetta. Alla fine, mostreremo il totale del carrello o indicherò che non ci sono articoli nel carrello. Il nostro codice finale per questo file sarà simile a questo:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('TOTALE D'ORDINE SARÀ VISUALIZZATO PRIMA DI INVIARE L'ORDINE'); ?>  __ ('Totale parziale carrello:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('Non ci sono articoli nel carrello.')?>

Ora la parte finale che rimane è quella di definire lo stesso elemento della lista dei carrelli. Come abbiamo già capito, il file responsabile di quella parte è: frontend / RWD / default / template / cassa / carrello / minicart / default.phtml.

Il codice corrente di questo file sembra abbastanza lungo e difficile da capire, ma non lasciati intimidire. Non è necessario modificare tutto questo, perché la parte principale del codice file è solo il calcolo del giusto prezzo e di altre opzioni di prodotto. Ancora una volta, controlleremo il nostro codice HTML, lo inseriremo in questo file e inizieremo a sostituire il testo statico con valori dinamici. Questo è il codice per ogni articolo del carrello nel nostro codice HTML:

  
  Sedia Lincoln
 Taglia: Taglia unica
 Quantità: 01
 
  $ 30.00

Sostituiremo il img tag con questo:

Successivamente, sostituiremo il nome con il codice dinamico:

hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>

Per visualizzare le opzioni del prodotto, utilizzeremo questo codice dinamico:

getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:

Quindi determineremo e mostreremo la quantità usando questo codice:

__ ( 'Uds:'); ?> getQty ()?>

Per il calcolo del prezzo, inseriremo questo codice al posto del prezzo statico:

 __ ('Vedi il prezzo prima della conferma dell'ordine.'); ?>  helper ('tax') -> displayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ("Tasse escluse"); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ( 'cassa') -> formatprice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'importo'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Totale'); ?>:
 helper ( 'cassa') -> formatprice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('tax') -> displayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ( 'cassa') -> getPriceInclTax ($ _ voce); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ("IVA inclusa"); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'importo'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totale tasse incluse'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

E come ultimo passaggio, sostituiremo l'href per rimuovere l'URL con questo:

getAjaxDeleteUrl ()?>

Ho trovato tutto questo codice dal reale default.phtml. Non devi calcolare tutta la logica e il codice per conto tuo, ma se lo guardi da vicino lo puoi trovare nel file che stai cercando di modificare.

Quindi, il codice finale del nostro default.phtml il file assomiglia a questo:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: helper ('catalog') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CONFIRM); ?>   
  hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
  getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  __ ( 'Uds:'); ?> getQty ()?> 
 
    __ ('Vedi il prezzo prima della conferma dell'ordine.'); ?>  helper ('tax') -> displayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ("Tasse escluse"); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ( 'cassa') -> formatprice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'importo'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Totale'); ?>:
 helper ( 'cassa') -> formatprice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('tax') -> displayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ( 'cassa') -> getPriceInclTax ($ _ voce); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ("IVA inclusa"); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'importo'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) come $ tax):?> : formatprice ($ fiscale [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totale tasse incluse'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

Ora se salvi tutti questi file e ricarichi la homepage, dovresti vedere qualcosa di simile a questo:

Abbiamo alcuni problemi con gli stili, ma il rendering HTML è abbastanza vicino alla nostra progettazione HTML richiesta. Ora che abbiamo completato la sezione di intestazione superiore, la prossima è la sezione del logo. Fortunatamente non c'è molto da fare tranne la parte styling (per allineare il centro del logo) che faremo nell'articolo di styling. Anche le nostre voci di menu sembrano molto simili a quelle che ci aspettiamo, quindi dovremo solo modificare la barra di ricerca e quindi il cursore principale.

Per modificare la nostra barra di ricerca, attiviamo i suggerimenti del modello e vediamo quale parte è responsabile per il rendering di questo codice: frontend / RWD / default / template / CatalogSearch / form.mini.phtml.

Attualmente questo file assomiglia a questo:

  __ ('Cerca:')?>   
 
  
 Se guardiamo l'HTML della barra di ricerca nel nostro file di progettazione HTML, sembra che questo:

Quindi, utilizzeremo le div esterne dell'HTML e sostituiremo il contenuto interno con il contenuto dinamico. Il nostro nuovo form.mini.phtml il file sarà simile a questo:

Nell'ultima parte di questo articolo, modificheremo il cursore principale. Per questo, creeremo un nuovo blocco statico, andando a CMS> Blocchi statici> Aggiungi nuovo blocco. Chiameremo questo blocco "Homepage Slider", e inseriremo l'identificatore come 'Casa-cursore'-è così che il codice sarà in grado di trovare questo blocco.

Ora inseriremo il codice del cursore dal nostro codice HTML.


 
    
 
   
  raggio di luce
 Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
 Acquistare ora 
 
   raggio di luce
 Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
 Acquistare ora

Si noti che abbiamo sostituito la sorgente dell'immagine relativa alla directory della skin usando skin_url tag come questo:

Ora aggiungeremo queste righe nel file header.phtml che abbiamo creato nell'ultimo articolo, appena sopra l'ultima riga getChildHtml ( 'topContainer'); ?>.

getIsHomePage ()):?> getLayout () -> createBlock ('csms / block') -> setBlockId ('home-slider') -> toHtml (); ?>

L'ultimo passo è rimuovere il cursore corrente. Per farlo, vai su Pagine CMS> Madison Island, e dal Soddisfare sezione, rimuovi tutto il codice fino all'inizio della sezione di stile.

Salva tutto e ricarica la home page e ora dovresti vedere tutto molto bene. Alcuni stili sono disattivati, ma ci occuperemo di questo in un tutorial sullo stile separato. Per ora dobbiamo solo occuparci della sezione dei contenuti della home page, dove mostreremo un ultimo carosello di prodotti, e poi personalizzeremo il piè di pagina. Faremo tutto questo nel prossimo tutorial, quindi restate sintonizzati per questo!

Codice