Magento per i progettisti parte 5

Magento è una piattaforma di e-commerce incredibilmente potente. In questa miniserie impareremo come iniziare con la piattaforma, conoscere i termini, impostare un negozio e tutti gli aspetti correlati e imparare finalmente come personalizzarlo per renderlo nostro.

In questa quinta parte, costruiremo una delle principali viste del nostro negozio: la pagina delle informazioni sul prodotto. Eccitato? Iniziamo!

La serie completa

Parte 1: installazione e configurazione
Parte 2: Prodotti, tasse, categorie, gateway di pagamento, ecc.
Parte 3: Theming
Parte 4: Costruire il tema
Parte 5: Creazione della pagina delle informazioni sul prodotto

Una rapida riassunzione

Nell'ultima parte, abbiamo definito il framework per il tema costruendo le parti ripetitive del tema e definendo essenzialmente la disposizione generale del tema.

Abbiamo anche dato uno sguardo pratico a come la tematizzazione in Magento funziona esaminando il modo in cui il layout è stato costruito, come funzionano i blocchi e come si inseriscono tutti i diversi pezzi del puzzle.

Cosa stiamo costruendo oggi?

Oggi costruiremo la pagina di visualizzazione dei singoli prodotti. Proprio come prima, i file sorgente, sia front-end che back-end, sono inclusi. Puoi usarlo per vedere come appare la pagina, ma al di fuori di esso, il tema dovrebbe apparire infranto poiché, sai, non abbiamo ancora toccato il resto delle visualizzazioni. Quindi, finché non costruiamo il resto, cerca di non avventurarci fuori dalla nostra sandbox.

Obiettivi per la pagina

Il nostro obiettivo per questa pagina specifica è relativamente semplice. Vogliamo una pagina senza sciocchezze che faccia solo l'essenziale. Pertanto, ho stilato una breve lista di elementi che ritengo abbia bisogno:

Il titolo del prodotto: abbastanza ovvio
Capacità di mostrare un'immagine del prodotto
Una panoramica rapida e completa
Disponibilità e prezzo del prodotto e infine
Un pulsante Aggiungi al carrello per metterlo nel carrello

Questo è tutto. Voglio mantenerlo il più semplice possibile e quindi ho deciso di non farlo. Una volta che hai imparato i principi generali, sentiti libero di aggiungere il maggior numero possibile di caratteristiche di whizbang.

Il look di base

La pagina deve fondamentalmente apparire così:

Passaggio 1: HTML

Per prima cosa considereremo l'HTML solo per la parte del contenuto. Suppongo che tu sia abbastanza fluente in HTML e CSS, quindi salterò alle parti abbastanza importanti.

  
  Disponibilità disponibile
 Prezzo $ 29.00
 Aggiungi al carrello 
 Photoshop in HTML
 Veloce panoramica
  Descrizione del prodotto

Innanzitutto, nota che ho avvolto l'immagine del prodotto con un div per rendere più semplice l'aggiunta di funzionalità in futuro. Supponiamo che tu voglia aggiungere una didascalia rapida all'immagine visualizzata in futuro, in questo modo ci permetterà di aggiungere questo molto più velocemente.

Abbiamo un altro elemento div che contiene le informazioni sulla disponibilità e sui prezzi insieme a Aggiungi al carrello pulsante. Ci metteremo un po 'in ordine con un po' di CSS3.

Il resto dell'HTML è molto semplice. Il titolo risiede in una sezione h1 mentre le intestazioni delle singole sezioni occupano h2. La panoramica rapida è nidificata in un paragrafo mentre la panoramica completa occupa un div.

Ora possiamo passare alla parte styling.

Passaggio 2: il CSS

 / * Pagina prodotto * / # immagine-prodotto principale margine: 0 20px 10px 0; imbottitura: 10px; fluttuare: a sinistra; border: 1px solid # E1E1E1; sfondo: # F3F3F3;  # product-details width: 180px; imbottitura: 10px; float: giusto; border: 1px solid # E1E1E1; sfondo: # F3F3F3; margine: 0 0 0 20 px;  # span disponibilità prodotto. disponibile, # span prezzo prodotto colore: # 7db000; float: giusto; . button margin: 10px auto; blocco di visualizzazione; larghezza: 140 px; imbottitura: 5px 10px; allineamento del testo: centro; decorazione del testo: nessuna; colore: # 555; border: 1px solid #ccc; font-size: 18px; sfondo: #ddd; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-shadow: 1px 1px 2px rgba (0,0,0, .5); -webkit-box-shadow: 1px 1px 2px rgba (0,0,0, .5); -moz-box-shadow: 1px 1px 2px rgba (0,0,0, .5); text-shadow: #fff 0px 1px 1px; background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (#eeeeee), a (#cccccc)); background: -moz-linear-gradient (in alto, #eeeeee, #cccccc);  .button: hover background: # 014464; background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (#cccccc), a (# 999999)); background: -moz-linear-gradient (in alto, #cccccc, # 999999); colore: # 000; . Pulsante: attivo -moz-box-shadow: 0 2px 6px nero; -webkit-box-shadow: 0 2px 6px nero;

Niente di eccezionale qui. CSS di base per posizionare gli elementi in posizione.

Ho anche usato un po 'di CSS3 per rendere i pulsanti un po' più belli.

Passaggio 3: creazione del nostro file catalog.xml

Come accennato nella prima parte, ogni modulo riceve il proprio file XML per dettare quali elementi includere e il layout generale della pagina. La pagina che stiamo costruendo oggi si basa su un file chiamato catalog.xml per definirne il contenuto e la struttura.

Questo file dovrebbe essere presente nel disposizione cartella quindi creiamo un file XML e nominalo Catalogare.

Il file completo per oggi sembra così. Spiegherò ogni bit parte per parte qui sotto.

    Catalogo Visualizza prodotto (Qualsiasi)      css / product.css

Ignorare le dichiarazioni iniziali della versione XML e di layout. Non hanno alcun significato per noi ora.

Innanzitutto, facciamo sapere al sistema che intendiamo modificare la parte di visualizzazione del prodotto del sistema. Questo è perché catalog.xml ospita il layout per una serie di altre visualizzazioni e quindi è fondamentale specificare quale vista intendiamo modificare.

Ora, diciamo a Magento di caricare il 1column.phtml file come modello principale principale per questa vista. Questo perché ogni singola vista può utilizzare qualsiasi struttura predefinita. Ad esempio, la tua home page potrebbe utilizzare una struttura personalizzata molto complessa, la pagina del prodotto una doppia colonna e la pagina di ricerca un layout a colonna singola.

Se non viene specificato nulla, verrà caricato il modello predefinito menzionato in page.xml. Dal momento che lo usiamo per tutto il resto, questa parte è ridondante ma quando si modifica questo modello per uso personale, la modifica del nome del file è molto più semplice dell'aggiunta di blocchi di XML al file di layout.

  css / product.css

E ora ci imbattiamo in una delle parti più eleganti di Magento. Sì, possiamo lanciare tutti i nostri CSS specifici per le view in un gigantesco file CSS, ma non siamo cavernicoli, vero? Grida di richieste HTTP multiple a parte, questo metodo ci consente di ottimizzare meglio il nostro CSS.

Per prima cosa acquisiamo un riferimento alla sezione head del file e quindi inseriamo il nostro contenuto specifico della pagina in esso. Ecco, sto inserendo un file chiamato product.css che contiene tutti i CSS specifici per le pagine che abbiamo visto sopra.

Nota che non sei limitato ai CSS. Anche JS e altre attività sono possibili.

Ora chiediamo a Magento di utilizzare un modello specifico per la parte di contenuto della pagina

Questo blocco definisce tutti i singoli blocchi all'interno del blocco del contenuto principale. In sostanza, utilizziamo i singoli modelli per visualizzare l'immagine del prodotto, la descrizione e la descrizione, la disponibilità / prezzo e infine la funzionalità di aggiunta al carrello.

E con questo, la nostra base catalog.xml il file è completo.

Passaggio 4: creazione del nostro modello principale

Ok, ora che abbiamo specificato il nostro layout possiamo passare alla creazione di Catalogo / prodotto / view.phtml file che abbiamo specificato come modello principale per la sezione del contenuto nell'XML in precedenza.

Questo file è leggermente diverso dal modello di scheletro che abbiamo creato nell'ultima parte, perché aggiungeremo alcune piccole cose direttamente invece di passare attraverso il percorso del modello per evitare il rigonfiamento e lo smidgen delle chiamate API per aiutarci.

 helper ( 'Catalogo / output'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ('Panoramica rapida')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('description')?>

Se dai una rapida occhiata, noterai che ne stiamo facendo numerosi getChildHtml chiama per acquisire quel blocchi di contenuti. Questi funzionano proprio come previsto e il contenuto di questi contenuti sarà trattato poco dopo.

 helper ( 'Catalogo / output'); $ _product = $ this-> getProduct (); ?>

Al momento, non abbiamo bisogno di sapere cosa significhi. In parole povere, in sostanza, chiediamo a Magento informazioni sul negozio specifico di questo prodotto, in modo che possiamo elaborarlo e quindi visualizzarlo sulla pagina.

 getOptions ()):?> enctype = "multipart / form-data">

Qui usiamo uno dei metodi API di Magento per generare dinamicamente l'URL che il modulo deve pubblicare.

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

Usiamo un altro dei metodi di Magento per acquisire direttamente il titolo del prodotto.

 getShortDescription ()):?> __ ('Panoramica rapida')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

E ancora, dato che la rapida panoramica sarà solo una frase o due, sto optando per importarla direttamente invece di usare un modello. Usiamo la stessa funzione che abbiamo usato per acquisire il titolo.

Passaggio 5: creazione dei modelli per i blocchi

Con tutte le parti principali fatte, ora possiamo concentrarci sui singoli blocchi. Ora che ci siamo già occupati di questo durante la costruzione del modello principale, ora dovrebbe essere molto più semplice.

Affronteremo ciascuno in ordine di apparizione nel nostro codice:

Immagine del prodotto

getChildHtml ( 'media') mappe direttamente a / Catalogo della merce / view / media.phtml. Il nostro file sembra così:

 EsprProdotto (); $ _helper = $ this-> helper ('catalog / output'); ?> helper ('catalog / image') -> init ($ _ product, 'image'). '"alt ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"title ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ product, $ _img, 'image');?>

Qualche semplice codice PHP. Usiamo i metodi di supporto per acquisire l'immagine del prodotto e quindi renderlo sullo schermo.

Disponibilità / prezzo

getChildHtml ( 'product_type_data') mappe direttamente a / Catalogo della merce / view / tipo / simple.phtml. Il nostro file sembra così:

 getProduct ()?> Disponibilità isSaleable ()):?> __ ('In magazzino')?>  __ ("Non disponibile")?>  
 Prezzo getPriceHtml ($ _ prodotto)?>

Per prima cosa controlliamo se l'articolo è disponibile o meno e quindi emettiamo l'HTML richiesto. Acquisire il prezzo del prodotto è un semplice richiamo del metodo!

Aggiungi al carrello

getChildHtml ( 'addToCart') mappe direttamente a / Catalogo della merce / view / addtocart.phtml. Il nostro file sembra così:

 getProduct ()?> isSaleable ()):?>

Come è logico, controlliamo se un articolo è in vendita prima di produrre l'HTML richiesto. È un pulsante semplice come è evidente.

Descrizione del prodotto

getChildHtml ( 'descrizione') mappe direttamente a / Catalogo della merce / view / description.phtml. Il nostro file sembra così:

 EsprProdotto () -> getDescription (); ?>  Descrizione del prodotto
 helper ('catalog / output') -> productAttribute ($ this-> getProduct (), nl2br ($ _ description), 'description')?>

Simile a come abbiamo incluso la rapida panoramica, usiamo i metodi incorporati di Magento per acquisire le informazioni necessarie. Controlliamo l'esistenza della descrizione prima di renderla.

Nel caso in cui sei curioso, in genere tendo ad includere la descrizione separatamente tramite i modelli, soprattutto perché nei modelli di produzione quasi sempre troverai la descrizione della processionaria in qualche modo. In questi scenari, è più semplice suddividere questa logica nel proprio modello. Una rapida panoramica, d'altra parte, è di solito piuttosto piccola e quindi viene inclusa direttamente.

Cosa costruiremo nella prossima parte

... dipende completamente da te. Ci sono un certo numero di punti di vista che potresti progettare ma è piuttosto presuntuoso da parte mia sceglierne uno. Perciò chiedo a te, lettore, di suggerire una visione da trattare nella parte successiva attraverso un commento nella sezione commenti qui sotto. Non dimenticare di dirmi quale sarà il prossimo!

L'ultima parola

E abbiamo finito! Oggi abbiamo creato la prima vista del nostro tema Magento personalizzato, la vista del prodotto e il modo in cui Magento ci consente di aggiungere risorse e contenuti specifici della pagina. Spero che questo ti sia stato utile e l'hai trovato interessante. Dato che questo è un argomento piuttosto nuovo per molti lettori, osserverò attentamente la sezione dei commenti in modo da sentirci dentro se hai dei dubbi.

Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!

Codice