Magento – 集成js文件到页面文件中

Magento的JS文件存放有两个地方：
1). 系统级别的js目录位置 : $MAGENTO_INSTALLED_FOLDER/js，该目录下也存放相应js功能的css文件。
2). 特定于某套页面风格的目录下: $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin | install}///js

那么Magento应用又是如何引用这些js文件的呢？

1. 引用系统级别的js文件

方式I. 最一般的方法是配置全局block. 在page.xml中有

Xml代码 

<default>  

        <block type=“page/html” name=“root” output=“toHtml” template=“page/3columns.phtml”>  

  

            <block type=“page/html_head” name=“head” as=“head”>  

                <action method=“addJs”><script>prototype/prototype.jsscript>action>  

                 ….  

               <action method=“addItem”><type>jstype><name>lib/ds-sleight.jsname><params/><if>lt IE 7if>action>  

            block>  

         block>  

default>  

                    
                     ....
                   jslib/ds-sleight.jslt IE 7

任何使用该template的页将自动包含$MAGENTO_INSTALLED_FOLDER/js/prototype目录下的prototype.js文件。
特别说明:

Xml代码 

<action method=“addItem”><type>jstype><name>lib/ds-sleight.jsname><params/><if>lt IE 7if>action> 

    jslib/ds-sleight.jslt IE 7

根据浏览器版本有条件地载入js文件

方式II. 在页面文件里包含系统级js文件

Html代码 

<script type=“text/javascript” src=“getJsUrl(’varien/accordion.js’) ?>”>script>  

有一个Helper类做同样事情，下面是例子：

Html代码 

php echo $this->helper(’core/js’)->includeScript(’varien/accordion.js’) ?>  

helper('core/js')->includeScript('varien/accordion.js') ?>

该方法主要用来在某些页面包含额外的js文件。而这些文件在其他页面中却不常使用。

方式 III. 在Block类中使用下面的代码

Java代码 

protected function _prepareLayout(){  

  $this->getLayout()->getBlock(‘head’)->addJs(‘mage/adminhtml/sales.js’);  

  …..  

  return parent::_prepareLayout();  

}  

    protected function _prepareLayout(){
      $this->getLayout()->getBlock('head')->addJs('mage/adminhtml/sales.js');
      .....
      return parent::_prepareLayout();
    }

将在page.xml中的名称为”head”的Block中说明的包含js的基础上，继续包含$MAGENTO_INSTALLED_FOLDER/js/mage/adminhtml/sales.js文件。

2.包含特定Theme包下的js文件：
这通常在页面文件中作如下调用

Html代码 

<script type=“text/javascript” src=“getSkinUrl(’js/opcheckout.js’) ?>”>script>