Magento前端开发手册

入门

本文档提供了为Magento应用程序创建和安装定制商店前台主题的说明。它描述了Magento的内容呈现过程,并解释了系统的视图层,以有效地构建一个主题。这份中文文档还包括了日常的前端开发人员的工作内容。 开发自定义模块的视图部分,并定制Magento管理面板设计,超出了本指南的范围。 前端开发人员可以使用此手册创建定制主题,为特定客户定制Magento商店前台。

您可以将这些级别的定制应用到您的站点,在那里需要不同的开发技能:

  • 您可以使用层叠样式表(CSS)对您的站点进行相对简单的更改,以更改颜色和各种接口组件的外观,替换图像,以及其他相对美观的更改。

    没有对页面&mdash进行结构更改;您可以接受由加载到站点的模块所提供的默认站点的结构.

    对于一个站点来说,这可能是一个很好的开始,因为它需要最少的时间和知识.

  • 在您的站点上更改CSS和图像的一个小步骤是更改现有模块生成的HTML。.

    这需要基本的PHP技能来调整PHTML模板文件。

    虽然涉及到PHP代码,但这通常是将PHP代码的小片段从现有的模板文件复制到新的模板文件,并使用不同的结构化HTML.

    如果已经生成的HTML没有足够的CSS类名或HTML元素来实现您想要实现的表示更改,那么这一点非常有用.

  • 下一层次的复杂性是通过在页面上的位置或完全不同的页面之间移动功能来对站点进行结构更改.

    这是使用Magento布局引擎实现的。不需要PHP代码来进行布局更改,但是布局引擎是中等复杂的。

  • 最后,您可以开发新的模块,以向您的站点添加新的自定义功能,或者扩展现有的Magento或第三方模块提供的功能.

    这个手册中没有提到第三层定制.

    有关如何开发新模块的详细信息,请参阅开发人员指南。

    这需要PHP编程知识,除了对前面所有领域的知识之外.

关于可视化编辑器(VDE)的状态有一些询问,它目前是Magento开发代码库的一部分。VDE允许分配和取消主题、编辑主题CSS和JS文件、更改页面布局、管理块及其在WYSIWYG模式中的页面上的位置。我们想澄清的是,为了达到更高的优先级目标,VDE将不会成为最初的Magento发行版的一部分。VDE的未来计划将在稍后的时间点进行沟通。欢迎您继续在VDE上提供输入,但请注意,我们将不会在短期内积极审查或激活这些评论。

前端开发的先决条件

要实现本手册中讨论的内容,您需要一个正在运行的Magento和安装在您的设备上的以下浏览器版本:

商店前台与后台

  • Internet Explorer 11 or later, Microsoft Edge, latest–1
  • Firefox latest, latest–1 (any operating system)
  • Chrome latest, latest–1 (any operating system)
  • Safari latest, latest–1 (Mac OS)
  • Safari Mobile for iPad 2, iPad Mini, iPad with Retina Display (iOS 7 or later), for desktop storefront
  • Safari Mobile for iPhone 4 or later; iOS 7 or later, for mobile storefront
  • Chrome for mobile latest–1 (Android 4 or later) for mobile storefront

where latest–1 means one major version earlier than the latest released version.

要使用这个手册,你必须熟悉:

  • CSS and CSS 3
  • HTML and HTML 5
  • XML
  • JavaScript
  • 响应式web设计(RWD)

相关主题: