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.

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

Tiago Sampaio

Leave A Reply

Navigate