Una de las cosas que echo de menos en Magento 2 (Magento Open Source) es poder ocultar automáticamente los mensajes informativos en cualquier página de su tienda online. Modificar el comportamiento no es excesivamente difícil, pero hay que tener un par de cosas claras respecto a cómo funciona el sistema de mensajes.

En Magento 2 se utiliza Knockout para renderizar los mensajes mediante un observable, por lo que se pueden mostrar mensajes dinámicamente mediante ajax sin recargar la página añadiéndolos con el MessageFactory. Por tanto lo que debemos hacer para añadir un timeout al bloque de mensajes es modificar el observable para manejar el estado de dicho bloque (oculto o no).

La mejor opción es hacer un pequeño módulo para gestionar estos cambios usando un mixin y modificando el template mediante layout, pero para este post lo vamos a hacer de un modo más bruto para no perdernos en los detalles del módulo.

Sobreescritura del bloque de mensajes

Dado que vamos a hacer una sobreescritura copiamos el fichero

vendor/magento/module-theme/view/frontend/templates/messages.phtml en app/design/frontend/vendor/theme/Magento_Theme/templates/messages.phtml

La diferencia respecto al fichero base es la siguiente línea
data-bind="visible: isVisible(), click: removeAll


Con esto pretendemos controlar si se debe ocultar el mensaje y que se oculte si se hace click sobre el mensaje. Este comportamiento lo vamos a gestionar desde el componente JS

Sobreescritura del componente JS

Al igual que con el phtml copiamos el fichero

vendor/magento/module-theme/view/frontend/web/js/view/messages.js en app/design/frontend/vendor/theme/Magento_Theme/web/js/view/messages.js.

El código resultante es el siguiente:

Se han modificado tanto los atributos del componente (añadiendo 2) como las funciones initObservable, isVisible, removeAll y onHiddenChange.

En él se puede ver cómo se añade un parámetro isHidden, y un listen para llamar a la función onHiddenChange que es la que se encarga de lanzar el timeout y ocultar el mensaje mediante jQuery.

Este comportamiento se puede ver en los mensajes del checkout, que utilizan un componente de mensajes diferente al de toda la tienda. Con estos cambios los comportamientos quedan unificados.

En interactiv4 cruzamos los límites de lo que es una agencia eCommerce. Somos tu partner y tu especialista en Magento 2 en pro de tu crecimiento local y global. Trabajamos con las mejores tecnologías, tenemos sobrada experiencia y estamos comprometidos con tu éxito. Todo ello con una enorme pasión por el comercio electrónico.