跨境电商
经验交流分享

Magento首页添加幻灯片教程

了解了上一篇关于Magento Static Block的相关内容之后,现在应该很轻松的能创建一个Static Block,并添加到任意你想要的位置。掌握这个知识点就可以很容易在Magento中添加一些想要的动态效果,其中很多朋友最关注的应该是在首页添加一个幻灯片。

根据上篇文章所学内容,创建一个新的Static Block,并添加幻灯片所需的HTML代码,如下代码,填写到Content中。

[html]
<div style="height: 280px; overflow: hidden;">
<div id="stripNavL0" onclick="changeFx(‘scrollRight’)">
<a id="stripNavLa" href="#">Left</a>
</div>
<div id="slider-content">
<img src="{{media url="home_banner.jpg"}}" alt="" width="950" height="280" />
<img src="{{media url="home_banner_2.jpg"}}" alt="" width="950" height="280" />
<img src="{{media url="home_banner_3.jpg"}}" alt="" width="950" height="280" />
</div>
<div id="stripNavR0" onclick="changeFx(‘fade’)">
<a id="stripNavRa" href="#">Right</a>
</div>
</div>
[/html]

Identifier命名为home_page_header_block,其它内容可以随意填写,保存并创建该幻灯片Static Block。

我们知道Magento首页是一个CMS页面,即home CMS Page。如果只在首页显示某一个Block的话,可以在该页面的Layout Update XML中添加布局文件,这样就可以只在首页引用这些内容,代码如下。

[xml]
<reference name="header">
<block type="cms/block" name="home_page_header_block">
<action method="setBlockId">
<block_id>home_page_header_block</block_id>
</action>
</block>
</reference>

<reference name="head">
<action method="addItem">
<type>skin_css</type>
<name>css/slider.css</name>
<params/>
</action>
<action method="addItem">
<type>skin_js</type>
<name>js/jquery-1.5.2.min.js</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>js/cycle-fade-effect.js</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>js/slider.js</name>
</action>
</reference>
[/xml]

在home CMS Page的Layout Update XML中定义如上内容,首先在header block中添加了我们上面定义的home_page_header_block Static Block,这样即可在头部模板文件中使用getChildHtml()方法调用home_page_header_block Static Block了。接着又在head block中添加了幻灯片所需的css和js文件。所有这一切,只会在首页运行。

到这里幻灯片即添加完毕了,当然这里并没有给出具体的幻灯片代码,只是介绍了在Magento首页或者任意CMS页面添加幻灯片的一个思路。

赞(0)
未经允许不得转载:锐想 » Magento首页添加幻灯片教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

锐想电商 - 跨境电商经验交流分享

锐想无限