Fancy Magento Global Messages

Featured Image

Magento Global Messages are sometimes not enough visible to the customers.

Let’s improve their visual impact by putting them on top of the page, and prettify with some nice animations!

Here is demostration video of what we can accomplish in just three simple steps:

1. Create local.xml file inside your theme’s layout folder, or insert our layout update to appropriate place if you already have it (read more about “local.xml method”).

<?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="inchoo_global_messages" template="core/inchoo_global_messages.phtml" before="-" />
		</reference>
    </default>
</layout>

2. Create inchoo_global_messages.phtml in
app/design/frontend/your_package/your_theme/template/core/

<?php if($this->getMessagesBlock()->getMessageCollection()->count()): ?>
	<div id="inchoo_global_messages" style="display: none">
		<a href="javascript:void(0)" id="inchoo_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('inchoo_global_messages_close', 'click', function() {
		Effect.SlideUp('inchoo_global_messages', { duration: 0.4, delay: 0.3 });
		Effect.Fade('inchoo_global_messages_close', { duration: 0.2 });
	});
	Event.observe(document, 'dom:loaded', function() {
		Effect.SlideDown('inchoo_global_messages', { duration: 0.4, delay: 0.3 });
		Effect.Appear('inchoo_global_messages_close', { duration: 0.2, delay: 1 });
	});
//]]>
</script>
 
<?php endif; ?>

3. Append styling of #inchoo_global_messages to your CSS file in
skin/frontend/your_ package/your_theme/css/

#inchoo_global_messages {
	position: relative;
	z-index: 9999;
}
#inchoo_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;
}

and tweak message styling according to your design.

In video example, I’ve added those overrides to default 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; }

And that’s it… Reload your cache and notify your customers in a fancy way :)

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


25 comments

  1. You could also update the classes without touching one single file except a little javascript. Something like that:

    [code]
    function globalMessages(){
    var messageBox = jQuery('ul.messages');
    if(messageBox.length){ //check if message exists
    messageBox.addClass('your-class');
    var alertWrapper = messageBox.children(':first');
    var alertType = alertWrapper.attr('class'); //get alert type

    switch(alertType) { //update class
    case 'error-msg':
    jQuery(alertWrapper).addClass('your-error-class');
    break;
    case 'success-msg':
    jQuery(alertWrapper).addClass('your-success-class');
    break;
    default:
    jQuery(alertWrapper).addClass('your-default-class');
    }
    alertWrapper.addClass('custom-container-class')
    setTimeout(function() { //hide after timeout
    messageBox.slideDown(400); //show message
    }, 500);

    setTimeout(function() { //hide after timeout
    messageBox.slideUp(400); //show message
    }, 5000);
    }
    }

    globalMessages(); //fire the function

    [/code]

    [code][/code]
    .messages{
    display:none;
    }
    [code][/code]

  2. If there is anyone looking for a CSS3 Version, try something like the below code – just drop it in your themes stylesheet (make sure you use Modernizer to detect support otherwise your message will display with 0 opacity). Although if you are looking for better browser support Davor’s solution may be better.

    ul.messages{
    opacity: 0;
    animation: fadeOut 7s;
    -moz-animation: fadeOut 7s;
    -webkit-animation: fadeOut 7s;
    -o-animation: fadeOut 7s;
    }
    
    @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
    @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
    @-o-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
    @keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
  3. nice work! is it also possible that the message will automatically close after a given time , say 5-10 sec?

  4. Great… But i keep getting empty messages. Backend the global messages showup nicely, frontend just shows empty block :(
    Do you know where to look to fix this?
    Thanks!

  5. it’s Awesome ! But its not working in list page and product detail page for me . please help me how to solve it .

  6. Wonderful tutorial, the quality of the video is a little dull tough and a HD video would have been great since there was no audio to support it…

  7. I don’t know why, but when the message show, after body tag there is a “space”, and looking at the code I got this:

    "&nbsp;&nbsp;&nbsp;&nbsp;"

    How to fix this?

  8. Maybe you could help me, I’m attempting to make this work and i’m almost there, but i’m not getting the close buttons :(

  9. Not working :( i just get the “product added to cart” in the same place with no styling…

  10. @Michael
    I’ve “lost” it in the copy-paste :]
    Thanks for the fix!

    Glad you like it! :)

  11. Ah, I figured out my problem, wasn’t the layout XML, you are missing the last line of the template file that includes an endif, e.g.:

    <?php endif; ?>

    Cool tutorial, and thanks!

  12. This is a very cool tutorial, but for some reason the XML update is not working. The old global messages is still there and the new one doesn’t show up. I’ve tried putting the update code in my page.xml (and even the /base/default XML) to no avail.

    I know its hard to guess without actually seeing my install, but any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.