西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > magento教程 >

改变Magento Global Messages的显示方式

时间:2017-01-04 13:55来源:未知 作者:好模板 点击:
一般用magento开发的网站,客户很难看到或注意到一些提醒,也就是magento中的Global Messages 我们可以通过把Global Messages放到页面的顶部来增强客户的浏览性,并通过动画来美化它 我们可以

magento global message

一般用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 在 
app/design/frontend/your_package/your_theme/template/core/

<?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') ?>">&times;</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的样式 
skin/frontend/your_ package/your_theme/css/

#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了

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容