Magento首页添加幻灯片教程

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

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

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

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

我们知道Magento首页是一个CMS页面，即home CMS Page。如果只在首页显示某一个Block的话，可以在该页面的Layout Update 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>

在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页面添加幻灯片的一个思路。

转载请注明：锐想Magento » Magento首页添加幻灯片教程