Magento模板安装教程

此教程讲解如何安装magento模板,由于模板不尽一样,安装可能也不一样,所以如何安装,需要按照模板的说明来进行。此教程只是对其中一种模板安装进行讲解,方便大家参考学习。

视频地址:http://www.tudou.com/programs/view/HbLFdOzp-yw/


继续阅读“Magento模板安装教程”

magento set image fit or fill the parent container

magento图片自适应容器大小
magento图片自适应容器大小

magento原始模板原先自带的图片处理会有白边,就是图片比例不符合代码中的尺寸时,magento会自动resize图片尺寸,并且自动加上白边。

其实去掉白边好搞,增加去白边的代码即可,如下

$this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210);

keepFrame(FALSE)这个是控制白边的,参数false就是不带白边。resize控制图片的比例,单独一个数字,如上面 200,是将图片搞成200*200的尺寸,这个只有在有白边的时候才有效,没有白边了这个resize就不太管用了,会按照实际比例缩放图片,你可以试试。

对于很多人来说也许去掉白边就够用了,但是有的时候有变态的情况,比如图片比例是1:5甚至1:10,尼玛 – – ! 怎么会有这么变态的图片比例,这会将你的布局搞的乱七八糟。如果你有这个情况,又想控制图片的最大宽高的话,看这篇博文会有所帮助。

首先我们将magento的图片的白边去掉了,下一步就是使图片自适应到你设置的大小,即使比例差别很大,也自适应下,图片不超出你指定的长宽。相当于,你设置了图片的最大宽度,最大高度。这样对于你布局来说,会好狠多。

jquery有很多图片缩放,自适应的插件,我找到的这个是我自己认为比较合适的 http://imgscale.kjmeath.com/,当然大家也可以找自己喜欢的,或者更满足大家自己需求的js插件。

看插件的说明,他要求在图片的外层有个div或者什么的是block类型的html标签,并且css中写上宽高。

继续阅读“magento set image fit or fill the parent container”

magento模板中XML与phtml关系(四)

magento模板中XML与phtml关系(四)
magento模板中XML与phtml关系(四)

我们来看看magento模板文件的XML与phtml文件以及文件结构。我突然觉得有必要说下,我将对大多数的xml文件以及phtml文件的作用做下讲解。

本次讲解使用magento1.4,模板使用base中default模板。

我们对应着XML文件和phtml文件来进行说明,按照字母顺序还是说,我不太清楚的就忽略掉,我都不知道的,基本大多数人都用不到。

继续阅读“magento模板中XML与phtml关系(四)”

magento模板中XML与phtml关系(三)

magento模板中XML与phtml关系(三)
magento模板中XML与phtml关系(三)

这次继续进行magento模板制作的探讨,上一次说了.xml可以做到.phtml做不到的事情。今天说说xml和phtml是怎么配合着来生成我们的magento模版的。

本次讲解,使用magento 1.4版本,使用base中的default模板。

例子是最快速了解magento的方式了,我们来看下magento头部的搜索框,是怎么显示出来的。

在:app\design\frontend\base\default\layout\catalogsearch.xml 中有声明定义

    <default>
        <reference name="header">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>

然后在:app\design\frontend\base\default\template\page\html\header.phtml 中调用输出

 <div class="quick-access">
            <?php echo $this->getChildHtml('topSearch') ?>

继续阅读“magento模板中XML与phtml关系(三)”

magento模板中XML与phtml关系(二)

magento的xml片段
magento的xml片段

今天我来继续讲下magento中xml文件与phtml文件的关系,了解这两种magento结构文件的关系,是magento模板制作的最基础知识。

本例以magento 1.4 中的base下的default模板为例

进入正题,我来说说xml可以做到,但是phtml做不到的事情。

1.定义页面结构(1栏,2栏,3栏)

.xml中定义页面结构,.phtml默认没有此功能。在magento中默认的页面结构有1栏结构,2栏结构,3栏结构。这个页面结构就是在xml文件中定义的。

如在:app\design\frontend\base\default\layout\page.xml 中

<default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

这个template=”page/3columns.phtml”就是在定义所有的页面默认使用3栏结构。

继续阅读“magento模板中XML与phtml关系(二)”

magento模板中XML与phtml关系(一)

magento官方模板开发指导
magento官方模板开发指导

magento模板开发过程中比较让人迷惑的就是magento的结构控制,在这《magento模板中XML与phtml关系》一系列的文章中,我将对此进行入门的讲解。

magento官网模板设计教程中已经初步讲解了模版中.xml与.phtml的关系。

模板文件分别存放于app和skin文件夹。app文件夹存放的是模板的结构文件。skin文件夹存放的是模版的css信息,也就是样式文件。

app文件夹下的模板文件夹的结构如下图

magento的app文件夹下的模版文件结构
magento的app文件夹下的模版文件结构

继续阅读“magento模板中XML与phtml关系(一)”

magento模板制作开发指导

我已经有两年的magento模板开发经验,magento模板的方方面面已经深深地印在我的脑海,在这里我给将要从事模板magento模板开发的初学者一些指导建议,使大家少走些弯路。我想这是中文magento教程里最好的一个模板开发指导了。

1.你首先要学习html和css,这是任何一个网站模板开发所必须的基础知识,也是你以后magento模板制作的时候最常用到的

我推荐的学习网址是:w3c在线教程

2.你只需要了解一点点的PHP,尽管magento是php zend写的一个软件,但模板制作过程中你不需要很熟悉php

你只要知道几个和模板有关的php方法就可以了,例如 <?php echo $this->getChildHtml(‘head’) ?>  这个getChildHtml(”)方法。

3.稍微了解下xml,所以你要看官网的模板开发指导教程,是英文的,但是网上有很多中文的,建议看英文的,毕竟代码都是英文的,翻译也翻译不大好。

参考:官网模板设计教程

继续阅读“magento模板制作开发指导”