MAGENTO: I template della pagina shop con la lista dei prodotti

Questo articolo è il terzo di una serie volta alla realizzazione di un template personalizzato per Magento; invito quindi coloro che non hanno letto i precedenti articoli, ad effettuarne una rapida lettura in modo da possedere un quadro più limpido dell’argomento trattato (trovate l’indice alla fine dell’articolo).

Oggi vedremo assieme come realizzare una delle pagine più importanti del nostro store, ovvero la lista dei prodotti. La lista dei prodotti, detta anche catalogo, rappresenta una vera e propria vetrina da sfruttare nel migliore dei modi per ottenere vendite e profitto.

Come dico sempre, un negozio online deve essere sempre paragonabile ad un comune negozio su strada e anche la tematica vetrina non si discosta da questa osservazione.

Quanti di voi il sabato pomeriggio passeggiano per strada guardando le vetrine dei negozi?
Rappresentano un potentissimo strumento di marketing poiché costituiscono la facciata esterna di un negozio e il primissimo approccio con i possibili clienti: è per questo che i negozianti se ne prendono cura, allestendole nel modo migliore e presentando con cura i prodotti di punta del loro assortimento.

I BEST SELLER IN VETRINA

La stessa situazione si ripresenta in un negozio online; alcuni prodotti presentano caratteristiche tali da risultare più appetibili rispetto ad altri e per questo meritano un posto in vetrina che, nel mondo virtuale, può corrispondere alla Home Page del nostro sito web.

Magento purtroppo non fornisce un modo intuitivo per inserire prodotti in prima pagina, per farlo bisogna infatti ricorrere ad uno stratagemma.
Per cominciare dovremo creare una nuova categoria, nella quale inseriremo i prodotti che appariranno in vetrina. Creare una categoria è semplicissimo, per farlo basta recarsi nel nostro Backend e, posizionandoci sul menù catalogo, cliccare su gestisci categorie.

Magento1

Dopo aver fatto questa operazione, salviamo il tutto. Magento ora avrà creato un ID univoco per la categoria, nel nostro caso è il numero 4: annotiamolo perché ci servirà tra pochissimo.

magento2

D’ora in avanti i prodotti che vorremo inserire all’interno della nostra Home Page dovranno essere assegnati, oltre alla categoria di appartenenza,  anche a quella “Vetrina” precedentemente creata.

Per segnalare a Magento la presenza di questa nuova categoria e soprattutto per far sì che i prodotti siti al suo interno vengano mostrati in prima pagina, dobbiamo recarci nella gestione della Home Page: per farlo andiamo nel menu Cms e scegliamo la voce Pagine;
Raggiungiamo la Home:

magento3

e, all’interno della sezione content, inseriamo la seguente stringa:

{{block type="catalog/product_list" coloumn_count=”4” category_id="4" template="catalog/product/list.phtml"}}

Dove il valore di coloumn_count rappresenta il numero di prodotti per riga e il valore di category_id corrisponde all’ID della categoria adibita allo scopo di contenere i prodotti visibili in Home, nel nostro caso il 4.

Il risultato è questo:

magento4

Ovviamente dal punto di vista grafico non è il massimo, ma basterà lavorare un po’ con i css e in un batter d’occhio la nostra Home assumerà un aspetto decisamente migliore.

IL CATALOGO INTERNO

RIMOZIONE DEL SONDAGGIO E DEL CUSTOMER SERVICE

Passiamo ora ad esaminare il catalogo interno e i modi per migliorarlo.
Il catalogo base di Magento si presenta così:

magento5

La prima cosa da eliminare è senza dubbio l’immagine relativa al customer service che si presenta da subito difficile da rimuovere per i neofiti.
In realtà eliminarla è molto semplice basta semplicemente intervenire sul file xml che si trova all’interno di app\design\frontend\default\your_theme\template\callouts\

e commentarne il contenuto oppure sostituire l’immagine “col_right_callout.jpg”.

Un’altra sezione assolutamente inutile a mio avviso è quella relativa al sondaggio, a meno che non ci interessi sapere qual è il colore preferito dei nostri clienti.
Essa viene dichiarata nel file app\design\frontend\default\your_theme\layout\poll.xml

Per rimuoverla ci basta commentare o rimuovere questa parte di codice:

<reference name="right">
  <block type="poll/activePoll" name="right.poll">
    <action method="setPollTemplate"><template>poll/active.phtml</template><type>poll</type></action>
    <action method="setPollTemplate"><template>poll/result.phtml</template><type>results</type></action>
  </block>
</reference>

AGGIUNGERE UNA BREVE DESCRIZIONE

Osservando il catalogo principale, si nota subito che manca qualche informazione.
Il nome del prodotto, per quanto possa essere intuitivo e specifico, non è adatto a descriverne le caratteristiche e i nostri possibili clienti saranno costretti ad aprire ad uno ad uno i prodotti per avere qualche informazione in più e questo potrebbe spazientirli.

Vediamo quindi come inserire all’interno del catalogo una breve descrizione.

Il file che regola la maggior parte degli aspetti della pagina del catalogo è il list.phtml che possiamo trovare all’interno di app/design/frontend/default/mio_tema/template/catalog/product/

Inseriremo la breve descrizione subito sotto il nome del prodotto. Per farlo utilizzeremo uno dei metodi di Magento, visti nell’articolo precedente, ovvero:

echo $_product->getShortDescription(); 

Ci posizioniamo quindi appena sotto al tag h2 che dichiara il nome del prodotto e inseriamo, con un tag h6 la sua breve descrizione:

<h2 class="product-name">
  <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>">
    <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
  </a>
</h2>

<h6><?php echo $_product->getShortDescription(); ?></h6>

Il risultato è il seguente:
magento6

Modificando quindi il file list.phtml potremo eliminare ad aggiungere, utilizzando i metodi di Magento le informazioni che vogliamo mostrare ai nostri possibili clienti.

LA TOOLBAR

Concludiamo il nostro viaggio all’interno del catalogo analizzando la toolbar, ovvero al zona in alto che permette ai nostri clienti di gestire le visualizzazioni e il numero di prodotti per pagina. Il file che ha il compito di regolarla è tollbar.phtml e si trova all’interno di app/design/frontend/design/default/my_theme/catalog/product/list

Una delle cose che faccio molto spesso è quella di togliere al cliente la possibilità di decidere il numero di prodotti per pagina in quanto credo che i troppi menù a tendina potrebbero distrarre il cliente dalle cose realmente importanti, ovvero i prodotti!

Per eliminare questa possibilità ci basta commentare o rimuovere la seguente stringa di codice all’interno del suddetto file toolbar.phtml:

<div class="limiter">
  <label><?php echo $this->__('Show') ?></label>
  <select onchange="setLocation(this.value)">
  <?php foreach ($this->getAvailableLimit() as  $_key=>$_limit): ?>
    <option value="<?php echo $this->getLimitUrl($_key) ?>"<?php if($this->isLimitCurrent($_key)): ?> selected="selected"<?php endif ?>>
      <?php echo $_limit ?>
    </option>
  <?php endforeach; ?>
  </select> <?php echo $this->__('per page') ?>
</div>

Molte altre impostazioni del catalogo sono gestibili direttamente da backend e per farlo basta andare all’interno del menù Sistema -> Configurazione -> Catalogo
Come ad esempio il numero di prodotti per pagina e il loro ordinamento.
Per il resto come al solito basta liberare la propria fantasia e lavorare bene con i css per ottenere grandi risultati…

Non mi resta altro da fare che salutarvi, ma prima voglio chiedervi: quali sono i vostri consigli per realizzare un catalogo accattivante e d’impatto?

Indice
Velocizzare il vostro sito web Magento in 5 passi
Come Realizzare un Template per Magento da Zero
Magento – I template della pagina del prodotto
MAGENTO: I template della pagina shop con la lista dei prodotti

Tag: ,

L'autore

Web Developer con la passione per Magento. Lavora stabilmente in una web agency, ma nel tempo libero adora insegnare le sue conoscenze in ambito web a giovani e motivati studenti; Ha una passione segreta per i CSS e il suo hobby preferito è quello di costruire Layout responsive.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

Lascia un Commento