Fancy Magento Global Messages
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!
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') ?>">×</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 🙂
29 comments
I tried this one, however it is not helping out. Please can you let me know where i am making the mistake.
For IE, you have to change style=”display: none” in style=”display: none; overflow:hidden;”.
Otherwise the message will stay on the screen.
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…
i want to close that message pop up within 5 seconds automaically.how to achieve this task?
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]
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.
Cheers Inchoo,
Very nice piece of code here – saved me quite a bit of time.
All at objectsource.
nice work! is it also possible that the message will automatically close after a given time , say 5-10 sec?
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!
it’s Awesome ! But its not working in list page and product detail page for me . please help me how to solve it .
Awesome! Just what I was looking for!
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…
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:
How to fix this?
Does not work with FPC.
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 🙁
this is exactly what I was looking for. can anyone make an extension out of it?
I think many would love that
Work in 1.6.2?
For me not working
Regards
This is an awsome piece of code. Just installed it now on my latest Mage site and it works perfectly !
Thanks Guys !
Awesome code! not a big fan of the standard messages! 🙂
Not working 🙁 i just get the “product added to cart” in the same place with no styling…
Zeljko, sharing would never imply steal!
This hack is GRREAT!
@Davor Stealing this 🙂
Interesting post. Why wouldn’t you make the video voiced?
Gobal is the new Global, @Oleg 🙂
Thanks for the heads up…
Nice effect.
BTW, title of the post is “Gobal Messages” 😉
@Michael
I’ve “lost” it in the copy-paste :]
Thanks for the fix!
Glad you like it! 🙂
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.:
Cool tutorial, and thanks!
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?
Looks nice, will definitely give it a try!