Fancy Magento Global Messages

Feb 23, 2012 Davor Budimcic Design, Frontend, Magento 28 Comments
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 🙂

28 comments

  1. For IE, you have to change style=”display: none” in style=”display: none; overflow:hidden;”.
    Otherwise the message will stay on the screen.

    Reply

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

    Reply

  3. i want to close that message pop up within 5 seconds automaically.how to achieve this task?

    Reply

  4. 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]

    Reply

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

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

  14. 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 🙁

    Reply

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

    Reply

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

    Glad you like it! 🙂

    Reply

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

    Reply

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

    Reply

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> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.