Sviluppo di temi Magento file di modelli

In questo articolo, tratteremo le basi dei file di modelli di Magento. Andremo oltre la loro introduzione e fare alcune modifiche di base. 

Ciò includerà la visualizzazione dei prodotti in vetrina sulla home page e come caricare JavaScript nel footer.

Seguendo il nostro precedente articolo, abbiamo visto che i file di layout controllano ciascun blocco in un tema e decidono cosa viene visualizzato e non viene visualizzato. Ma ciò che viene reso all'interno di quel blocco è dove i file modello entrano in azione.

In questo articolo, ci concentreremo sulle seguenti directory:

• Modello - app / design / frontend ///modello/
• località - app / design / frontend /// Locale /

Se ti sei appena iscritto, assicurati di controllare gli articoli precedenti di questa serie.

Per riferimento, abbiamo coperto:

1. Un introduzione
2. File di layout

Senza fare altro, iniziamo.

Modello

I file modello Magento sono file PHTML composti da una combinazione di HTML e PHP, alcuni dei quali rendono una pagina come 1column.phtml mentre altri rendono blocchi specifici all'interno di una pagina come header.phtml. 

Per la maggior parte del tempo durante lo sviluppo di un sito Web questi sono i file con cui lavoreremo maggiormente, per gli sviluppatori di front-end, cioè. Una volta che l'XML è a posto e viene chiamato un modello, è previsto che il file venga analizzato e visualizzato di conseguenza.

Esistono centinaia di file modello disponibili, sapere quale modificare e quindi rintracciare il file nella gerarchia può essere complicato quando si inizia per la prima volta. 

Tutto va bene, ci sono alcune impostazioni di area amministrativa che possono aiutarci, ci faranno risparmiare ore di mal di testa!

Importante notare che possiamo utilizzare le seguenti impostazioni solo nel campo "Sito web" o "Vista archivio", le impostazioni non sono disponibili per l'ambito "Config predefinita", quindi è necessario ricordare di modificare l'ambito dopo aver effettuato l'accesso. Ciò è utile anche perché significa che è possibile modificare le impostazioni solo per un determinato sito Web o vista negozio piuttosto che a livello globale.

Suggerimenti sul modello

Questi identificheranno rapidamente quali file vengono caricati per una pagina specifica mostrandoci il percorso del file. Attivarlo o disattivarlo è una rapida modifica delle impostazioni nell'area di amministrazione. 

Dirigetevi verso sistema> configurazione. Quindi nel menu a sinistra scorri fino in fondo e fai clic su "Sviluppatore" sotto l'intestazione "Avanzate". Una volta modificato l'ambito in "Sito Web principale", avremo l'impostazione disponibile per "Debug".

Sembrerebbe che non sia successo nulla una volta che hai cliccato su save config, ma se vai sul front-end del sito web, ad esempio sulla homepage, e aggiorni la pagina vedrai i suggerimenti che arrivano. 

Con questo ora sappiamo dove si trovano i file, e se sono necessarie modifiche basta copiare il file dalla base al nostro tema e modificarlo se necessario.

Possiamo anche impostare "Aggiungi nome blocco ai suggerimenti" su "Sì" se vogliamo ulteriori informazioni, questo è generalmente utilizzato per lo sviluppo back-end, quindi non mi preoccuperei di questa impostazione troppo.

Ora, sul codice. Correrò attraverso un paio di modifiche che sono spesso utilizzate nello sviluppo del tema, ma di nuovo terrò solo in superficie ciò che è possibile.

1. Visualizzazione di prodotti in primo piano sulla homepage
2. Caricamento di JavaScript nel piè di pagina

Iniziamo…

1. Visualizzazione dei prodotti in vetrina sulla home page

Questo punto deve essere la richiesta più comune su qualsiasi sito Web, tutti vogliono mostrare una manciata di prodotti nella pagina di destinazione del loro sito giusto?

In realtà è molto più facile di quanto tu possa immaginare, con una combinazione di XML e PHP possiamo raggiungere questo obiettivo in pochissimo tempo. Ci sono, come con molte cose in Magento, più di un modo per farlo. Ti mostrerò quello che penso sia il metodo più semplice.

Per prima cosa, dobbiamo creare la nostra categoria nell'area amministrativa che terrà i nostri prodotti. Una volta effettuato l'accesso, vai su catalogo> gestisci categorie. Per questo esempio, creeremo una sottocategoria sotto root, quindi dobbiamo fare clic su "Root Catalogue" e quindi fare clic sul pulsante "Aggiungi sottocategoria". Inserisci un titolo per la categoria, assicurati che "È attivo" sia impostato su "Sì" e quindi fai clic su "Salva categoria".

Prendi nota del numero ID della categoria in alto, di cui avremo bisogno in seguito:

Sarà un buon momento per aggiungere alcuni prodotti alla categoria che abbiamo appena creato. Per fare ciò, fare clic sulla scheda "Prodotti di categoria" e selezionare i prodotti che si desidera visualizzare, senza dimenticare di fare clic su "Salva categoria" una volta terminato.

In seguito, dobbiamo creare il nostro modello in cui il nostro per ciascuno ciclo verrà eseguito.

Per questo lo baseremo sul modello di elenco dei prodotti che ha già tutto il codice necessario per noi, abbiamo solo bisogno di fare qualche aggiustamento per soddisfare le nostre esigenze.

app / design / frontend / base / default / catalogo / prodotto / list.phtml

Copia a:

app / design / frontend //default/catalog/product/list-home-featured.phtml

Quindi apporteremo alcune modifiche al nostro file.

1. Carica nella nostra collezione di prodotti tramite l'ID della categoria
2. Visualizza solo una vista, ho scelto la vista griglia, ma sentitevi liberi di cambiarla
3. Rimuovere la barra degli strumenti poiché non è più necessaria
4. Aggiungi il nome della nostra categoria per un'intestazione

Il file finito sarà simile al seguente:

 carico ($ _ categoryId); $ _productCollection = $ _category-> getProductCollection (); $ _ProductCollection-> addAttributeToSelect ( '*'); ?> 
getName (); ?>
 count ()):?> 
__ ('Non ci sono prodotti corrispondenti alla selezione.')?>
  
 
  
 getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">   
 getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>  
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>  getPriceHtml ($ _ product, true)?> 
 isSaleable ()):?> __ ('Aggiungi al carrello')?>  
__ ("Non disponibile")?>
  
 helper ('wishlist') -> isAllow ()):?> 
helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Aggiungi alla lista dei desideri')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('Aggiungi a Confronta')?>
  
 
 
  
 
 

Non dimenticare di cambiare il valore di $ _categoryId variabile al tuo ID categoria.

Infine, dobbiamo solo creare un blocco XML che verrà caricato nel modello che abbiamo creato sopra. Lo faremo nel nostro local.xml file in questo modo:

Questo è tutto quello che c'è da fare, piuttosto semplice, vero? Di seguito è uno screenshot del prodotto finito.

2. Caricamento di JavaScript nel piè di pagina

Per i principianti, penseremmo che Magento abbia già questa capacità incorporata attraverso l'XML quando aggiungiamo i nostri script, una sorta di parametro che potremmo passare, ma ci sbagliammo - Magento non ci renderà così facile per noi!

WordPress, d'altra parte, lo fa perfettamente tramite il wp_register_script. Forse uno sviluppatore di back-end prenderà in considerazione questo e aggiungerà la possibilità di passare attraverso un parametro XML aggiuntivo, ora c'è un progetto parallelo per qualcuno con cui farsi scoppiare. 

Qualsiasi acquirente?

Quindi, per fortuna per ora esiste un metodo alternativo per farlo funzionare.

Penso che sia importante coprire questo argomento in quanto migliorerà la velocità del nostro sito che tutti vogliono. Tendo a lasciare i file JavaScript di Magento rimasti come sono nel , Posso minificarli ma, a parte ciò, rimangono come sono.

Qualunque cosa aggiungiamo a Magento, come jQuery e le nostre funzioni personalizzate, non vi è alcun danno nel caricarle nel footer. Quando sviluppo un sito web tendo a tenere un occhio attento su tag, quando viene installato un modulo di terze parti, di solito aggiunge qualcosa qui. Con un po 'di lavoro possiamo modificare l'XML del modulo di terze parti e puntarlo per caricare il footer: vale la pena dedicare cinque minuti in più!

Per prima cosa dobbiamo creare un blocco XML nel nostro local.xml file all'interno dell'impostazione di layout predefinita in questo modo:

      skin_jsjs / build / jquery.min.js    

Si noti che stiamo usando lo stesso metodo di aggiungere file JavaScript come abbiamo fatto nel precedente articolo. Se hai bisogno di un aggiornamento clicca qui, a scopo dimostrativo aggiungeremo una copia locale di jQuery.

Ora possiamo andare a creare il nostro file modello. Crea un nuovo file in:

app / design / frontend //default/page/html/footer-js.phtml

con il seguente contenuto:

getCssJsHtml ()?>

Infine, dobbiamo aggiungere una singola riga di codice nei nostri file modello appena prima della chiusura etichetta.

I nostri file modello possono essere trovati su app / design / frontend / base / default / page / senza dimenticare di copiarli sul nostro tema. Esistono più file modello, ho raggruppato un elenco insieme di seguito:

• 1column.phtml
• 2columns-left.phtml
• 2columns-right.phtml
• 3columns.phtml

Di seguito è riportato un esempio di come dovrebbe apparire:

... getAbsoluteFooter ()?>  getChildHtml ('footer.js')?>  

Ora che tutti i passaggi sono completi, se aggiorniamo la nostra pagina e visualizziamo il codice sorgente, vedremo lo script che viene caricato appena prima della chiusura etichetta.

Se sei arrivato così lontano, penso che le congratulazioni siano d'obbligo! C'è molto da fare in una sola seduta, ma si spera che tutto abbia un senso.

Avvolgendolo!

Questa serie è solo la punta dell'iceberg, Magento è una piattaforma molto potente e ha molto altro da offrire rispetto a ciò che abbiamo coperto. Spero che ti abbia dato un'idea dei principi del tema di Magento e che tu possa farne buon uso.

Non c'è modo migliore per imparare Magento, ma per rimanere incastrati, imparerai le corde in pochissimo tempo.

Come sempre sono più che felice di aiutarti se hai bisogno di una mano con qualsiasi cosa. Assicurati anche di controllare il mio Magento Boilerplate che ha un sacco di chicche all'interno.

Fino alla prossima volta.