Spesso mi capita di vedere siti di e-commerce in cui il form per l'accesso e la registrazione degli utenti si apre in una finestra modale. Un esempio illustre è Zalando.

Come possiamo ottenere questo risultato con Magento e Bootstrap?

Sappiamo che per realizzare una finestra modale con Bootstrap è necessario utilizzare i data attributes html5 [qui la documentazione], ma i link 'accedi' e 'registrati' sono gestiti in Magento dai toplinks. Le istruzioni per manipolare questo particolare blocco sono distribuite tra i vari fogli .xml del template, non troverete da nessuna parte un con file il codice html del menu quindi non è possibile inserire i data attributes nel template phtml come faremmo con qualsiasi altro link di qualsiasi altro menù.

Come risolvere? La prima idea che ci viene in mente è quella di sostiture l'intero blocco dei toplinks con un blocco nuovo realizzato ad hoc ma non è una soluzione tanto efficace perchè ci toccherebbe fare due blocchi diversi per l'utente registrato e per l'utente ospite (non avrebbe senso mostrare a un utente già loggato il link accedi, si farebbe solo confusione).

La soluzione che secondo me funziona meglio è andare ad editare direttamente le istruzioni xml.

E' buona norma non avere mai più di un file xml all'interno del template [approfondisci], quindi nel nostro local.xml scriviamo:

<customer_logged_out>
    <reference name="top.links"> 
       <action method="removeLinkByUrl"><url helper="customer/getLoginUrl"/></action> 
       <action method="removeLinkByUrl"><url helper="customer/getAccountUrl"/></action> 
       <action method="addLink" translate="label title" module="wishlist">
       <label>My account</label>
       <url>#</url>
       <title>My account</title>
       <prepare/><urlParams/>
       <position>1</position>
       <li/><a>data-toggle="modal" data-target="#modal-login"</a>
       </action>
    </reference>
</customer_logged_out>

E' questo è l'output (direttamente da firebug):

Non ci resta che duplicare i seguenti file:

customer/form/login.phtml
customer/form/register.phtml

customizzarli a piacere e farli diventare i target della nostra modale.

Irene Iaccio

Developer

chi sono