24

Magento模板制作教程

我个人认为Magento模板制作的难点在于不了解Magento的架构,不会调动block。Magento的block调动几乎都是靠xml。在下面的内容会提及如何操作。

制作Magento模板的前提是:你要会Html,div+css。不管你想做什么模板,这个都是基础。如果想要做出个精致的Magento,还必须精通div+css。因为涉及到一个浏览器的兼容问题,当你在Firefox下打开你的Magento商城看着感觉是很完美,但是到了IE6下完全变形,而且中国还有50%左右的人用IE6。

在制作Magento模板之前,首先要选一个比较简单的模板,然后在此基础上做。我个人推荐使用Blank模板,这个模板比较干净,图片除了必须的 几乎没有,而且css也很精简。我刚开始做Magento模板的时候用的是Default的模板,这个模板的css文件很大,而且等模板完成后,会有很多无用图片。曾经做一个项目的时候,客户死死的抓住网站的css文件太大,让我相当的头疼。废话有点多,现在开始正题。

Magento模板最主要的地方是首页,首页完成,Magento模板就完成30%左右了。我个人习惯是先改头部和尾部,这两个地方是所有页面都有的。头部的东西都在app\design\frontend\default\你的主题\template\page\html\header.phtml里面。底部的东西都在app\design\frontend\default\你的主题\template\page\html\footer.phtml里面。这两块的话都是靠css修改的,没什么好说的。我重点讲下中间部分的布局等。

Magento的布局对于新手来说,是比较困难的。如果英语好的话建议去看看官方的介绍http://www.magentocommerce.com/design_guide/articles/intro-to-layouts,现在网上也有很多翻译好的了,想要的可以去找找。我个人认为布局就是把已有的block放到应该的地方,一般都是在xml里面调动。我介绍下catalog.xml,其他的就不说了,原理都一样,而且大部分的布局都可以在catalog里面实现。app\design\frontend\default\你的主题\layout\catalog.xml,进入后你可以看到类似的注释“Default layout, loads most of the pages”,这些注释的意思就是你所改的是什么地方的布局,例如:“Default layout, loads most of the pages”这句说的就是网站默认布局。接着往下看,会看到很多的<reference >标签,这些都是需要在page.xml里定义过后,这里才能用,这里先不详细介绍了。这些“name”有“left”,“right”,“header”等等,从字面上我们就能看出来他们所指的位置,“left”是指左边栏,“right”指右边栏,“header”指头部。各个<reference >标签里会包含多个<block>block就是我要调用的功能模块了。例如经常会有人问怎样把左边的什么移到右边,这个问题很好解决,在“left”里找到对应的block放到右边,这样就成功了。是不是觉得很简单,这篇就先讲到这,没写过这样的教程,可能讲的不详细,如果有不懂的可以留言。

25

Magento加速利器——lazyload

Author 紫月蓝骋    Category Magento     Tags

Magento的速度是令人头疼的问题,我现在介绍一种前端的加速方法。说到lazyload,相信很多人都不陌生,现在很多网站都已经用到这个技术,他可以延迟加载长页面的图片。对于Magento这样的商城网站的加速就很明显了。我今天说的这个lazyload是经过POPO改造的(强逼我给他加外连……)。下面我放一些测试的数据,我正在做的一个网站的列表页。
Magneto加速
Magento加速

很明显的就能看出差距。接下来写下用法:

首先加上jQuery,lazyload两段js。
read more

12

恢复更新

Author 紫月蓝骋    Category 未分类     Tags

进来几个月公司和家里的事情比较多,一直没时间更新博客。现在人在宁波,工作什么的都稳定下来了,博客我也开始恢复更新了。我的工作主要是做前端开发,所以关于magento模板制作,大家有问题的可以留言问我,程序功能方面我只能看着回答了,我不擅长。

希望转载我文章的同学,标明出处。算是对我的博客的支持吧,谢谢。

9

Magento产品直接进入结账页面

Author 紫月蓝骋    Category Magento     Tags

Magento在产品页增加个立即购买的按钮,跳过购物车页面直接进入结账页面。这个是今天客户提的需求,用了个简单的jQuery解决了这个问题。当然如果你的网站没有用到jQuery的话,就直接用JS写吧。

一、在addtocart.phtml中加入<a  href=”<?php echo $this->getBaseUrl() ?>checkout/onepage/”  id=”checknow”>立即购买</a>。

二、给加入购物车的按钮加个id=“addtocart”。

三、加入以下jQuery,

1
2
3
4
5
<script type="text/javascript">
jQuery("#checknow").click(function(){
jQuery("#addtocart").click();
} )
</script>

这个方法存在一定的缺陷就是,结账的时候会把所有购物车里的产品一起结了,不过客户就是要这样的结果,

8

Magento中添加Flash

Author 紫月蓝骋    Category Magento     Tags

Magento加Flash这个问题,让我纠结了下今天。一般的Flash是很好加的,我说下带有xml等文件的Flash的加法。

一、在根目录下创建一个文件夹swf,把Flash相关的东西放入。

二、新建一个Static Block加入以下内容(注意把其中的文件夹和文件名改为相对应的内容):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width','900',
'height','400',
'src','swf/name_of_your_flash_banner',
'quality','high',
'menu','false','base','.',
'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','swf/name_of_your_flash_banner'
); //end AC code
</script>
 
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="900" height="400" title="name_of_your_flash_banner">
 
<param name="movie" value="swf/name_of_your_flash_banner.swf" />
<param name="quality" value="high" />
<param name="menu" value="false">
<param name="wmode" value="transparent">
<param name="base" value="." />
 
<embed src="swf/name_of_your_flash_banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="900" height="400"></embed>
 
</object>
</noscript>

三、在你需要导入flash 的地方,导入这个block。

四、在该页面加入一个JS,AC_RunActiveContent.js
我是通过以上方法在Magento中加入Flash的,如有其他更加的方法,欢迎和我探讨下

22

Magento批量上传

Author 紫月蓝骋    Category Magento     Tags

Magento批量上传在,Magento中是个很重要的功能。介绍下一般的产品批量上传。
一、先在后台添加个产品,然后把这个产品在导出导出那里导出.csv表格。
二、用excel打开就可以看到批量上传需要的格式了。
三、把产品图片上传到/media/upload/创建子目录命名XXX/下。
四、在批量文件里填写图片信息,举例如下:
image /test/test1.jpg
small_image /test/test1.jpg
thumbnail /test/test1.jpg
五、按照导出的格式把其他Magento数据都填写完整之后就批量导入这个批量文件
注意:
1.一定要先上传图片,之后才可以上传批量文件,要不然前台看不到图片。
2.SKU是整个网站唯一的,不可以重复,否则以后上传的同名就会覆盖以前的产品。
以上就是Magento批量上传的简单方法,大家可以尝试下。改自magentochina.org

19

Magento 1.4.0.1升级到1.4.10报错

Author 紫月蓝骋    Category Magento     Tags

Magento1.4.0.1升级到1.4.1.0后会报错Fatal error: Call to a member function toHtml() on a non-object in /home/www/yourMagento/html/gamemore/app/code/core/Mage/Core/Model/Layout.php on line 529。
在magentochina.org找到了答案。
打开layout/page.xml,找到 改成
尝试下吧……

19

Magento清除缓存

Author 紫月蓝骋    Category Magento     Tags

Magento清除缓存有两种方法。
一、打开后台system——>Cache Management,refresh就是清除缓存,Disable是禁用缓存,在上线前,建议禁用缓存,Enable打开缓存。
二、直接删除var中的文件,var就在根目录下。
Magento清除缓存的方法就这两种

18

Magento翻译

Author 紫月蓝骋    Category Magento中文     Tags

Magento翻译有两种方法,通过后台,和翻译包。
一、通过后台,进入System——>Configuration——>Developer。点击Translate Inline选项,Enabled for Frontend选择yes是开启前台翻译,Enabled for Admin选择yes是开启后台翻译。这种翻译方法只能用在一个Magento网站,不可重用。
Magneto模板 翻译
二、通过翻译包,网上有很多翻译包,下一个,放到app\locale里面,然后进入后台启用。下过来的magento翻译包,会有一些不足。那就需要我们自己进行二次翻译。例如:About Us没有被翻译,进入翻译包打开其中一个csv文件,一般不同的地方有针对的翻译包,要看文件名。按照已有的格式写,”About Us”,”关于我们”。如果翻译没有成功,就进入About Us所在文件夹,看看格式是不是__(‘About Us’) ?>,再看看”About Us”与’About Us’里的内容是不是一样,差一个字符都会导致翻译失败。
在做双语站的时候,图片可能在两个站不一样,这里介绍下“图片翻译方法”。
getSkinUrl($this->__(‘images/co.jpg’)) ?>”/>然后在翻译文件中加入”images/co.jpg”,”images/翻译.jpg”。
Magento的翻译方法如果还有其他的,欢迎留言沟通。

13

Magento开启模板提示

Author 紫月蓝骋    Category Magento     Tags

Magneto模板提示对于开发很有用,今天很多人问起,在这里写下。
打开后台system——>Configuration,左边最后的选项 developer。不要忘记选择左上角的商店。
在debug选项中的Template Path Hints选择为yes就可以了。
magento模板提示
到magento前台看看效果吧

12

Magento热门免费插件——Fooman Speedster

Author 紫月蓝骋    Category Magento插件     Tags

Magento热门免费插件——Fooman Speedster对于提高网站速度有一定的作用,可以合并js,css。http://www.magentocommerce.com/magento-connect/FOOMAN/extension/457/fooman-speedster有需要的可以尝试下。