一般用magento开发的网站,客户很难看到或注意到一些提醒,也就是magento中的Global Messages 我们可以通过把Global Messages放到页面的顶部来增强客户的浏览性,并通过动画来美化它 我们可以通过下面的演示视频上的简单的三个步骤来看下我们要来达到的效果(Youtube视频,请翻墙观看)
1. 创建local.xml插入到你自己的主题模板的layout下面,如果你已经有了这个文件,可以插入到这个文件里面适当的地方(阅读更多关于 “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="alwayly_global_messages" template="core/alwayly_global_messages.phtml" before="-" /> </reference> </default> </layout>
2. 创建alwayly_global_messages.phtml 在 <?php if($this->getMessagesBlock()->getMessageCollection()->count()): ?> <div id="alwayly_global_messages" style="display: none"> <a href="javascript:void(0)" id="alwayly_global_messages_close" style="display: none" title="__('Hide messages') ?>">×</a> <?php echo $this->getMessagesBlock()->getGroupedHtml(); ?> </div> <?php $this->getMessagesBlock()->getMessageCollection()->clear(); ?> <script type="text/javascript"> //<![CDATA[ Event.observe('alwayly_global_messages_close', 'click', function() { Effect.SlideUp('alwayly_global_messages', { duration: 0.4, delay: 0.3 }); Effect.Fade('alwayly_global_messages_close', { duration: 0.2 }); }); Event.observe(document, 'dom:loaded', function() { Effect.SlideDown('alwayly_global_messages', { duration: 0.4, delay: 0.3 }); Effect.Appear('alwayly_global_messages_close', { duration: 0.2, delay: 1 }); }); //]]> </script>
3. 在你的css文件里面追加#alwayly_global_messages的样式 #alwayly_global_messages { position: relative; z-index: 9999; } #alwayly_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; } 你也可以根据你自己喜欢的样式来设计magento global messages的样式 在video里面的例子,我已经添加了样式来覆盖原有的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; } 就这样了,你的客户可以看到一个醒目而好看的message了 (责任编辑:好模板) |