Magento项目UI设计规范
Magento系统中的12种代码设计模式
Magento系统中的12种代码设计模式给出一个需求,解决的方案有很多,设计模式便是其中的最佳方法,可以解决特定环境下的同类问题。
设计模式的代码是可重复利用的,对于提高工作效率大有裨益,那从长远角度考虑,是不是应当在代码中尽可能多的使用设计模式呢?明显不是,一名优秀的软件开发者知道何时使用设计模式,并不会无的放矢。
早期Magento框架中的比较出色的一点是,其中的绝大部分(甚至所有)使用的设计模式的方式都有其用意所在。
模式1:MVCModel-View-Controller,即模型-视图-控制器,简称MVC,应该是最广为人知的一种设计模式(大多数使用者甚至都不会将它视为设计模式)。
这是一种将业务逻辑、页面展示、逻辑分离开来的设计模式。
Mageno中使用了大量的xml文件作为逻辑模板,使用pthml(混合了HTML 和PHP)文件作为它的视图,剩下的模型依赖Varien的ORM。
大多数的业务逻辑发生在模型中,而控制器将模型数据映射到视图,Magento的视图包含了太多的逻辑而显示很笨重,不得不通过一个专门的php类(Block类)进行渲染。
模式2:前端控制器模式前端控制器模式确保有且只有一个入口。
所有的请求都会先从前端控制器那里走一遭,被识别后路由分发到指定的controller,进行特定的处理。
在Magento唯一一个入口文件index.php 就起到了前端控制器的作用,它通过Mage::app()方法实现应用环境的初始化并将请求路由到正确的controller中。
模式3:工厂模式工厂模式的“工厂”二字已经充分表露了它的功能————如工厂的流水线一般统一进行类的实例化。
它被广泛应用在Magento的代码库中,负责自动加载系统。
在config.xml文件中定义一个module的别名后,工厂就悄咪咪的记录了别名对应的类及类所在的位置。
Mage核心类中有很多辅助实现工厂的方法,其中的Mage::getModel()方法可以接收一个类的别名返回类的实例,如Mage::getModel('catalog/product')返回产品类Mage_Catalog_Model_Product的实例。
magento制作主题
Magento建立主题的全部工具:模板布局区块皮肤(images, CSS and block-specific Javascript)要建立一套网店的模板,你需要按照一下这些步骤完成:第一步:关闭系统缓存system cache,到管理界面Administration Panel内System -> Cache Management.在'All Cache'选'Disable'然后保存。
这样将会实时的展现你对页面的修改。
第二步:确定你网店可能使用的所有结构类型,你可以做一个如下的列表:主页使用三栏结构分类列表页使用两栏结构包括右边栏.客户页面使用两栏结构包括左边栏t模板框架做完了上面的列表,你就可以为每个结构类型创建一个(X)HTML标记并保存为模板框架,将它保存在app/design/fronten/your_interface/your_theme/template/page/. 第三步:根据功能修剪你的(X)HTML。
建立好模板框架后, 你需要为每个内容模块创建模板。
并为每个功能修改(X)HTML标签。
比如,设计一个mini-cart区域,这个区域的标签将成为它自己的模板文件。
其他诸如产品标签,登录区等等也一样。
这些功能Magento已经提供了,所以你只要参考已有的模板标签来创建自己的标记逻辑就可以了。
网店任何页面的全文标记是通过一个模板数组完成,数组中每一个项都描述着一个模块的功能。
为了找出在网页上您想要修改的模板,您可以打开模板路径的提示。
通过:System -> Configuration选择你的网店(website/store selector)页面刷新后,选'Developer',然后在Template Path Hints 选'Yes'.做完之后回到前台,刷新页面之后你就可以看到所有模板列表的路径了。
使用Magento开发强大的在线商店的指南及优缺点评价
使用Magento开发强大的在线商店的指南及优缺点评价Magento是一种广泛使用的开源电子商务平台,被许多企业和个人用来搭建在线商店。
本文将提供使用Magento开发强大的在线商店的指南,并对其优缺点进行评价。
一、Magento简介Magento是为满足各种规模和类型的电子商务需求而设计的平台。
它提供了丰富的功能和灵活的配置选项,使用户能够根据自己的需求来定制和扩展其在线商店。
二、使用Magento开发商店的指南1. 安装和设置Magento- 下载并安装Magento软件- 配置数据库和服务器环境- 设置商店的基本信息和首选项2. 设计商店外观和布局- 选择和安装适合的主题模板- 自定义商店的标志和品牌元素- 设计并优化网站布局,以提供最佳用户体验3. 添加和管理产品- 创建产品目录结构- 添加产品描述、图片和价格等详细信息- 管理产品库存和供应链4. 创建购物车和支付流程- 设计购物车页面和功能- 集成常用支付方式,如信用卡、PayPal等- 确保支付过程的安全性和稳定性5. 优化商店的性能和安全- 针对SEO进行优化,提高网站在搜索引擎中的排名 - 保护网站免受恶意攻击和数据泄露- 使用缓存和优化技术提高网站加载速度6. 添加扩展功能和模块- 浏览Magento市场,寻找适合的扩展功能和模块- 安装和配置所选的扩展功能和模块- 调整和定制扩展功能以符合特定需求三、Magento的优缺点评价1. 优点- 功能丰富:Magento提供了许多强大的功能,如多店铺管理、目录管理、优惠券、促销活动等,满足了商店经营者的各种需求。
- 灵活性强:Magento可以根据商店的需求进行定制,并支持扩展功能,使得商店能够满足不断变化的市场需求。
- 社区支持:作为开源平台,Magento有一个活跃的社区,用户可以从中获得帮助、交流经验和分享资源。
2. 缺点- 学习曲线陡峭:Magento拥有很多功能和配置选项,对于初学者来说,可能需要一些时间来学习和掌握。
Magento电子商务平台的完全指南
Magento电子商务平台的完全指南Magento是一款领先的开源电子商务平台,被广泛用于创建和管理在线商店。
它提供了丰富的功能和灵活的架构,使得用户能够根据自己的需求来定制和优化他们的商店。
本文将为您提供关于使用Magento建立和管理电子商务平台的全面指南。
第一章:Magento的概述在第一章中,我们将详细介绍Magento的概述,包括其历史和发展,以及为什么选择Magento作为电子商务平台的优势。
我们还将介绍Magento的基本架构和主要特性,以便读者能够了解它的工作原理和能力。
第二章:Magento的安装和配置在第二章中,我们将指导读者如何安装和配置Magento。
我们将解释如何选择合适的主机环境,如何下载和安装Magento,以及如何通过简单的配置步骤来设置商店的基本信息。
第三章:Magento的主题和布局在第三章中,我们将介绍如何使用Magento的主题和布局来创建独特的商店外观。
我们将讨论如何选择和安装主题,如何自定义布局和设计,以及如何使用Magento的模板系统来定制商店的外观和用户体验。
第四章:Magento的产品和目录管理在第四章中,我们将详细介绍如何使用Magento管理产品和目录。
我们将探讨如何添加和编辑产品,如何设置产品属性和分类,以及如何使用Magento的目录管理功能来组织产品和创建商品列表。
第五章:Magento的订单和支付管理在第五章中,我们将向读者展示如何使用Magento管理订单和支付。
我们将讨论如何创建和编辑订单,如何设置运输方法和税率,以及如何集成和配置支付网关,以便客户可以安全地完成购买和付款。
第六章:Magento的营销和促销策略在第六章中,我们将介绍如何使用Magento的营销和促销工具来吸引和留住客户。
我们将探讨如何使用优惠券和折扣功能,如何设置购物车价格规则,以及如何创建和管理广告和促销活动。
第七章:Magento的SEO和网站优化在第七章中,我们将向读者介绍如何使用Magento的SEO和网站优化功能来提高商店在搜索引擎中的排名。
Magento模板制作教程
Magento设计人员专业名词(Magento Design Terminologies)为了能够更好的理解本设计人员中文手册,熟悉一下Magento系统中的设计方面的术语是很关键的。
术语的这一章介绍可能对于你来说是比较新的概念,因此,您可以利用这段时间彻底的读通他们。
但最重要的,如果你不能充分把握这些概念,不要灰心,所有这些新名词-本章仅仅向你介绍一次,在后面的章节会对这些简单的定义进一步深入研究和扩大。
这一章介绍的术语包括:网站和网店(Website and Store)Magento中的一个网站(Website)是一些共享相同的客户、订单信息和购物车信息的商店(Store)的集合。
Store是一些Store View的集合。
这些都是比较笼统的概念,我们在确立个别特别需要的网店时用这些概念可以很好的建立。
下面有几种确定不同website, store 和store views用途的:方案 1一家名为Dubloo的公司创建了一个在线销售平台,它包括三个独立的服装商店,每个迎合不同价格水平的受众。
Dubloo公司希望三个商店能够共享所有客户和订单信息。
在这种情况下,Dubloo公司将有一个网站(Website),下面有三个三个商店(Store)。
商店将确定个别的价格水平商店,网站将成为Dubloo公司的总平台。
方案 2一家名为My Laptops要建立两个单独的网站,两个都是销售笔记本电脑,但是不同的价格。
他们还希望每个站点提供英文和西班牙文的选择,每个客户可以在语言选择中选择自己的语言。
它们还需要两个网站同步客户和订单信息。
在这种情况下,Store View将在网站中将确定每个英文和西班牙文版本。
两个网站分别是―My Laptops‖和―Cheap Laptops‖。
方案 3一家名为Bongo's Instruments想创建一个在线的销售网点。
没有其他分支店,Bongo's Instruments就是是商店以及网站。
Magento布局详解教程
Module/etc/frontend/page_types.xml Page Types
Layout Handles
Full Action Name
default
other handles
Design Abstraction Layout XML
Resulting Layout Structure
Validate layout content entered through UI Referential integrity in runtime for merged layout (in developer mode only)
Implementing the schema pushes you to revisit design and stick to more declarative approach
© 2014 Magento, Inc.
Containers
Comparison in 1.x and 2.x
© 2014 Magento, Inc.
Containers
The conceptual difference
Behavior of containers is predictable
A wireframe of a page can be represented by bare containers With containers, there is no point to having nested elements in blocks
z
z
z
© 2014 Magento, Inc.
Code Execution in Layout XML
Magento的应用和配置管理主题
Magento的应用和配置管理主题先决条件请确保您设置你的Magento应用程序开发模式。
应用主题要添加到文件系统中的主题后,可以将其应用到您的商店。
您应用在管理一个主题。
要应用的主题:1.管理员登陆进入后台CONTENT > Design > Themes.请确保你的主题会出现在主题列表中2.Stores > Configuration > Design.3.在Scope下拉框中选择存储视图要应用的主题。
4.在Design Theme选项卡,选择设计主题下拉新创建的主题。
添加设计例外设计例外,您可以指定,而不是为他们创造一个独立的商店浏览特定用户代理的替代主题。
要添加的设计异常:1.在管理面板去CONTENT > Design > Themes并确保您的主题出现在可用主题列表中。
2.Stores > Configuration > Design.3.Scope下拉字段中,选择您的网站。
4.在旁边的User-Agent例外设计主题选项卡上User-Agent Exceptions 单击添加。
5.在搜索字符串Search String中指定或者使用普通字符串或常规异常(PCRE)用户代理。
在设计主题Design Theme下拉列表中选择要用于匹配代理的主题。
新增主题无关的标志您可能需要设置一个永久性店标识,显示在店面无论应用什么样的主题。
要添加一个永恒的主题无关的标志:1.Stores > Configuration > Design.2.Scope下拉菜单中,选择存储视图。
3.在常规配置的设计Design 部分,展开标题Header标签。
4.在LOGO Logo Image图片浏览领域中保存文件系统中的徽标文件。
5.要查看应用更改,重新加载店头版。
您在此处添加的标志是存储在/pub/media/logo/default/目录下要删除永久性标志,去同一个位置,选择旁边的标志图像的复选框,然后单击删除delete。
Magento版面设计
– 主题(THEMES )
• 主题包含模板信息 (layout files, template files, theme-specific translation files) 和皮肤信息 (CSS files, images, and themespecific JavaScript files). • 一个主题只能属于一个包
四 布局文件
• 布局文件
– Layout文件里面的各种XML元素
• Update:把当前内容同update引用的元素内容合并。
四 布局文件
• 布局文件
– Layout文件里面的各种XML元素
• Update:把当前内容同update引用的元素内容合并。
四 布局文件
• 布局文件
– Layout文件里面的各种XML元素
五 主页文件
• Magento 1.91 demo主页
– 结合演示讲解
五 主页文件
• XX网主页
– 不是一种好的设计方式
• 在全页面缓存里会带来问题
– 结合演示讲解
五 主页文件
• 如何创建主页
– /creating-customhomepage-template-magento/ – 1、如果结构不同,先创建主页结构模板文件 – 2、在CMS里选择该结构模板文件,把内容复制 到Content里
六 版面设计
• 创建自己的包和主题目录结构
– 总结
• 修改页面布局的三种途径
– 1、对于CMS管理的页面,可以在CMS通过下拉项选择页面 布局。 – 2、对于CMS管理的页面,可以通过CMS的Design tab在 Layout Update XML 输入修改内容。 – 3、通过Magento的布局文件中定义的handle修改,修改内 容放在文件local.xml中。
如何使用Magento进行电子商务网站定制
如何使用Magento进行电子商务网站定制第一章简介Magento是一种开源的电子商务平台,为企业提供了灵活的网站定制和管理功能。
它是目前世界上最受欢迎和广泛使用的电子商务平台之一。
本章将介绍Magento的基本特点、优势和适用范围。
首先,Magento具有强大的定制能力。
它提供了丰富的主题、布局和模板,可以满足各种不同类型和规模的电子商务需求。
此外,Magento还支持自定义功能和模块的开发,可以根据企业的具体需求进行个性化定制。
其次,Magento具有丰富的功能和工具。
它提供了完整的商品管理、订单管理、支付和物流管理功能,以及多语言、多货币和多店铺管理功能。
此外,Magento还支持市场推广、搜索引擎优化和社交媒体集成等功能,帮助企业更好地展示和推广产品。
第二章设计与布局设计与布局是电子商务网站定制的重要环节。
本章将介绍如何使用Magento进行网站设计和布局定制。
首先,选择合适的主题。
Magento提供了很多免费和收费的主题供用户选择。
用户可以根据自己的品牌形象和定位选择合适的主题,或自定义设计主题。
主题不仅涉及外观设计,还涉及网站的用户体验和交互设计。
其次,优化布局结构。
Magento提供了丰富的布局选项,用户可以根据自己的需求进行布局设计。
可以根据产品分类、品牌、促销活动等设置不同的布局,以提高用户浏览和购买的体验。
第三章商品管理商品是电子商务网站的核心内容,商品管理是网站定制中的重要环节。
本章将介绍如何使用Magento进行商品管理。
首先,创建商品。
Magento提供了完整的商品管理功能,用户可以添加商品的基本信息、介绍、图片等内容。
同时,可以根据商品的特性和属性进行分类和分组,方便用户浏览和筛选。
其次,设置价格和促销活动。
Magento支持不同类型的价格设置,包括普通价格、特殊价格和折扣价格等。
用户可以根据市场需求和销售策略设置不同的价格,以及参与不同的促销活动。
第四章订单管理订单管理是电子商务网站运营的核心环节,对于定制化网站而言更显重要。
UI设计UI设计规范完整版精选全文
高效性与 准确性
3.1.2
UI设计规范包括的内容
3
1.图标设计规范
图标是具有高度概括性的、用于传达视觉信息的小尺寸图像,常与文本搭配使用。图标不仅 能传达出丰富的信息,还能提升整个界面美感和信息可识别性。同时,有的图标还具有交互性和 功能性,用户点击这些图标会执行特定的操作,触发相应的功能。
3.1.2
15
1. Windows系统的界面尺寸规范
由于Windows系统也在不断的升级改版,其界面尺寸有很多,常见的界面尺寸主要包括如 图所示的8种主要尺寸。
3.2.3 Windows系统的UI设计规范
16
2.控件规范
与Android系统和iOS系统一样,Windows系统中的控件也需要制定相应的设计规范。
图片的比例
在UI设计中,对于图 片的比例没有严格的 规定,设计人员可根 据需要进行调整。
图片的尺寸规范
• App个人中心界面的用户头像大小多 为144px×144px和120px×120px 个人资料界面的用户头像大小多为
• 96px×96px 消息列表界面的用户头像大小多为 80px×80px
• 帖子详情页界面的用户头像大小多为 44px×44px和60px×60px。
了解UI设计规范
3.1.1 UI设计规范的原则
2
一致性
UI设计规范的一致性原则表现在产品界面的各个方面, 如在设计布局界面时,需要使标题字体、内容字体、链 接字体等保持一致;在进行交互设计时,界面中的交互 组件、交互流程、用户行为、交用的设计细节规范必不可少,这不仅能够降低设计人 员的沟通成本,提高设计的准确性,还遵循了UI设计规范 的高效性和准确性原则。
导航栏
Logo图标
Magento项目UI设计规范
Magento Version1.4.1.0 Magento项目UI设计规范Prepare by Eric HuangSilk Software08/29/2010Version HistoryTable of Contents1MAGENTO UI设计遵循原则 (3)1.1T HEME设计原则 (3)1.1.1Design设计原则 (3)1.1.2Skin设计原则 (3)2SVN 使用遵循原则 (4)2.1SVN目录结构说明 (4)2.2SVN开发人员文件包存放原则 (5)2.3SVN设计人员文件包存放原则 (5)2.4整合设计人员文件包遵循原则 (5)3其它 (6)1Magento UI设计遵循原则1.1Theme设计原则1.1.1Design设计原则1.1.1.1Template设计原则a.禁止修改app\design\frontend\base\default\template中的任何文件。
b.警慎修改 <%theme%>\template\page\html文件夹下的 .phtml文件,避免覆盖或错改UI设计人员的修改。
c.自定义的Theme统一命名原则,主网站的Theme用网站的名称做为Theme名称,如果有子网店,则用子网店的名称做为子网店的Theme名称.d.自定义的Theme统一存放到app\design\frontend\default\<%Theme Name%>e.第三方插件的.phtml统一存放到app\design\frontend\default\default\template中; .xml文件统一存放到app\design\frontend\default\default\layout中。
f.需要修改、扩展、重写与业务紧密相关部分的.phtml模板文件,如果原有Theme中对应部分,则可以在原有Theme中修改;如果原有Theme中没有对应的模板,则从app\design\frontend\base\default\template中复制对应的模板中,然后才进行修改。
Magento模板定制教程
Magento模板定制教程第一章:Magento模板定制前言Magento是一款功能强大的开源电商平台,它不仅可以提供丰富的功能扩展,还支持自定义模板的定制。
本篇文章将带您深入了解Magento模板定制的相关知识,从简单的定制开始,逐步介绍如何开发复杂的自定义模板,让您能够根据自己的需求灵活地改变网站的外观和功能。
第二章:Magento模板的基本结构和文件在开始定制Magento模板之前,我们需要了解Magento模板的基本结构和文件。
Magento模板通常由多个文件组成,其中包括布局文件、模板文件、静态资源文件等。
本章将对这些文件进行详细介绍,让您了解它们的作用和关系。
第三章:修改Magento模板的外观Magento模板的外观是通过修改CSS样式表来实现的。
本章将介绍一些常用的CSS样式修改方法,如如何更改颜色、字体、边框等,以及如何添加自定义的CSS样式。
通过这些方法,您可以改变网站的颜色和排版,使其更符合您的品牌形象和设计要求。
第四章:定制Magento模板的布局Magento的布局文件是控制网站页面结构的关键所在。
本章将介绍如何通过定制布局文件来改变网站的页面结构,如添加新的页面、修改页面布局、调整页面块的位置等。
通过对布局文件的定制,您可以实现更灵活的页面显示效果,提升用户体验。
第五章:Magento模板的模板文件定制Magento的模板文件是网站页面内容的核心所在。
本章将介绍如何通过修改模板文件来改变页面的内容,如修改产品列表的显示方式、调整购物车页面的布局等。
通过对模板文件的定制,您可以个性化地呈现产品信息和其他页面内容,提升网站的独特性和吸引力。
第六章:Magento模板的静态资源管理Magento模板使用的静态资源文件,如图片、JavaScript文件等,可以通过定制来改变网站的外观和交互效果。
本章将介绍如何添加、替换和自定义静态资源文件,以及如何通过缓存和压缩等技术来优化静态资源的加载速度,提升网站的性能和用户体验。
构建个性化商城网站的Magento开发教程
构建个性化商城网站的Magento开发教程第一章:介绍Magento开发Magento是一个开源的电子商务平台,使用PHP语言开发。
它具有灵活、可扩展和高度定制化的特点,适用于各种大小和类型的电子商务网站。
第二章:准备工作在开始构建个性化商城网站之前,我们需要进行一些准备工作。
首先,我们需要选择一个合适的服务器环境来运行Magento。
通常情况下,我们建议使用Linux操作系统和Apache服务器。
其次,我们需要安装PHP和MySQL,以及其他必要的软件和库。
第三章:安装Magento安装Magento是构建个性化商城网站的第一步。
首先,我们需要下载Magento的安装包,并解压到服务器的网站目录中。
然后,我们需要创建一个MySQL数据库,并将数据库信息填入Magento安装向导中。
最后,我们需要运行安装向导,按照提示完成安装过程。
第四章:设置Magento在安装完成后,我们需要进行一些基本的设置,以便Magento能够正常运行。
首先,我们需要设置Magento的基本信息,包括网站名称、URL和货币设置。
其次,我们需要配置Magento的税务和货运选项。
最后,我们还可以选择安装和配置一些Magento的扩展功能。
第五章:创建产品目录一个个性化商城网站的核心是产品目录。
在Magento中,我们可以创建不同类型的产品,包括简单产品、组合产品和虚拟产品等。
我们可以设置产品的名称、价格、描述和图片等信息。
此外,我们还可以为产品指定相关的类别和属相。
第六章:设计主题为了让个性化商城网站更具吸引力,我们可以设计一个独特的主题。
在Magento中,我们可以通过更换皮肤、定制布局和样式来实现。
我们可以选择Magento默认提供的主题,也可以根据自己的需求来定制主题。
第七章:设置支付和物流一个完整的个性化商城网站必须具备支付和物流功能。
在Magento中,我们可以集成各种支付和物流服务提供商,例如PayPal、银联和顺丰等。
Magento电子商务平台主题定制教程
Magento电子商务平台主题定制教程第一章:概述Magento是一款广泛应用于电子商务领域的开源平台,它提供了丰富的功能和灵活的定制选项,使得商家能够根据自己的需求来创建独特的电子商务网站。
本教程将介绍如何在Magento平台上进行主题定制,以满足各类商家的需求。
第二章:了解Magento主题结构在开始定制主题之前,我们需要先了解Magento主题的结构。
Magento的主题由布局文件(layout files)、模板文件(template files)和静态文件(static files)组成。
布局文件负责定义页面的结构和布局,模板文件用于渲染页面的具体内容,而静态文件则包括CSS和JavaScript等用于美化和增加交互性的文件。
第三章:创建自定义主题要定制Magento主题,首先需要创建一个自定义主题。
在Magento中,主题是基于继承的概念来实现的,即创建一个新的主题并继承自已有的主题,然后在新的主题中进行定制。
通过这种方式,可以保持已有主题的功能和布局,并在此基础上进行修改。
第四章:修改布局布局文件定义了页面的结构和组成部分。
通过修改布局文件,可以改变页面的布局和组件的位置。
布局文件使用XML语法编写,通过指定blocks(区块)和containers(容器)的位置和属性来控制页面的结构。
可以根据自己的需求添加、移动或删除blocks和containers,从而实现页面布局的定制。
第五章:定制模板模板文件负责渲染页面的具体内容,通过修改模板文件,可以改变页面的样式和展示方式。
模板文件使用.phtml文件扩展名,其中包含了HTML和Magento的自定义标签,可用于渲染动态内容。
通过修改模板文件中的标签和样式,可以实现对页面的定制。
第六章:定制CSS和JavaScript静态文件包括CSS和JavaScript等用于美化和增加交互性的文件。
通过修改CSS文件,可以改变页面的样式和排版;通过修改JavaScript文件,可以增加页面的交互功能。
制作你自己的Magento主题
制作你自己的Magento主题-Building Your Theme星期二, 08/19/2008 - 22:19 — foolsky建立你自己的主题(Theme)Magento是建立在完全模块化的模式基础上的,这为你的网店带来无限的可扩展性和灵活性。
这章我们介绍如何开发magento 主题。
区块(Blocks)和布局(Layout)在Magento之前你很可能已经使用过其他电子商务程序。
因此在开始之前,我们希望你抛弃所有按以往经验得来的期待,这并不意味者你要学习一个全新的语言,也不意味着你要改变所有的工作流程,只是你要学习一些新的技巧来开发Magento的主题。
掌握这些工具并且始终注意关注他们,你会喜欢上这种结构的。
下面我们开始介绍:1.结构区块(Structural Blocks)2.内容区块(Content Blocks)3.布局(Layout)建立心理导图为了使你更清楚的理解区块和布局的含义,这里提供一些心理导图工你参考:1.想象一个长方区块的轮廓(就想图例1 Diagram 1).2.现在想象整个区块的轮廓被填满3.现在想象两个区块,他们的轮廓叠加在一起4.现在想象三个区块,轮廓叠加在一起5.然后想象四个。
6.然后我们来看一下Magento网店的首页缩略图:7.看看上面缩略图可以被分割成几部分,以两种方式分割。
Diagram 4你刚建立的思维导图给你在概念和真实区块之间一个平行的比较,我知道你也许完全糊涂了,让我来解释一下:从概念角度看,图2中的框架是结构区块。
他们是内容区块的父区块,他们帮助去定内容区块在一个网店页面中显示的区域位置(如在图3中)。
这些结构块的存在形式为页眉区,左栏地区,右栏...等等有助于创建网店的视觉结构。
;l另一方面,内容区块概念上就是装点结构区块的独立颜色的区块。
在一个网店内容里,他们才是真正的内容。
内容区块代表着页面内的每一个功能特性(比如分类列表,标注和产品标签等等),并且使用模板文件生成(x)HTML插入到父结构区块里。
制作Magento主题
Magento SEO 设置1. 基本的技术优化1.1. 普通设置Magento 是搜索引擎最友好的商用平台之一,但有几点需要关注以优化你的Magento SEO. 第一步是使用最新的版本激活 Server URL rewrites. 你可以找到这个选项在系统按钮下: System => Configuration => Web => Search Engines Optimization. 激活后,在这个页面上,另一个不错的选择是设置“Url Options ”下的“Add store Code to Urls”,在大多数情况下,把这个开关设为“No”更好。
1.1.1. WWW vs non-WWW在“Unsecure”和“Secure”的下拉菜单里你可以找到 Base URL, 在那里你可以设置你更喜欢的域名。
你可以选择WWW的URL或者没有WWW的URL。
改变这些设置你不会建立一个重定向从www到non-www或者从non-www到www,而只是你设置的你喜欢的那一个。
所以通过 .htaccess with mod_rewrite建立一个301重定向是一个好主意。
除此之外,解决了 WWW vs non-WWW 的问题,这个重定向可以预防Magento被加入SID问题到你的URLs,象?SID=b9c95150f7f70d6e77ad070259afa15d. 确保 Base URL 和重定向是一样的。
编辑 .htaccess 文件时,你可以加入下面的代码到根目录下的重定向index.php 中。
大约 119 行:RewriteBase / RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/ RewriteRule ^index\.php$ / [R=301,L]或者,你安装Magento的时候不是在根目录下而是在某个子目录下/magento/:RewriteBase /magento/ RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\/magento/index\.php\ HTTP/RewriteRule ^index\.php$ /magento/ [R=301,L] 1.2. 页眉设置安装Magento时默认的标题是“Magento Commerce”。
Magento技术指南
技术指南总览本文档列出了指导Magento 2开发人员团队的基本编码和应用程序设计原则。
Magento核心开发人员在代码审查期间将本文档用作参考;有些规则在Magento静态测试中具有相应的代码检查。
这些准则来自多年的辛勤工作,经验和讨论。
我们坚信,新的技术倡议应遵循这些建议,并且应改进现有的规范以符合这些建议。
文本约定使用RFC2119来解释关键字,如:•MUST and MUST NOT•REQUIRED•SHALL and SHALL NOT•SHOULD and SHOULD NOT•RECOMMENDED•MAY•OPTIONAL1.基本编程原则1.1。
函数参数不应该被修改。
1.2。
显式返回类型必须在函数上声明。
1.3。
应该使用标量参数的类型提示。
1.3.1。
所有新的PHP文件都必须以declare(strict_types=1)开头启用严格类型模式。
所有更新的PHP文件都应该启用严格类型模式。
PHP接口可能有这样的声明。
2.类的设计2.1。
对象分解必须遵循SOLID原则。
2.2。
对象实例化2.2.1。
对象必须在实例化后准备好使用。
不允许使用其他公共初始化方法。
2.2.2。
Factories应该用于对象实例化而不是new关键字。
为了测试或可扩展性,对象应该是可替换的。
例外:DTO。
DTO中没有任何行为,因此没有理由可替换。
测试可以为存根创建真正的DTO。
数据接口,异常和Zend_Db_Expr是DTO 的示例。
2.3。
类构造函数只能具有依赖项分配操作和/或参数验证操作。
不允许其他操作。
2.3.1。
当参数验证失败时,构造方法应该抛出异常。
2.3.2。
不得在构造函数中触发事件。
2.4。
所有依赖项必须由client对象所需的最通用类型请求。
2.5。
绝对不能在构造函数中明确请求代理和拦截器。
2.6。
不应使用继承。
组合应该用于代码重用。
2.7。
所有非公共属性和方法都应该是私有的。
2.8。
抽象类不得标记为public @api。
Magento(麦进斗)中文开发手册开篇
Magento(麦进斗)是这个星球上最强大的购物车网店平台。
当然,你应该已经对此毫无疑问了。
不过,你可能还不知道,Magento(麦进斗)同样是一个面向对象的PHP框架。
你可以配合Magento(麦进斗)购物车程序强大的功能,开发动态WEB应用程序。
采用高端Magento(麦进斗)电子商务系统可订制对接企业ERP、CRM如:SAP NAV Salesforce Odoo 用友金蝶等,Magento(麦进斗)可对接淘宝、京东、Amazon、eBay、Wish、速卖通等电子商务销售平台,Magento(麦进斗)还可订制对接开发微信商城、移动电商APP。
相较于老的ecshop构架,Magento(麦进斗)作为全球第一电商平台可提供完整核心源代码的电商解决方案,适合品牌企业、跨国企业、跨境电商企业。
麦进斗科技提供上诉完整电商解决方案,欢迎咨询联系麦进斗这是Magento中文开发手册的开篇,我们会在整个手册中介绍绝大部分Magento的开发框架特性。
不要想在这片文章中立刻掌握所有的特性。
这仅仅是个开始,但是足够让你在同行中鹤立鸡群了。
在这片文章中,你将了解到:Magento模块(Magento Modules)代码组织形式配置型MVC架构Magento控制器(Magento Controllers)基于URI的模型实例化(Context-based URI Model Loading)Magento模型(Magento Models)Magento助手(Magento Helpers)Magento布局(Magento Layouts)事件监听(Observers)Magento类重写(Class Overrides)总结开始之前,你可以试着看下Magento MVC模式的一个图形化直观体现。
Magento_MVC.pdfMagento模块中的代码组织形式Magento通过将代码放入独立的模块进行组织。
在一个典型的PHP MVC应用中,所有的控制器会被放在一个文件夹中,所有的模型会被放在另外一个文件夹里,等等。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Magento Version1.4.1.0 Magento项目UI设计规范
Prepare by Eric Huang
Silk Software
08/29/2010
Version History
Table of Contents
1MAGENTO UI设计遵循原则 (3)
1.1T HEME设计原则 (3)
1.1.1Design设计原则 (3)
1.1.2Skin设计原则 (3)
2SVN 使用遵循原则 (4)
2.1SVN目录结构说明 (4)
2.2SVN开发人员文件包存放原则 (5)
2.3SVN设计人员文件包存放原则 (5)
2.4整合设计人员文件包遵循原则 (5)
3其它 (6)
1Magento UI设计遵循原则
1.1Theme设计原则
1.1.1Design设计原则
1.1.1.1Template设计原则
a.禁止修改app\design\frontend\base\default\template中的任何文件。
b.警慎修改 <%theme%>\template\page\html文件夹下的 .phtml文件,避免覆盖或
错改UI设计人员的修改。
c.自定义的Theme统一命名原则,主网站的Theme用网站的名称做为Theme名
称,如果有子网店,则用子网店的名称做为子网店的Theme名称.
d.自定义的Theme统一存放到app\design\frontend\default\<%Theme Name%>
e.第三方插件的.phtml统一存放到app\design\frontend\default\default\template
中; .xml文件统一存放到app\design\frontend\default\default\layout中。
f.需要修改、扩展、重写与业务紧密相关部分的.phtml模板文件,如果原有
Theme中对应部分,则可以在原有Theme中修改;如果原有Theme中没有对应
的模板,则从app\design\frontend\base\default\template中复制对应的模板
中,然后才进行修改。
1.1.1.2Layout设计原则
a.禁止修改app\design\frontend\base\default\layout中任何文件
b.需要修改模块的.xml时,首先将对应的.xml文件拷贝到网站对应的Theme
中,然后做修改。
c.UI设计人员修改layout中的 .xml文件时,需要与项目对应的开发人员协商
1.1.2Skin设计原则
1.1.
2.1CSS设计原则
a.自定义.css文件和css的命名必需以网站或网店名称为前缀。
比如:“ProjectName-name.css”或“StoreName-name.css”或“ProjectName-
需要重写原css的名称”;CSS的层次结构必需要与Theme中原css的层次结构
一致。
b.自定义的css,必需为每一个页面定义一个单独的.css文件,如:asweett-
home.css、asweett-contacts.css、asweett-about.css等。
c.单独定义一个css文件,用于存放项目的所有页面公共的css文件,例如asweett-
main.css或asweett-all.css。
d.自定义的css文件统一放到skin\frontend\default\<%Theme Name%>\css中。
1.1.
2.2Images设计原则
a.Images应统一放到skin\frontend\default\<%Theme Name%>\images中
b.客户提供的每一个Mockup页面的切图应在images中单独建一个文件夹存放,比
如images\home、images\aboutus、images\contacts等等。
c.Home Banners的图片,如果客户需要在magento的后台维护图片,则统一存放到
<%root%>\media\<%Site Name%>\homebanners或<%root%>\media\<%Store Name%>\homebanners中;如果不需要在magento的后台管理中维护图片,则统一存放到skin\frontend\default\<%Theme Name%>\images\media中。
d.Images切图时应切成JPG格式,尽量少用PNG格式的图片
e.Images切图后的所有的图片都应做优化处理,将图片大小控制在1M以内
2SVN 使用遵循原则
2.1SVN目录结构说明
2.2SVN开发人员文件包存放原则
a.开发人员的修改过的程序文件统一存放到trunk\Code\<%Project Name%>中,按
magento的原有目录层次结构组织内容。
b.开发环境的最新SQL脚本统一存放到trunk\SqlScript\中,需要指明当前数据库的
版本号
c.填写《功能开发文件修改清单》的清单文件统一存放到trunk\Code中
注:新增插件应放入功能文件包;提交的SQL脚本需要替换其 BaseURL,使其指向公司测试机。
2.3SVN设计人员文件包存放原则
a.UI设计人员的文件包统一存放到trunk\UI\<%Project Name%>中
b.填写《UI设计文件修改清单》的清单文件统一存放到trunk\UI中
c.文件包中只能包括以下类型文件: css, jpg, png, swf, flv, phtml, xml. 其他文件视
为非法。
2.4整合设计人员文件包遵循原则
a.从SVN同步UI设计文件包后,整合代码时,禁止开发人员修改UI设计包中的
css文件
b.开发人员只能将整合UI设计包的文件Check In到自己的SVN目录下,并填写
《功能开发文件修改清单》
c.开发人员整合UI设计包并已经Check In到SVN中,发现css样式不对,应通
知相关的UI设计人员,而不能自己直接修改css文件
d.UI设计人员收到开发人员的css样式修改通知后,应从trunk\Code中同步已整
合前一版的UI的文件包到自己的UI设计环境中,用trunk\Code\SqlScript的脚
本更新UI设计环境的DB,然后进行css调整。
调整完以后,再将新一版的UI
文件包放到trunk\UI中,并填写《UI设计文件修改清单》
3其它。