magento模板中XML与phtml关系(二)

magento的xml片段
magento的xml片段

今天我来继续讲下magento中xml文件与phtml文件的关系,了解这两种magento结构文件的关系,是magento模板制作的最基础知识。

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

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

1.定义页面结构(1栏,2栏,3栏)

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

如在:app\design\frontend\base\default\layout\page.xml 中

<default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

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

在:app\design\frontend\base\default\layout\catalog.xml

<!--
Product view
-->

    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>

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

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

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

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

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

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

看下面的siderbar

magento边栏block
magento边栏block

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

文件路径:app\design\frontend\base\default\layout\catalog.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.jpg</src></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>

<reference name=”right”>就是更新右栏

<block type=”core/template” name=”right.permanent.callout” template=”callouts/right_col.phtml”>就是在定义更具体的东西,我们这个广告图的图片输出,就在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来添加。

文件路径:app\design\frontend\base\default\layout\catalog.xml

<!--
Product view
-->

    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addJs"><script>varien/product.js</script></action>

            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        </reference>

在<catalog_product_view translate=”label”>里面的<reference name=”head”>里面使用action标签来添加css,js。我们仿下就好了。

4.我想下还有什么xml可以做phtml做不了的再加上。下一讲,讲下phtml可以做xml做不了的事情。

转载表明出处:hellokeykey.com

《magento模板中XML与phtml关系(二)》有13个想法

  1. 请教一下,如何知道BACK TO SCHOOL的图片是在catalog.xml 而不是其他的 .xml中添加的呢? COMMUNITY POLL这个block是在哪里添加的呢?如何找到diretory? thanks!

    1. 你可以删xml的代码试试,如果删了,前台消失了,那么就证明你删的xml是控制那个back to school的。COMMUNITY POLL是后台控制的,做magento模板看下我的模板开发指导那篇文章。要先会用再去做模板,不然不知哪里是后台控制哪里是代码里控制。

  2. page/2columns-right.phtml就是在跟新的页面结构,就是将详细产品页更新为2栏-右栏结构,不再使用page.xml文件中所设置的3栏结构。
    请问后面更新的这个xml如何直接指定更新上面那个三栏页面的,难道是根据
    三栏
    更新二栏 这个label?

    希望能给详细的解释一下,谢谢key的帮助

    1. 不再使用page.xml文件中所设置的3栏结构,是因为有个优先级的关系,page.xml中指定的是全局的默认结构,但是个别xml是针对个别页面,在个别页面的优先级是最高的,所以才会不再使用page.xml文件中所设置的3栏结构。
      注意观察下,其它页面是怎么通过xml来更新自己的页面结构的,比如产品列表页,产品详情页面的页面结构是在xml怎样定义的,你就明白了。

  3. Pingback: magento学习索引
  4. 请问如果我想制作一个东西 可是我又不想破坏XML原有的结构
    比如catalog.xml 我只想在里面添加block 但是我还不想手动的去修改这个文件 有没有办法在技术上让它自己就去插入一些东西呢?我不知道我说的是不是很明白
    换句话说 我做了一个小功能 给别人用 我总不能手动的去改人家文件吧 我只能是把我的文件给他 但是这个文件需要在catalog.xml
    里添加东西 希望你能帮助我

  5. 你好,我想问下, 怎么给产品的分类页更改成 2栏的。你的文章说的产品详细页有修改2栏的代码,但 产品的分类页 我没找到

    page/2columns-right.phtml

    这一行代码,谢谢

评论已关闭。