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

24
Top

Care to rate this post?

Author

Davor Budimcic

Ex Inchooer

Davor worked at Inchoo from 2011 to 2013 as a Frontend Developer.

Other posts from this author

Discussion 24 Comments

Add Comment
  1. Martin Helfert

    Looks nice, will definitely give it a try!

  2. 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?

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

  4. Davor Budimcic

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

    Glad you like it! :)

  5. Nice effect.

    BTW, title of the post is “Gobal Messages” ;)

  6. Gobal is the new Global, @Oleg :)

    Thanks for the heads up…

  7. Interesting post. Why wouldn’t you make the video voiced?

  8. Zeljko Prsa

    @Davor Stealing this :)

  9. Pau

    Zeljko, sharing would never imply steal!

    This hack is GRREAT!

  10. Adrian

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

  11. Awesome code! not a big fan of the standard messages! :)

  12. This is an awsome piece of code. Just installed it now on my latest Mage site and it works perfectly !

    Thanks Guys !

  13. Rafael

    Work in 1.6.2?

    For me not working

    Regards

  14. this is exactly what I was looking for. can anyone make an extension out of it?

    I think many would love that

  15. Meghan

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

  16. Arthur

    Does not work with FPC.

  17. Pablo

    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?

  18. 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…

  19. julia

    Awesome! Just what I was looking for!

  20. Ram Prakash

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

  21. Maarten

    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!

  22. Ndp

    nice work! is it also possible that the message will automatically close after a given time , say 5-10 sec?

  23. Cheers Inchoo,

    Very nice piece of code here – saved me quite a bit of time.

    All at objectsource.

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

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top