Cambiar aspecto visual de Global messages

Esta entrada irá dedicada a darle una apariencia más amigable a los global messages. La verdad es que cuando empecé con Magento esto era de las cosas que menos me gustaban, ya que siempre se mostraban los mensajes de error una vez recargas la página; es como que hay una cola de mensajes erróneos y cuando encuentra una página en la que tienes los global messages cargados los suelta todos. Esto nos estaba pasando a nosotros por ejemplo en el caso de separar el login en una página del CMS: en esta página introducías el login incorrecto las veces que quisieras, que el usuario no era consciente de lo que estaba pasando, sólo veía que se recargaba la página y luego si le daba por ir a crear cuenta (página en la que si están cargados) ponía todos los errores de golpe. Se comporta como si estuviera capturando errores y los soltara tan pronto pudiese.

Ejemplo de Global Messages
En este ejemplo he introducido el password incorrecto a la hora de hacer login y se ha recargado la página y se ha mostrado el único error que tengo en la cola.
En esta entrada no quiero centrarme en la creación de los mensajes de error ni como son capturados, pero para cualquier información podéis entrar en este enlace de este blog muy interesante.

En nuestro desarrollo se planteaban una serie de cuetiones:

  • El cliente ha visto ya el error, porque tiene que estar viendo el error hasta que cambia la página. En la página de login no es muy molesto pero hay páginas en las que el error/notificación puede permanecer eternamente si no cambias de página.
  • Cuando cargas el login en una página del CMS, como se comentó anteriormente, el cliente no es consciente de lo que está ocurriendo.
  • Queríamos que los mensajes se vieran en una ventana flotante.

Imaginemos que tenemos mensajes en cola deseando ser mostrados, entonces cuando se está cargando el phtm y llegamos al bloque de los global messages los muestra todos mediante una lista desordenada de la siguiente manera:

  1. <ul>
  2. <ul>
  3.     <li>mensaje1</li>
  4.     <li>mensaje2</li>
  5. </ul>
  6. </ul>
  7. …….

Para poner los Global Messages en  un popup hemos decidido hacerlo con jQuery UI por su comodidad en cuanto a la personalización. Se puede hacer con otras opciones como Modalbox.

 

jQuery UI se puede descargar de aquí. Los archivos base del Javascript no han sido modificados, siendo solamente el css el que se modificó para dar estilo a los mensajes.

Ya que los Global Messages no vienen activados por defecto en las páginas del CMS de Magento, tendremos que activarlos nosotros manualmente.

Para ello, modificaremos los pHtml de los templates que usan las páginas del CMS (Se recomienda que tengan su propio template)

Modificaremos la línea:

  1. <!--?php $this--->getChildHtml('global_messages') ?&gt;;

por

  1. <!--?php echo Mage::app()--->getLayout()-&gt;getMessagesBlock()-&gt;;setMessages(Mage::getSingleton('customer/session')-&gt;;getMessages(true))-&gt;;getGroupedHtml() ?&gt;;

Con esto lo que haremos será que en las páginas del CMS verifique la sesión y muestre los mensajes que están en cola (en este caso el que toca), ya que los global messages van asociados a una sesión.

Añadiendo jQuery UI

Una vez activados los Global Messages en la página determinada del CMS, procederemos a activar jQuery UI añadiendo al Layout el nuevo JS y el CSS.
El primer paso será descargar dicha librería y copiarla en la carpeta JS de nuestro magento y el segundo paso sería añadirla a nuestro layout general para que la añada.

Para ello abrimos el archivo page.xml que se encuentra en la carpeta layout de nuestro skin y añadimos las lineas de JS y CSS, en mi caso:

  1. <script type="text/javascript">// <![CDATA[
  2. jquery-ui-1.8.11.custom.min.js
  3. // ]]></script>
  4. css/black-tie/jquery-ui-1.8.11.custom.css

Una vez añadido jQuery UI sólo nos quedará añadir el código que activará los Global Messages cuando salten.

Caturando mediante jQuery UI los Global Messages

Ahora, con los Global Messages activados en el CMS y el jQuery UI añadido sólo nos queda activarlo en toda la web.

Abrimos el pHtml del footer (footer.phtml) que se encuentra en la carpeta Page/html de la carpeta Template de nuestro skin.

Una vez abierto, añadimos el siguiente código al final del documento:

  1. <script type="text/javascript">// <!&#91;CDATA&#91;
  2. jQuery('ul.messages').dialog();             //
  3. // &#93;&#93;></script>

Este script captura todo id ul.message y lo muestra en un dialog, ya lo tenemos separado. El resultado en un principio quedaría algo así.

Ejemplo de Dialog jQuery

Pues el siguiente paso es darle estilo y modificar a nuestras necesidades este diálogo. Aparte de los estilos que podemos darle a través de la hoja de estilo, también podemos definir una serie de parámetros dentro del javascript.

En este caso, hemos aplicado los siguientes:

modal: false, (evita que haga un overlay)
draggable: false, (evita que la caja sea arrastrada)
resizable: false, (evita que la caja se pueda redimensionar)
show: ‘clip’, (efecto que muestra al iniciar)
hide: ‘clip’, (efecto que muerta al finalizar)
position: ‘top’, (define la posición respecto a la web)
width: ‘auto’ (ancho automático, lo definiremos en la hoja de estilo según el mensaje)

También hemos añadido un Timeout al script de modo que la caja no se muestre en todo momento, para ello añadimos este código:

setTimeout(function(){ jQuery(‘ul.messages’).dialog(‘close’); }, 5000);

Después de tocar el diseño quedaría algo parecido a esto:
dialog modificada visualmenteError Modificado

Al final nuestro código queda de esta manera:

  1. <script type="text/javascript">// <!&#91;CDATA&#91;
  2. jQuery('ul.messages').dialog({ modal: false, draggable: false, resizable: false, show: 'clip', hide: 'clip',position: 'top', width: 'auto' });
  3.            setTimeout(function(){ jQuery('ul.messages').dialog('close'); }, 5000);
  4.         //
  5. // &#93;&#93;></script>

Al implantar los Global Messages con jQuery en Magento, surgieron una serie de problemas, que paso a solucionar:

Global Messages en el carrito de compra:
Este problema es muy probable que sea de nuestro desarrollo, pero me resulta interesante comentarlo ya que puede que a alguien le esté ocurriendo lo mismo y aquí encuentre la solución.

Lo más normal es tener desarrollado un skin para nuestro Magento, y hay que tener cuidado para que no se duplique la carga de los global messagen en cualquier template. En nuestro caso se estaba dando el conflicto en el checkout cart dado que aquí se están cargando los global messages y nosotros también lo hacíamos desde nuestro skin.
Deberemos de quitarlos de la plantilla general (hacer una nueva sin los global messages) y dejar los del checkout:

  1. <!--?php echo $this--->getMessagesBlock()-&gt;getGroupedHtml() ?&gt;

Entrada realizada gracias a @perichus, mi compañero de trabajo y diseñador.

4 comentarios sobre “Cambiar aspecto visual de Global messages”

  1. Está buena la “vuelta de tuercas” que le han dado a las notificaciones. Es un detalle del frontend al que normalmente no se le presta mucha atención al momento de armar los diseños.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *