As mensagens globais do Magento são algo não tão visíveis para os clientes.

Vamos incrementar seu impacto visual colocando-as no topo da página e estilizando-as com uma animação.

Aqui está um vídeo do que podemos fazer com apenas alguns pequenos trechos de código.

1. Crie um arquivo local.xml dentro da pasta layout do seu tema , ou inclua nossa atualização de layout para um local apropriado, caso você já possua um (leia mais sobre “método local.xml”).

[xml]
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
<default>
<reference name="root">
<remove name="global_messages" />
</reference>
<reference name="after_body_start">
<block type="core/template" name="osstudios_global_messages" template="core/osstudios_global_messages.phtml" before="-" />
</reference>
</default>
</layout>
[/xml]

2. Crie um arquivo com o nome osstudios_global_messages.phtml em app/design/frontend/[seu pacote]/[seu tema]/template/core/

[php]
<?php if($this->getMessagesBlock()->getMessageCollection()->count()): ?>

<?php $this->getMessagesBlock()->getMessageCollection()->clear(); ?>

//

<?php endif; ?>
[/php]

3. Adicione estilos no seu arquivo CSS para #osstudios_global_messages em skin/frontend/[seu pacote]/[seu tema]/css/

[css]
#osstudios_global_messages {
position: relative;
z-index: 9999;
}
#osstudios_global_messages_close {
position: absolute;
top: 13px;
right: 13px;
z-index: 10000;
display: block;
width: 15px;
height: 15px;
background: #666;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 15px;
text-decoration: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
[/css]

e estilize as mensagens de acordo com o seu design.

No exemplo em vídeo os overrides foram adicionados no CSS default do Magento:

[css]
.messages li, .messages li li { margin: 0 !important; }
.error-msg, .success-msg, .note-msg, .notice-msg {
border: none !important;
font-size: 14px !important;
background-position: 13px 13px !important;
padding: 10px 35px !important;
min-height: 22px !important;
}
.note-msg, .notice-msg { color: #d6b501; }
[/css]

E é isso aí! Limpe seus caches e notifique seus clientes com um melhor estilo.

Até a próxima!

Tiago Sampaio