MAGENTO MOUDLE & WEB FRONTEND

 

 

MAGENTO与前端文件的管理(JS,CSS,AJAX)

---

 

MAGENTO与前端文件的管理(JS,CSS,AJAX)

 

MAGENTO与在module中加载JS或者是CSS文件

在frontend的加载

Magento中的js文件主要位于两个地方:  位于root目录下的JS文件夹; 位于skin目录下的default theme中JS文件夹

 

位于root目录下的JS文件夹

一般情况下，它多存在于block中的_prepareLayout()方法中，block多继承Mage_Core_Block_Template(主要是_prepareLayout方法)

 

class Magemall_Ajaxlogin_Block_Form extends Mage_Core_Block_Template {
     protected function _prepareLayout()
     {
           $this->getLayout()->getBlock('head')->addJs('prototype/tooltip.js');
    
           parent::_prepareLayout();
     }
}

 

 

 

位于skin目录下的default或者base theme中JS文件夹

 

class LD_AjaxCart_Block_List extends Mage_Catalog_Block_Product_List {

protected function _prepareLayout() {

$headBlock = $this->getLayout()->getBlock('head');
$headBlock->addItem('skin_js','js/ajaxcart/jquery-1.5.1.min.js');
$headBlock->addItem('skin_js','js/ajaxcart/ajaxcart.js');

parent::_prepareLayout();
}

}

 

 

在backend中的admin后台来进行加载(JS对于backend而言，多存在于root下JS目录下的mage文件夹内)

class Mage_Adminhtml_Block_Sales_Order_View_Form extends Mage_Adminhtml_Block_Template
{
    protected function _prepareLayout()
    {
        $this->getLayout()->getBlock('head')
            ->addJs('mage/adminhtml/giftmessage.js');

        parent::_prepareLayout();
    }
}

 

 

在视图中加载(通过xml文件的方式)

加载位于root目录下的JS文件夹下的JS文件

考虑后台控制

<reference name="head">                 
       <action method="addJs" ifconfig="ajax/general/enabledpro">
               <script>VS/jquery-1.6.4.min.js</script>
       </action>
</reference>

不考虑后台控制，直接进行加载JS文件

<reference name="head">                    
     <action method="addJs">
           <script>VS/jquery-1.6.4.min.js</script>
     </action>
</reference>

 

条件判断的方式来加载JS文件

<reference name="head"> 
            <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
            <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>
</reference>

 

 

位于skin目录下的default theme中JS文件夹

<reference name="head">    
<action method="addItem" ifconfig="ajax/general/enabledpro">
                <type>skin_js</type>
                <name>VS/js/fancybox/jquery.fancybox-1.3.4.js</name>
</action>
</reference>

 

 

在skin目录下使用条件判断来进行加载JS文件

<reference name="head"> 
         <action method="addItem"><type>skin_js</type><name>VS/js/fancybox/jquery.fancybox-IE-1.3.4.js</name><params/><if>lt IE 7</if></action>
</reference>

 

 

CSS

---

CSS文件的位置，主要分成前端以及后端。CSS的控制还表现为IE的条件判断;针对不同mdiatype的CSS指定。

CSS文件主要位于skin目录下的default或者base theme中CSS文件夹（多为default目录下) 以及js下的libary库CSS文件。

 

module的方式来添加CSS文件

 

addCss来添加default theme中的CSS文件

class Wise_InteractiveSlider_Block_Slider extends Mage_Core_Block_Template
{
   protected function _prepareLayout()
   {
      $this->getLayout()->getBlock('head')->addCss('css/mymodule/stylesheet.css');
      return parent::_prepareLayout();
   }
}

其中的文件结构为:

All the CSS & Images are normally available in the "skin" folder. It should be:-

"skin" folder
   -> Package Name (like "base" or "default")
      -> 

Theme Name (like "modern" or "mycompany")

         -> "css" folder
            -> "mymodule" folder
               -> "stylesheet.css" file

addCssIe 的方式与以上类似

 

Root目录下的CSS文件加载

protected function _prepareLayout()
   {
       if ($head = $this->getLayout()->getBlock('head')) {
           $head->addItem('js', 'prototype/window.js')
               ->addItem('js_css', 'prototype/windows/themes/default.css')
               ->addItem('js_css', 'prototype/windows/themes/magento.css');
       }
       return parent::_prepareLayout();
   }

 

 

 

 

XML的方式来控制CSS的加载

 

加载base目录下的CSS（多用addCss方法)

<reference name="head">
            <action method="addCss"><stylesheet>css/jquery/ui.css</stylesheet></action>
</reference>

 

 

加载skin目录下的CSS文件

 

非条件判断来加载CSS(skin目录)

<reference name="head">
            <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_css</type><name>css/ig_lightbox.css</name></action>
</reference>

 

条件判断的方式来控制CSS的加载

<reference name="head">
                <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>lt IE 8</if></action>
                <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>
</reference>

 

针对不同Media Type的CSS指定

<reference name="head">
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
</reference>

 

<reference name="head">
           <action method="addCss"><name>print.css</name><params>media="print"</params></action>
</reference>

 

添加外部的JS

<referencename="head"><blocktype="core/text"name="google.cdn.jquery">

<action method="setText"><text><![CDATA[<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript">jQuery.noConflict();</script>]]></text></action></block></reference>

 

或者是 reference

http://inchoo.net/ecommerce/magento/how-to-add-external-javascript-css-file-to-magento/

MAGENTO 与 AJAX

 

ajax的处理主要有两个大的考虑点: json以及服务器端数据的返回  和 AJAX的URL地址

AJAX的处理，包括有如下几个方面:

  客户端JS请求server 端action的地址

  服务器端的action处理以及数据返回

 

 

客户端地址:

    url = url.replace("wishlist/index","ajax/whishlist");   使用替换来将原有的action换成自定义module的action

   

jQuery.ajax({
                    type: "post",
                    url: "/customer/account/validatereferer",
                    timeout: 30000,

}

 

ajax数据的返回:

   对整个block，以html的 形式返回

   对于json数据的返回

   以text,xml进行数据返回

 

JSON数据的返回

 

json数据返回(以HTML形式)

public function addAction()
{
$params = $this->getRequest()->getParams();
if($params['isAjax'] == 1){
$response['status'] = 'ERROR';
$response['message'] = $this->__('Unable to find Product ID');

//返回新的HTML
$this->loadLayout();
$toplink = $this->getLayout()->getBlock('top.links')->toHtml();

 

//针对block使用最新的template
$sidebar_block = $this->getLayout()->getBlock('cart_sidebar');

$sidebar_block->setTemplate('ajax/catalog/product/compare/sidebar.phtml');

$sidebar = $sidebar_block->toHtml();

Mage::register('referrer_url', $this->_getRefererUrl());

$response['toplink'] = $toplink;
$response['sidebar'] = $sidebar;
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
}
return;
}

 

URL

$url = $this->getUrl('ajaxlogin/login/form/');

 

 

常用的API

 

$this->getResponse()->setBody();

 

 

自定义的HTML返回:

$html = <<<HTML
!-- AjaxLogin -->
link rel="stylesheet" type="text/css" href="{$cssMain}" media="all" />
script type="text/javascript" src="{$jsTiny}"></script>
script type="text/javascript" src="{$jsMain}"></script>
script type="text/javascript">
ar G_AJAXLOGIN_URL = "{$url}";
$("a[href*=customer/account/login]").each(function(item) {
   item.href='javascript:void(0)';
   Event.observe(item, 'click', showloginbox);
);
/script>
!-- End Giko AjaxLogin Code -->
!-- Get free from http://magento.luochunhui.com/ajaxlogin.html -->
TML;

 

json数据返回(纯JSON)