Estilizando as Mensagens Globais do Magento

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.

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 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>

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

<?php if($this->getMessagesBlock()->getMessageCollection()->count()): ?>
 <div id="osstudios_global_messages" style="display: none">
 <a href="javascript:void(0)" id="osstudios_global_messages_close" style="display: none" title="<?php echo $this->__('Hide messages') ?>">&times;</a>
 <?php echo $this->getMessagesBlock()->getGroupedHtml(); ?>
 </div>
<?php $this->getMessagesBlock()->getMessageCollection()->clear(); ?>
<script type="text/javascript">
//<![CDATA[
 Event.observe('osstudios_global_messages_close', 'click', function() {
 Effect.SlideUp('osstudios_global_messages', { duration: 0.4, delay: 0.3 });
 Effect.Fade('osstudios_global_messages_close', { duration: 0.2 });
 });
 Event.observe(document, 'dom:loaded', function() {
 Effect.SlideDown('osstudios_global_messages', { duration: 0.4, delay: 0.3 });
 Effect.Appear('osstudios_global_messages_close', { duration: 0.2, delay: 1 });
 });
//]]>
</script>
<?php endif; ?>

3. Adicione estilos no seu arquivo CSS para #osstudios_global_messages em skin/frontend/[seu pacote]/[seu tema]/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;
}

e estilize as mensagens de acordo com o seu design.

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

.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; }

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

Até a próxima!

2014-07-25T20:13:55+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x