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();
}
}
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.jsscript>
action>
reference>
<reference name="head">
<action method="addJs">
<script>VS/jquery-1.6.4.min.jsscript>
action>
reference>
条件判断的方式来加载JS文件
<reference name="head">
<action method="addItem"><type>jstype><name>lib/ds-sleight.jsname><params/><if>lt IE 7if>action>
<action method="addItem"><type>jstype><name>varien/iehover-fix.jsname><params/><if>lt IE 7if>action>
reference>
位于skin目录下的default theme中JS文件夹
<reference name="head">
<action method="addItem" ifconfig="ajax/general/enabledpro">
<type>skin_jstype>
<name>VS/js/fancybox/jquery.fancybox-1.3.4.jsname>
action>
reference>
在skin目录下使用条件判断来进行加载JS文件
<reference name="head">
<action method="addItem"><type>skin_jstype><name>VS/js/fancybox/jquery.fancybox-IE-1.3.4.jsname><params/><if>lt IE 7if>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:-Theme Name (like "modern" or "mycompany")
"skin" folder
-> Package Name (like "base" or "default")
->
-> "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.cssstylesheet>action>
reference>
加载skin目录下的CSS文件
非条件判断来加载CSS(skin目录)
"head">
"addItem" ifconfig="ig_lightbox/general/enabled"> skin_css css/ig_lightbox.css
条件判断的方式来控制CSS的加载
<reference name="head">
<action method="addItem"><type>skin_csstype><name>css/iestyles.cssname><params/><if>lt IE 8if>action>
<action method="addItem"><type>skin_csstype><name>css/ie7minus.cssname><params/><if>lt IE 7if>action>
reference>
针对不同Media Type的CSS指定
<reference name="head">
<action method="addCss"><stylesheet>css/print.cssstylesheet><params>media="print"params>action>
reference>
<reference name="head">
<action method="addCss"><name>print.cssname><params>media="print"params>action>
reference>
jQuery.noConflict();]]>
或者是 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数据的返回
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;
}
$html = <<!-- AjaxLogin -->
link rel="stylesheet" type="text/css" href="{$cssMain}" media="all" />
script type="text/javascript" src="{$jsTiny}">
script type="text/javascript" src="{$jsMain}">
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;