I template per carrello, checkout e account utente

Con questo articolo concludiamo il percorso che ci ha portati a conoscere il funzionamento dei template di Magento e soprattutto a crearne uno ex novo. Per chi fosse interessato a visionare gli articoli precedenti, può trovarne una lista in fondo alla pagina.

Oggi ci occuperemo delle sezioni inerenti il carrello, il checkout ed infine il profilo dei nostri clienti. Non perdiamoci quindi in ulteriori chiacchiere e scopriamo subito come personalizzarle.

Il Carrello

Il carrello della spesa è un elemento essenziale delle transazioni monetarie, non solo online ma anche nella vita quotidiana.

Ogni volta che ci rechiamo in un supermarket o in qualsiasi altro negozio e il numero di prodotti da acquistare è ingente, tendiamo ad usufruire dei carrelli; essi infatti non sono solo dei semplici contenitori che ci permettono di trasportare agevolmente la merce senza fatica, ma hanno la duplice funzione di farci rendere conto della mole dei prodotti acquistati e di tenere sotto controllo l’ammontare degli acquisti.

Situazione analoga si ripresenta in un negozio online dove ovviamente il carrello non possiede funzionalità di trasporto della merce, ma esclusivamente di monitoraggio dei costi dei prodotti acquistati.

La pagina carrello di Magento di default è questa:

shopping

Ed ecco come appare dopo aver inserito un prodotto

 carrello-pieno

La pagina carrello, contenente uno o più prodotti, appare di per se gradevole e ricca di informazioni utili, come ad esempio la Thumbnail del prodotto, la possibilità di aggiungere altri prodotti al carrello, di inserire un codice di sconto e di calcolare persino le spese di spedizione.

A mio avviso quindi non vi è molto da modificare, se non a livello di grafica, font e colori per adattare la pagina al template in uso nel migliore dei modi.

L’unica pecca forse è la mancanza di una breve descrizione del prodotto, vediamo quindi come implementarla.

Il file phtml che regola la griglia di prodotti nel carrello è situato all’interno del percorso:

frontend/default/mio_tema/template/checkout/cart/item/default.html

Nel caso in cui non ci fosse bisognerebbe crearlo ed inserire all’interno il contenuto del file sito in:

frontend/base/default/template/checkout/cart/item/default.phtml

poiché, come già detto nei precedenti articoli, è buona norma non modificare mai il tema di base, ma sovrascrivere i suoi file con i corrispondenti del nostro template.

Aprendo il file notiamo, intorno alle righe 32-40 la porzione di tabella che contiene il nome del prodotto


<td>

<h2>

<?php if ($this->hasProductUrl()):?>

<a href="<?php echo $this->getProductUrl() ?>"><?php echo $this->htmlEscape($this->getProductName()) ?></a>

<?php else: ?>

<?php echo $this->htmlEscape($this->getProductName()) ?>

<?php endif; ?>

</h2>

Non dovremo fare altro che modificare il codice inserendo la breve descrizione dell’articolo nel seguente modo:

<td></p>
       <h2></p>
       <?php if ($this->hasProductUrl()):?></p>
          <a href="<?php echo $this->getProductUrl() ?>"><?php echo $this->htmlEscape($this->getProductName()) ?>
<p><?php</p>
         $custom = Mage::getModel('catalog/product')->load($_item->getProductId());</p>
          echo $custom->getShortDescription();</p>
       ?></p></p>
       <?php else: ?></p>
           <?php echo $this->htmlEscape($this->getProductName()) ?></p>
        <p><?php</p>
           $custom = Mage::getModel('catalog/product')->load($_item->getProductId());</p>
           echo $custom->getShortDescription();</p>
           ?></p></p>
       <?php endif; ?></p>
       </h2></p>

Il risultato è questo:

DESCRIZIONE

Ho scelto volutamente questo esempio, poiché, la mia intenzione era quella di farvi capire la particolarità della pagina del carrello.

In essa, infatti, non è possibile utilizzare i soliti metodi di Magento, ragion per cui ho dovuto utilizzare:

<?php</p>
           $custom = Mage::getModel('catalog/product')->load($_item->getProductId());</p>
           echo $custom->getShortDescription();</p>
       ?></p>

Al posto di:

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

Questo accade perché in questa pagina non è definita la super variabile _product ed è quindi necessario crearne un’altra che, nel mio esempio, ho chiamato custom.

La stessa operazione si renderà quindi necessaria per accedere anche alle altre informazioni del prodotto, come ad esempio la descrizione, la quantità ecc.

Il Checkout

Magento svolge il checkout degli ordini in unica pagina.

Questo processo viene definito onepage checkout e consente al cliente di chiudere un ordine in modo molto semplice, senza dover passare da una pagina all’altra.

Questo vantaggio è dovuto all’uso delle richieste asincrone in Ajax che hanno semplificato notevolmente la vita di sviluppatori ed utenti esigenti e muniti di poca pazienza.

La pagina del checkout in Magento appare così:

checkout

Come si può notare, l’ordine viene evaso attraverso 6 passaggi e vi è anche la possibilità di registrarsi durante il processo.

Questo è uno dei tanti vantaggi di Magento poiché molti utenti non amano lasciare i propri dati personali per effettuare la registrazione.

Una volta che gli articoli sono stati aggiunti nel carrello, farlo diventa un azione del tutto indolore e percepita come un normale passaggio per effettuare l’acquisto più che una scocciatura.

La parte destra della pagina invece mostra il riepilogo dei vari passaggi effettuati e consente di ritornare sui propri passi.

Su questa pagina non vi è molto da dire, bisogna soltanto avere un po’ di pazienza e lavorare bene con i css per ottenere un ottimo impatto grafico.

A livello di contenuti è invece provvista delle informazioni giuste e non consiglio di modificarla.

Una volta effettuati tutti i passaggi ci troveremo dinnanzi alla pagina di conferma dell’ordine.

 success

Questa pagina è molto difficile da modificare, non perchè ci siano particolari problemi a livello di codice, ma perché se aggiorniamo la pagina essa scompare e un buon web designer sa bene che, prima di raggiungere un giusto equilibrio grafico, dovrà aggiornare la pagina sulla quale sta lavorando decine di volte.

Vediamo quindi come evitare che il refresh ci rimandi alla Home Page.

Aprimo il file OnePageController.php che si trova all’interno del percorso:

app/code/core/Mag/checkout/Controllers

e commentiamo questa riga di codice

</p>
$session->clear();</p>

che diventerà quindi:

</p>

// $session->clear();</p>

Come si deduce dal codice, questo comando pulisce la sessione, commentandolo potremo effettuare il refresh senza che la nostra sessione venga azzerata.

Una volta effettuate le modifche nella pagina di conferma dell’ordine potremo eliminare il commento e far siche la pagina riprenda il suo normale funzionamento.

Account Utente

Un account, che sia esso di un social network, di un forum o di un sito di e-commerce rappresenta la nostra identità all’interno della rete e molti utenti amano personalizzarlo per distinguersi in qualche modo dagli altri.

Anche Magento fornisce un sistema di account, finalizzato ovviamente alla possibilità di acquistare oggetti all’interno della piattaforma, poter commentare, iscriversi alla newsletter del negozio e tanto altro ancora.

La pagina dell’account utente su Magento appare così:

account

I file phtml che la regolano sono diversi, a seconda della tematica e della voce di menù selezionabile all’interno del menù My Account, ma sono riconducibili tutti allo stesso ceppo di appartenenza ovvero la cartella Customer all’interno di: app/design/frontend/default/mio_tema/template

Un aspetto forse limitante di Magento è quello che non offre la possibilità per gli utenti, di inserire un immagine personale.

Fortunatamente possiamo ovviare attraverso questa estensione, scaricabile direttamente dal Magento Connect

Con questo articolo finisce il nostro viaggio attraverso la realizzazione di un template per Magento.

Mi resta solo una domanda da porvi: Nella creazione dei vostri siti web  preferite creare un Template da zero o modificare uno già pronto all’uso?

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

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
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.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

  1. Loris
    • Luigi Sabbetti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *