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)

转载于:https://www.cnblogs.com/myjavawork/archive/2012/11/07/2759576.html

MAGENTO MOUDLE WEB FRONTEND相关推荐

  1. SIPp web frontend(2)

    SIP VoIP 測试交流群: 323827101 欢迎大家转载.为保留作者成果,转载请注明出处.http://blog.csdn.net/netluoriver.有些文件在资源中也能够下载.假设你没 ...

  2. web前端渲染和后端渲染(web front-end and back-end rendering)

    在网上查找了很久的前端渲染和后端渲染的区别,最后总算在知乎上看到了一个比较清楚的解释,感谢万分! 作者:iakul 链接:https://www.zhihu.com/question/28725977 ...

  3. WEB FRONT-END NOTE DAY02

    一.VS Code Ctrl + O 打开新的文件 Ctrl + N 新建 Ctrl + C 复制 Ctrl + X 剪切 Ctrl + V 粘贴 Ctrl + W 关闭当前文件 Ctrl + Shi ...

  4. Magento: 判断是否为手机浏览 Optimise Web's Mobile Detect Class for Magento

    项目地址:Optimise Web's Mobile Detect Class for Magento Optimise Web's Mobile Detect Class for Magento M ...

  5. 闪亮蔚蓝_在R中构建第一个闪亮的Web应用

    闪亮蔚蓝 数据科学 (DATA SCIENCE) Do you want to make your R code publicly available for others to use? If yo ...

  6. magento转移搬家

    1.首先备份你服务器的数据库. system >> Tools >> Backups >> Cerate Backup   然后等待它自动完成. 完成以后有两种文件 ...

  7. 网页设计经典案例(Web)

    网页设计经典案例 一.实现效果(一) 源代码(二) <!DOCTYPE html> <html lang="en"> <head><met ...

  8. Adobe Magento 2 认证证书的变化

    自从2018年5月Adobe收购Magento以来,到了2020年3月,Adobe才真正开始将Magento的内容整合到Adobe体系中,并且还推出了Magento commerce cloud产品. ...

  9. web开发日语词汇(一)

    掲示板 forum/bbs 论坛 フォーラム forum/bbs 论坛 ブログ blog 博客.部落格 ページ page 网页.页面 ウェブページ web page 网页.页面 メール mail 邮件 ...

最新文章

  1. loadrunner中自定义查找并替换函数
  2. sql 增加自增列 耗时长_SQLServer为已有数据的表添加一个自增列
  3. 如何解决盗版Windows问题
  4. shell在二级python_在python下运行时在shell脚本之间传递shell变量[duplicate]
  5. python爬虫可以爬哪些山_从python爬虫,到更爱这个世界
  6. 【转】ubuntu 下安装mongodb php 拓展的方法
  7. tomcat虚拟目录和虚拟主机等相关配置
  8. html中span的值不显示,为什么加上form标签之后就不能在span中显示获得值了?
  9. AIX操作命令记录中
  10. 初学者UI设计临摹素材模板,请先搞清楚这4个分类!
  11. FTP初始化文件.netrc使用技巧[转发]
  12. 《图解TCPIP》知识学习(1.4):协议由谁规定
  13. QCC3005芯片 Line IN 听歌的时候声音比较小
  14. iphone如何删除“不可删除”的描述文件?(桌面快捷方式web clib)
  15. 深圳:由“独角兽”们构建起的硬核科技之城
  16. 苹果win7系统无线网络无法连接服务器,苹果电脑不能连接wifi怎么修复_苹果电脑wifi连不上解决步骤-win7之家...
  17. linux下vi编辑器方向键变成字母的解决方法
  18. python control控制系统仿真再更新:使用内外环系统进行垂直起降飞行器横向控制仿真
  19. 2020Web前端的学习之路,以及反省自身的不足之处。
  20. 连锁企业如何迈出网络运维数字化升级第一步?

热门文章

  1. 【图像处理】灰度加权距离变换(GWDT)
  2. POST提交JSON字符串实战项目(JAVA网络网络爬虫)
  3. linux文件存储管理,深入探讨Linux文件系统管理小结
  4. Delphi 7皮肤控件VCLSkin 5 60的使用
  5. Neginx服务搭建
  6. Python Pycharm 配置Tips01 - 配置Pycharm的Python版本
  7. 笔记本电脑锁_2020年最好的10款笔记本电脑
  8. vs 正则表达式转大写_liunx之通配符amp;正则表达式
  9. 在哪里编写写php,php扩展编写
  10. datepicker不能选择是为什么_腻子膏为什么与墙沾不上?我来教您几招