注意：以下文档只适用于TOP接口，请谨慎使用！
注意：以下文档只适用于TOP接口，请谨慎使用！
系统模块由淘宝官方店铺平台开发和提供使用，设计师（开发人员）无法控制其HTML结构以及交互行为。为了确保SDK模板设计风格与系统模块统一，允许模板覆盖默认的系统模块样式。因此，以下文档帮助设计师（开发人员）了解系统模块HTML结构，方便覆盖默认样式。
由于淘宝官方店铺平台可能增减系统模块的数量以及HTML结构，因此，SDK开发工具提供了实时更新的帮助文档。
同时，每种站点中支持的系统模块可能存在区别，如下图：
接下来，以收费版旺铺为例：
红色区域部分为当前文档所在的具体位置，下面可以自由切换目前SDK所支持的站点类型（站点个数可能实时更新，如果有增减的话）。
绿色区域部分是表格的栏位，其中，CSS类选择器名称主要用于指示当前模块所在的CSS类选择器，例如将模块的字体颜色修改成红色，CSS代码如下：
.tshop-pbsm-shop-item-recommend {
color:red;
}
点击”点击预览“链接后，可以参考当前系统模块的HTML结构，其内容是实时更新的，如果存在变化的话。
其他站点和模块操作以上述方法类推。
由于以下文档为静态文档，更新不定期，仅供参考：
想查询系统模块的完整DOM结构和系统模块默认CSS请点击》系统模块白名单
点击参考：TAE PHP白名单
点击参考：JS API
点击参考：TAE SDK模版开放接口
本节介绍模块描述文件，即module.xml的结构（XML Schema），方便开发人员手动编辑和问题排查。
如果读者不熟悉XML Schema，为了更好的阅读效果，请首先学习XML Schema学习教程
如果您的SDK安装（checkout）在Windows 的D盘根目录或者子目录下，当SDK启动后，所需的XML Schema文件会覆盖至D:\.sdk-schema目录下。以此类推，如果SDK在C盘的话，.sdk-schema目录也会在C盘根目录。
打开module.xsd和common.xsd文件，参考文件中的xs:documentation部分，因此不再重复。
首先看一下module.xml中的内容，如下所示，
<?xml version="1.0" encoding="GBK"?>
<module>
<id>tshop-um-localModule</id>
<name>设计师模块</name>
<file>tshop-um-localModule.php</file>
<thumbnail>../../assets/images/default-thumbnail.png</thumbnail>
<description xsi:type="xs:string" xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">设计师模块</description>
<requiredCache>true</requiredCache>
<supportedWidth>190,550,750,950</supportedWidth>
<themes default="default">
<theme name="default">
<css>assets/stylesheets/default.css</css>
</theme>
</themes>
</module>
都是之前创建模块时设置的内容，可以添加<parameters>标签，然后在该标签下使用<parameter>标签，模块的渲染的基本流程为读取参数，调用底层服务，结合php文件输出html，所以参数是模块和卖家交互的重要部分。
设计师可以修改参数来调整模块信息，也可以通过手动修改module.xml文件。请注意在手动修改时，如果设计师任意地修改它，即没有根据模块Schema文件（module.xsd）的规则的话，在保存编辑或者装配该模块时，会报XML文件格式错误。即module.xml文件中的节点都在module.xsd中注册过，且具体的节点类型在xsd文件中都有定义，xsd会做一个校验工作。 下面详细描述模块配置文件每个参数的含义：
此外，设计师可以自己添加参数信息的，如下所示：
<parameters>
<param name="sales_link" label="链接1" ptype="text" formType="text">
http://aaa
</param>
</parameters>
name: 参数名称用于在模板中通过$_MODULE[name]来引用
label: 用于在编辑模块的时候显示，方面卖家后台设置
description:用于参数描述，此参数用于以后扩展
ptype:
ptype是参数类型的配置，此参数的目的主要是用于对卖家后台录入参数的校验，目前系统支持的ptype参数类型如下：
formType: formType用来配置参数html类型，类型与html类型对应，用于在编辑模块的时候展示界面的DOM结构。目前系统主要支持如下几个类型：
宝贝选择器和类目选择器使用示例如下所示：
<group title="选择器组">
<section folded="false" title="选择器部分">
<param ptype="item" name="item_1" label="宝贝选择器" formType="itemForm" description="描述信息就是要太长！">
6,3,2</param>
<param ptype="category" name="cate_1" label="分类选择器" formType="categoryForm"
description="描述信息就是要太长！"></param>
</section>
</group>
相应的模块编辑页面展示效果如下，
详细介绍一下其他表单的使用，例如在module.xml中添加如下参数内容，在这里 group的功能是：提供分组元素，将参数根据不同的功能，分为不同的逻辑组。便于设计师维护和用户理解和使用。
<group title="书架">
<section folded="true" title="社科类">
<param ptype="text" name="name" label="书籍" formType="text" description="提示：请输入书籍名称"></param>
<param ptype="text" name="type" label="书籍类型" formType="select" description="请选择书籍类型">
<option value="1">长生不老型</option>
<option selected="selected" value="2">快速致富型</option>
<option value="3">成功励志型</option></param>
<param ptype="text" name="label" label="书籍级别" formType="range" description="请选择书籍级别">
<option value="normal">主流</option>
<option value="porn">黄色</option>
<option selected="selected" value="violent">暴力</option>
<option value="reactionary">反动</option></param>
<param ptype="text" name="booklabel" label="书籍级别" formType="checkbox" description="请选择书籍级别">
<option value="normal">主流</option>
<option selected="selected" value="porn">黄色</option>
<option selected="selected" value="violent">暴力</option>
<option selected="selected" value="reactionary">反动</option></param>
<param ptype="text" name="desc" label="描述内容" formType="textarea" description="书籍描述信息"></param>
</section>
</group>
呈现的结果如下所示：
然后，可以设定一些内容（如下图所示），然后点击保存，
这时module.xml中的内容就会做出相应的改变，会保存刚刚设定的内容，如下图所示绿框中圈定的内容，
