Magento首页添加产品

Browsing all articles from 四月, 2010

四

紫月蓝骋

Magento

Magento首页产品, Magento首页模块

Magento首页经常会有热门产品，最新产品等等，有两种实现方式：一、写程序，放真实的最新或热门。二、建一个分类然后放到首页来。我主要介绍下第二种方法，第一种的话，有很多Magento插件实现。
首先在Magento后台添加一个分类，这个分类选择不要显示，不然在菜单中也会显示出来。然后在首页cms中加入{{block type=”catalog/product_list” category_id=”268″ template=”catalog/product/list.phtml”}},其中category_id=”268″是你创建的分类的ID号。其实这是在cms中加入模块的一个方法把type和temolate改下，就可以加入其他的模块。如果你首页的产品和产品展示页的产品展示形式不一样，你可以新写个list，命名为newlist.phtml。{{block type=”catalog/product_list” category_id=”268″ template=”catalog/product/newlist.phtml”}}。
这样Magento的首页就有产品了。深入的东西，还需要慢慢了解。

四

IE6下PNG图片透明解决方法

紫月蓝骋

前端相关

IE6 PNG透明

PNG在IE6下不透明是个比较老的问题了，今天在逛玛萨玛索的时候看到他们的png在ie下是透明的，就把类似png的一个JS拷下来试验了下，成功了。只要把下面的js导入网站中就可以了，比较简单，所以拿出来共享下。在Magento中测试也成功了，不过背景图片透明不支持。在Magento中不建议使用png图片，现在解决IE6下透明的方法对性能都有一定影响。

// JavaScript Document
 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
 {
 var arVersion = navigator.appVersion.split("MSIE")
 var version = parseFloat(arVersion[1])
 if ((version >= 5.5) && (document.body.filters))
 {
 for(var j=0; j<document.images.length; j++)
 {
 var img = document.images[j]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 img.outerHTML = strNewHTML
j = j-1
 }
 }
 }
 }
 //window.attachEvent("onload", correctPNG);
 
 window.onload = correctPNG;

四

Magento模板结构分析

紫月蓝骋

Magento模板

制作Magento模板前对Magento模板结构的了解是很重要的，Magento模板分布在两个地方，一个是控制网站样式及图片，另外个是调动及修改网站功能模块。我们以default这个模板为例（接下来都以这个模板为例），我们分别打开skin\frontend\default下， app\design\frontend\default，你会发现在这两个文件夹下都有个default的文件夹，这两个就是主要模板文件，如果你有个blank模板，那在这两个文件夹下都会有个blank文件夹。

打开skin\frontend\default\default，里面有css,images,js,favicon.ico。这个不用多做解释了吧，相信看到了就是知道是什么东西了。

打开app\design\frontend\default\default，里面有layout，locale，template。

1、layout里面都是xml文件，主要是用来控制网站，模块定位，在Magento模板制作中有相关介绍，这里就不多说了。

2、locale里面放的是语言包。

3、template里面放的是各个模块。

Magento模板主要就是这些东西，下面我讲下模板的打包。在了解原理后，这个就很简单了，skin\frontend\default\default，app\design\frontend\default\default，这两个打包出来就可以了，放到你需要这个模板的网站上，然后后台更改下，就可以用了。

四

Magento模板制作教程（置顶）

紫月蓝骋

Magento模板

Magento模板制作，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放到右边，这样就成功了。是不是觉得很简单，这篇就先讲到这，没写过这样的教程，可能讲的不详细，如果有不懂的可以留言。

四

Magento中国化心得（一）

紫月蓝骋

Magento中文

Magento中国化, Magento中文

Magento到了中国难免会水土不服，Magento的功能很强大，但很多功能，设置都不适合中国人使用。已经做过多个中文Magento项目，今天分享下将Magento改版为适合中国人使用的Magento的心得。

一、姓名，国外习惯姓和名分开写，而且顺序也和国内不一样。建议是将姓名合并成一项，这个做起来有点难度，目前为止我这还没有完美的解决办法。从用户体验角度出发，在注册的时候，越简便越好，所以很多客户他在注册的时候不想要姓名。Magento的姓名出现的地方很多，删除很困难，现在目前用的方法是通过js把邮件名当做名字来用，这样的弊端很大，所以希望已经解决此方法的兄弟能分享下。

二、收件地址，Magento的书写地址顺序在国内是反过来的，这个修改比较简单，不过有多个地方要修改，Magento里面有多个地方出现地址。国家我建议只剩下中国，或者去掉，如果你的Magento商城只是在国内用的话。

三、支付方式，需要在Magento中加入支付宝和网银插件，现在的Magento还没有这两样支付方式，需要我们另外加入。

这三点是比较重要的，如果你要用Magento发展国内商城的话，这三点我想必须要修改的。一时之间就想到这么多，在后面会继续添加一些中文Magento商城需要修改的一些细节，大多中国老板都喜欢的东西，嘿嘿……

四

Magento免费模板——Modern Theme

紫月蓝骋

Magento模板

Magento免费模板, Magento模板

Magento免费模板——Modern Theme。这个免费模板在官方下载是最多的，但我没用过。不过看到过多次，这个模板还是比较不错的。可以直接拿来用。

Magento免费模板-Modern

Extension Key：magento-core/Interface_Frontend_Default_Modern

四

Magento开发必备插件

紫月蓝骋

Magento插件

Magento开发, Magento插件

只要你是做Magento开发的，这个插件你就必装，节约的时间不是一点啊。安装后在前台底部会生成一个工具条

可以直接打开和关闭模板提示，清除缓存等，许多需要去后台操作的东西，我们在前台就可以完成了。是不是觉得很Height？赶紧去装个吧……

插件网址：http://www.magentocommerce.com/module/2271/developer-toolbar

Extension Key:magento-community/HM_DeveloperToolbar

四

Magento左边导航菜单调出方法

紫月蓝骋

Magento模板, 未分类 Tags

Magento左边导航, Magento左边菜单, 左边产品目录, 左边导航菜单

Magento左边菜单调出，还是比较简单的，我说下大概的方法。

在app/design/frontend/default/你的主题/template/catalog/navigation下有个top.phtml，复制一个出来改名为leftnav.phtml。

然后进入/app/design/frontend/default/你的主题/layout/catalog.xml，<default></default>里面的<reference name=”left”></reference name>加入

1	<block type="catalog/navigation" name="catalog.leftnav" template="catalog/navigation/leftnav.phtml"/>

四

Google浏览器无法显示12px以下字体

紫月蓝骋

前端相关

字体

今天做的一个网站发现Google浏览器的字体明显的比Firefox大，检查样式后，没发现什么不对的地方，就自己做了下测试，发现Google浏览器只支持12px（包括12px）以上的字体。对汉字来说，这样也许比较不错，因为汉字12px以下就不好看了。但对于英文来的话，就觉得没必要了，相对小点，还是会比较清晰。

四