magento学习笔记(三)

by mickle /

认识magento中xml文件与phtml文件的关系，了解这两种magento结构文件的联系，是magento模板制作的最基础知识。

本例以magento  的base下的default模板为例

进入正题，我来说说xml可以做到，但是phtml做不到的事情。

1.定义页面结构（1栏，2栏，3栏）

.xml中定义页面结构，.phtml默认没有此功能。在magento中默认的页面结构有1栏结构，2栏结构，3栏结构。这个页面结构就是在xml文件中定义的。

如在:appdesignfrontendbasedefaultlayoutpage.xml 中

<default translate="label" module="page">
        <label>All Pageslabel>

        "page/html" name="root" output="toHtml" template="page/3columns.phtml">

这个template=”page/3columns.phtml”就是在定义所有的页面默认使用3栏结构。

在：appdesignfrontendbasedefaultlayoutcatalog.xml

     <catalog_product_view translate="label">
        <label>Catalog Product View (Any)label>

        

        <reference name="root">

            <action method="setTemplate"><template>page/2columns-right.phtmltemplate>action>

        reference>

在这个文件里面page/2columns-right.phtml就是在跟新的页面结构，就是将详细产品页更新为2栏-右栏结构，不再使用page.xml文件中所设置的3栏结构。

所以大家想改某个页面的结构直接将这些定义结构的地方代码换掉就行了。

随便打开一个.xml文件，搜下column这个关键字。有的话，然后在看下外层的xml标签，基本就知道是在设置哪个页面的结构了，这就是一个快速学习magento模板制作的途径。

顺便说一下：对于magento开发者来说，在这些地方改下页面结构是必要的，但是对于使用者，magento后台的大多数编辑页面中，都是设置layout的地方，对于使用者，可以在这些地方设置你的页面结构。

2.编辑左右栏的内容，中间栏的内容

magento左右栏怎么添加block?这个是大多数magento模板初学者会遇到的问题，答案就是，在xml添加。在xml中声明添加到左栏还是右栏，添加使用哪个.phtml文件。

看下面的siderbar

magento边栏block

此广告图片就是在xml中添加的。

文件路径：appdesignfrontendbasedefaultlayoutcatalog.xml

<reference name="right">
          <block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
          <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml">
              <action method="setImgSrc"><src>images/media/col_right_callout.jpgsrc>action>

              <action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!alt>action>

          block>

      reference>

就是更新右栏

就是在定义更具体的东西，我们这个广告图的图片输出，就在callouts/right_col.phtml文件中。

before=”cart_sidebar”是在定义排列顺序，cart_sidebar是其它block的name。

仿照这个例子我们就可以在magento的左右栏添加或者删除block了。

3.添加css js文件

xml可以定义不同页面的结构，并且可以给不同的页面添加不同的css js文件。我们的phtml可以做到这点，但是远没有xml做的好。

如果你在magento的产品详细页加了一个js效果，你可以将要加载的js文件只在这个页面加载，那么我们就要到定义产品详细页的页面的xml来添加。

文件路径：appdesignfrontendbasedefaultlayoutcatalog.xml

    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)label>

        

        <reference name="root">

            <action method="setTemplate"><template>page/2columns-right.phtmltemplate>action>

        reference>

        <reference name="head">

            <action method="addJs"><script>varien/product.jsscript>action>

 

            <action method="addItem"><type>js_csstype><name>calendar/calendar-win2k-1.cssname><params/>action>

            <action method="addItem"><type>jstype><name>calendar/calendar.jsname>action>

            <action method="addItem"><type>jstype><name>calendar/calendar-setup.jsname>action>

        reference>

在里面的里面使用action标签来添加css，js。我们仿下就好了。

Need a translation service?

Please enter your personal details and we will contact you shortly

    Words translated by CCJK

    146,096,379

    Our Client Satisfaction

    Rating for previous quarter

    5.00

    Over 95% of our clients recommend our language services to others

    Get Free Quote
    magento学习笔记(二)magento学习笔记(四)