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(); }}
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>
<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>
<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数据的返回
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 = <<<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;
转载于:https://www.cnblogs.com/myjavawork/archive/2012/11/07/2759576.html
MAGENTO MOUDLE WEB FRONTEND相关推荐
- SIPp web frontend(2)
SIP VoIP 測试交流群: 323827101 欢迎大家转载.为保留作者成果,转载请注明出处.http://blog.csdn.net/netluoriver.有些文件在资源中也能够下载.假设你没 ...
- web前端渲染和后端渲染(web front-end and back-end rendering)
在网上查找了很久的前端渲染和后端渲染的区别,最后总算在知乎上看到了一个比较清楚的解释,感谢万分! 作者:iakul 链接:https://www.zhihu.com/question/28725977 ...
- WEB FRONT-END NOTE DAY02
一.VS Code Ctrl + O 打开新的文件 Ctrl + N 新建 Ctrl + C 复制 Ctrl + X 剪切 Ctrl + V 粘贴 Ctrl + W 关闭当前文件 Ctrl + Shi ...
- 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 ...
- 闪亮蔚蓝_在R中构建第一个闪亮的Web应用
闪亮蔚蓝 数据科学 (DATA SCIENCE) Do you want to make your R code publicly available for others to use? If yo ...
- magento转移搬家
1.首先备份你服务器的数据库. system >> Tools >> Backups >> Cerate Backup 然后等待它自动完成. 完成以后有两种文件 ...
- 网页设计经典案例(Web)
网页设计经典案例 一.实现效果(一) 源代码(二) <!DOCTYPE html> <html lang="en"> <head><met ...
- Adobe Magento 2 认证证书的变化
自从2018年5月Adobe收购Magento以来,到了2020年3月,Adobe才真正开始将Magento的内容整合到Adobe体系中,并且还推出了Magento commerce cloud产品. ...
- web开发日语词汇(一)
掲示板 forum/bbs 论坛 フォーラム forum/bbs 论坛 ブログ blog 博客.部落格 ページ page 网页.页面 ウェブページ web page 网页.页面 メール mail 邮件 ...
最新文章
- loadrunner中自定义查找并替换函数
- sql 增加自增列 耗时长_SQLServer为已有数据的表添加一个自增列
- 如何解决盗版Windows问题
- shell在二级python_在python下运行时在shell脚本之间传递shell变量[duplicate]
- python爬虫可以爬哪些山_从python爬虫,到更爱这个世界
- 【转】ubuntu 下安装mongodb php 拓展的方法
- tomcat虚拟目录和虚拟主机等相关配置
- html中span的值不显示,为什么加上form标签之后就不能在span中显示获得值了?
- AIX操作命令记录中
- 初学者UI设计临摹素材模板,请先搞清楚这4个分类!
- FTP初始化文件.netrc使用技巧[转发]
- 《图解TCPIP》知识学习(1.4):协议由谁规定
- QCC3005芯片 Line IN 听歌的时候声音比较小
- iphone如何删除“不可删除”的描述文件?(桌面快捷方式web clib)
- 深圳:由“独角兽”们构建起的硬核科技之城
- 苹果win7系统无线网络无法连接服务器,苹果电脑不能连接wifi怎么修复_苹果电脑wifi连不上解决步骤-win7之家...
- linux下vi编辑器方向键变成字母的解决方法
- python control控制系统仿真再更新:使用内外环系统进行垂直起降飞行器横向控制仿真
- 2020Web前端的学习之路,以及反省自身的不足之处。
- 连锁企业如何迈出网络运维数字化升级第一步?
热门文章
- 【图像处理】灰度加权距离变换(GWDT)
- POST提交JSON字符串实战项目(JAVA网络网络爬虫)
- linux文件存储管理,深入探讨Linux文件系统管理小结
- Delphi 7皮肤控件VCLSkin 5 60的使用
- Neginx服务搭建
- Python Pycharm 配置Tips01 - 配置Pycharm的Python版本
- 笔记本电脑锁_2020年最好的10款笔记本电脑
- vs 正则表达式转大写_liunx之通配符amp;正则表达式
- 在哪里编写写php,php扩展编写
- datepicker不能选择是为什么_腻子膏为什么与墙沾不上?我来教您几招