CN104573131A - 生成商品详情页面数据的方法和终端装置 - Google Patents

Abstract

本发明提供一种生成商品详情页面数据的方法和装置，有助于提高商品详情页面的装修效率，特别是提高用于多个电子商务运营商的网站的商品详情页面的装修效率。该方法包括：终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，所述商品详情页面模板中包含所述商品详情页面的页面样式；终端装置根据接收的页面宽度参数，根据所述商品详情页面初稿生成宽度为该页面宽度参数的、外观与所述商品详情页面初稿相一致的图像。

Description

生成商品详情页面数据的方法和终端装置

技术领域

本发明涉及计算机技术领域，特别地涉及一种生成商品详情页面数据的方法和终端装置。

背景技术

现有电子商务系统中，展示商品的页面一般包括电子商务平台的一般信息例如电子商务平台标题、用户登录入口、商品分类信息、广告等，以及各商品的详情页。相比于各种商品的不同详情页来说，上述一般信息通常更改较少，具有相对固定的主体样式；而商品详情页由于各种商品的特性区别，展示方式各种各样，并且展示效果对于商品的销售也至关重要。目前对于商品详情页的装修一般采用富文本编辑器来实现。富文本编辑器是一种比较方便的页面编辑工具，是一种可视化编辑器，可以手动编辑或粘贴HTML代码，也可以使用贴图的方式进行，由富文本编辑器生成相应的HTML代码。

但是在商品详情页的装修方面，采用富文本编辑器，发明人发现其存在以下一些问题：

按照富文本编辑器操作方式，没有一定HTML代码功底的用户无法制作复杂页面，一般以贴图方式制作详情页。富文本编辑器制作页面需要用户有较高的美术功底，需要自己设计页面的展示效果。限于用户即电子商务的商家的美工能力和对于HTML代码的掌据程度，在现实中采用富文本编辑器的许多用户难以得到装修效果较佳的商品详情页。

富文本编辑器这种可视化编辑器由于是自动生成HTML代码，因此该HTML代码不可控，生成的HTML代码中的页面样式代码，可能与现有的商品详情页面主体样式代码冲突，导致在富文本编辑器中看到的装修效果和在商品详情页面实际展示的效果有较大差异，商品详情页面装修人员往往需要重复观察商品详情页面效果、比较差异、调整富文本编辑器中的设计才能达到比较满意的页面装修效果，这就影响了商品详情页的装修效率。

另外，在现实中存在多个电子商务运营商，各个电子商务运营商的网站对于商品详情页面的宽度的设定不尽相同，这就使商品详情页面装修人员要针对各种不同的页面宽度进行设计，对商品详情页面的装修效率也造成影响。

发明内容

有鉴于此，本发明提供一种生成商品详情页面数据的方法和装置，有助于提高商品详情页面的装修效率，特别是提高用于多个电子商务运营商的网站的商品详情页面的装修效率。

为实现上述目的，根据本发明的一个方面，提供了一种生成商品详情页面数据的方法。

本发明的生成商品详情页面数据的方法包括：步骤A：终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，所述商品详情页面模板中包含所述商品详情页面的页面样式；步骤B：终端装置根据接收的页面宽度参数，根据所述商品详情页面初稿生成宽度为该页面宽度参数的、外观与所述商品详情页面初稿相一致的图像。

可选地，所述商品详情页面模板中包含绑定特殊事件的伪属性的代码，该伪属性绑定模板接受的页面修改操作，用于接收文本或图像；所述步骤A包括：接受所述伪属性所绑定的页面修改操作，将接收的文本和/或图像添加到所述商品详情页面模板中，并且样式属性为所述伪属性。

可选地，所述步骤B之前，还包括：对接收的图像进行缩放和/或裁剪，使图像尺寸与所述商品详情页面模板中设定的图像尺寸相一致。

可选地，所述步骤B包括：调用浏览器的画布功能，该画布功能用于按所述商品详情页面初稿的外观绘制得到图像；将所述画布功能绘制得到的图像的宽度调整为所述接收的页面宽度参数。

可选地，调用浏览器的画布功能的步骤包括：调用文档对象模型解析器，该文档对象模型解析器用于对所述商品详情页面初稿进行解析得到页面基础元素的集合；将所述页面基础元素的集合发送给浏览器的画布功能模块。

根据本发明的另一方面，提供了一种生成商品详情页面数据的装置。

本发明的生成商品详情页面数据的装置包括：模板填充模块，用于将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，所述商品详情页面模板中包含所述商品详情页面的页面样式；作图模块，用于根据接收的页面宽度参数，根据所述商品详情页面初稿生成宽度为该页面宽度参数的、外观与所述商品详情页面初稿相一致的图像。

可选地，所述商品详情页面模板中包含绑定特殊事件的伪属性的代码，该伪属性绑定模板接受的页面修改操作，用于接收文本或图像；所述模板填充模块还用于接受所述伪属性所绑定的页面修改操作，将接收的文本和/或图像添加到所述商品详情页面模板中，并且样式属性为所述伪属性。

可选地，还包括图像尺寸调整模块，用于对接收的图像进行缩放和/或裁剪，使图像尺寸与所述商品详情页面模板中设定的图像尺寸相一致。

可选地，所述作图模块还用于：调用浏览器的画布功能，该画布功能用于按所述商品详情页面初稿的外观绘制得到图像；将所述画布功能绘制得到的图像的宽度调整为所述接收的页面宽度参数。

可选地，所述作图模块还用于：调用文档对象模型解析器，该文档对象模型解析器用于对所述商品详情页面初稿进行解析得到页面基础元素的集合；将所述页面基础元素的集合发送给浏览器的画布功能模块。

根据本发明的技术方案，终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，再根据接收的页面宽度参数，根据商品详情页面初稿生成宽度为该页面宽度参数的、外观与商品详情页面初稿相一致的图像，这样一方面能够快速生成商品详情页面数据，另一方面由于生成的图像的宽度为电子商务运营方指定的商品详情页面的宽度，所以适用于各种电子商务运营方的网站，以上这两方面都有助于提高商品详情页的装修效率。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的生成商品详情页面数据的方法的基本步骤的示意图；

图2是根据本发明实施例的生成商品详情页面数据的装置的主要模块的示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在本发明实施例中，采用页面模板与页面数据相分离的方式，由设计人员设计商品详情页面的模板，模板中包含商品详情页面的页面样式；然后由用户提供商品详情页面的数据，主要是文字和/或图像；再将这些数据填充到模板中，得到商品详情页面初稿；最后根据该商品详情页面初稿生成与该初稿外观相一致的图像，并且图像宽度与电子商务运营方所指定的商品详情页面的宽度相一致，这样就可以方便地将该图像添加到商品详情页面中。本实施例的上述方法主要由终端装置来完成，其主要步骤如图1所示，图1是根据本发明实施例的生成商品详情页面数据的方法的基本步骤的示意图。

步骤S11：终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿。

步骤S12：终端装置接收页面宽度参数。该页面宽度参数由用户提供。用户根据不同的电子商务平台对于页面宽度的规定，输入页面宽度数据，由终端装置接收。

步骤S13：终端装置根据接收的页面宽度参数，根据商品详情页面初稿生成宽度为该页面宽度参数的、外观与商品详情页面初稿相一致的图像。以下对本发明实施例的技术方案作进一步详细说明。

上述终端装置作为软件运行在用户使用的计算机上，该终端装置从互联网下载商品详情页面模板，并且接收用户提供的数据。为了便于用户填充数据，本实施例中的商品详情页面模板采用基于伪属性的模板结构，即其中包含绑定特殊事件的伪属性的代码，该伪属性的代码主要用于接收用户提供的文本或图像。

模板代码结构与标准HTML(超文本标记语言)结构相同，在页面特殊区域添加伪属性标识。系统通过读取伪属性的内容，判断该区域需要进行特殊处理。参考设计如下：

上述参考设计中，伪属性有“edit-text-area”和“edit-img-area”。用户在编辑商品详情页时候，终端装置会根据该伪属性分别提供允许用户编辑文本和图像的功能，从而对商品详情页面模板作进一步编辑。该终端装置实现可见即可得的编辑方式，当用户进行编辑时，终端装置根据用户操作的鼠标所选中的位置以及该位置的伪属性标签，提供特殊功能。如针对伪属性“edit-text-area”，系统通过JavaScript代码绑定特殊事件，示例如下(采用Jquery基础插件)：

$(‘div[edit-text-area]’).click(function(){

系统事件代码。

})；

在系统事件代码中，提供对于该伪属性的特殊功能。如“edit-text-area”伪属性就加入了商家可以拥有该属性的div的内容可以被用户及时调整的功能。如以下代码片段：

<div class＝“样式属性”(伪属性)edit-text-area＝”text”>显示文字</div>

采用该伪属性后，用户编辑详情页时，当用户点击该DIV时，系统提供替换功能，用户可以方便地替换“显示文字”的内容，通过设置div的style属性，快速设置该div的背景色，文字颜色，字体，文字大小，是否加粗显示等属性。例如调整后结果：

<div class＝“样式属性”(伪属性)edit-text-area＝“text”style＝“font-size:16”>数码电视</div>

对应上述实例中的伪属性“edit-img-area”，该终端装置也提供用户替换图片链接，进行裁剪图片等功能。在用户替换“edit-img-area”属性标签下的图片链接时，由于用户提供的图片与模板设计师设计的模板中的图片尺寸可能不一致，因此终端装置提供图片裁剪工具来处理替换过程中图片不兼容的问题。本实施例中采用图片缩放的处理方式，终端装置在收到用户提供的图片后，将该图片进行缩放和裁剪处理，保证用户的图片能够与设计师在模板中设计的图片区相匹配。

由于HTML所显示的图片都为矩形和正方形，系统压缩放大时，会根据最优化压缩匹配的方法进行匹配，达到压缩后的图片的一条边与系统向匹配，用户可以调整另外一条边并进行图片裁剪。

例如：在计算机上显示的图片分辨率为A(长)，B(宽)；在手机上需要显示的图片分辨率为C(长)，D(宽)。可采用以下压缩算法：P1＝A/C，P2＝B/D；若P1≤P2，则压缩后的图片分辨率为：C(长)，B×(1/P1)(宽)；若P1>P2，手机压缩后的图片分辨率为：C×(1/P2)(长)，B(宽)。在计算机上显示的图片经压缩后，用户可以进一步调整图片的长或宽，达到最优显示的目的，可用于手机上的显示。

在将用户提供的文字、图像填充到模板之后，得到的即为商品详情页面初稿，接下来需根据该初稿得到图像，该图像具有与该初稿一致的外观，本实施例中应用现有的浏览器绘图功能来得到该图像。基于HTML5新规则，页面系统支持画布(canvas)功能，这样能够“照着”商品详情页面初稿绘制出一幅外观相同的图像。为达到该目的，本实施例中，调用文档对象模型解析器(DOM)，将商品详情页面初稿解析为页面基础元素的集合，例如：文本框长宽、文本框位置、文本框线条颜色、文本框底图颜色等。终端装置调用浏览器的画布功能，将页面基础元素的集合提供给该画布功能，并将用户提供的页面宽度参数提供给该画布功能，由该画布功能进行绘图处理，最终生成图像。用户提供的页面宽度参数即为电子商务运营方指定的商品详情页面的宽度。根据商品详情页面中的模块，按照一个模块所对应的页面来绘制出一幅图像，因此通常绘制出多幅图像，进行组合之后具有与商品详情页面初稿相一致的外观。

由于采用浏览器直接绘图的模式来生成商品详情页，所以保证生成的图像一定是用户在浏览器中看到的内容，避免了现有技术中的经由后台Java代码生成图片而可能发生的失真问题。生成图片的操作步骤由客户端完成，避免了服务端承载过多的压力。

图2是根据本发明实施例的生成商品详情页面数据的装置的主要模块的示意图。如图2所示，生成商品详情页面数据的装置20即为上文所述的终端装置，其主要包括模板填充模块21和作图模块22。模板填充模块21用于将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，商品详情页面模板中包含商品详情页面的页面样式；还可用于接受伪属性所绑定的页面修改操作，将接收的文本和/或图像添加到商品详情页面模板中，并且样式属性为伪属性。

作图模块22用于根据接收的页面宽度参数，根据商品详情页面初稿生成宽度为该页面宽度参数的、外观与商品详情页面初稿相一致的图像；还可用于：调用浏览器的画布功能，该画布功能用于按商品详情页面初稿的外观绘制得到图像；将画布功能绘制得到的图像的宽度调整为接收的页面宽度参数；在此基础上作图模块22还可进一步用于：调用文档对象模型解析器，该文档对象模型解析器用于对商品详情页面初稿进行解析得到页面基础元素的集合；将页面基础元素的集合发送给浏览器的画布功能模块。

生成商品详情页面数据的装置20还可包括图像尺寸调整模块(图中未示出)，用于对接收的图像进行缩放和/或裁剪，使图像尺寸与商品详情页面模板中设定的图像尺寸相一致。

根据本发明实施例的技术方案，终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，再根据接收的页面宽度参数，根据商品详情页面初稿生成宽度为该页面宽度参数的、外观与商品详情页面初稿相一致的图像，这样一方面能够快速生成商品详情页面数据，另一方面由于生成的图像的宽度为电子商务运营方指定的商品详情页面的宽度，所以适用于各种电子商务运营方的网站，以上这两方面都有助于提高商品详情页的装修效率。

以上结合具体实施例描述了本发明的基本原理，在本发明的装置和方法中，显然，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本发明的等效方案。并且，执行上述系列处理的步骤可以自然地按照说明的顺序按时间顺序执行，但是并不需要一定按照时间顺序执行。某些步骤可以并行或彼此独立地执行。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种生成商品详情页面数据的方法，其特征在于，包括：

步骤A：终端装置将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，所述商品详情页面模板中包含所述商品详情页面的页面样式；

步骤B：终端装置根据接收的页面宽度参数，根据所述商品详情页面初稿生成宽度为该页面宽度参数的、外观与所述商品详情页面初稿相一致的图像。

2.根据权利要求1所述的方法，其特征在于，

所述商品详情页面模板中包含绑定特殊事件的伪属性的代码，该伪属性绑定模板接受的页面修改操作，用于接收文本或图像；

所述步骤A包括：接受所述伪属性所绑定的页面修改操作，将接收的文本和/或图像添加到所述商品详情页面模板中。

3.根据权利要求2所述的方法，其特征在于，所述步骤B之前，还包括：对接收的图像进行缩放和/或裁剪，使图像尺寸与所述商品详情页面模板中设定的图像尺寸相一致。

4.根据权利要求1所述的方法，其特征在于，所述步骤B包括：

调用浏览器的画布功能，该画布功能用于按所述商品详情页面初稿的外观绘制得到图像；

将所述画布功能绘制得到的图像的宽度调整为所述接收的页面宽度参数。

5.根据权利要求4所述的方法，其特征在于，调用浏览器的画布功能的步骤包括：

调用文档对象模型解析器，该文档对象模型解析器用于对所述商品详情页面初稿进行解析得到页面基础元素的集合；

将所述页面基础元素的集合发送给浏览器的画布功能模块。

6.一种生成商品详情页面数据的装置，其特征在于，包括：

模板填充模块，用于将商品详情数据填充到预设的商品详情页面模板中得到商品详情页面初稿，所述商品详情页面模板中包含所述商品详情页面的页面样式；

作图模块，用于根据接收的页面宽度参数，根据所述商品详情页面初稿生成宽度为该页面宽度参数的、外观与所述商品详情页面初稿相一致的图像。

7.根据权利要求6所述的装置，其特征在于，

所述商品详情页面模板中包含绑定特殊事件的伪属性的代码，该伪属性绑定模板接受的页面修改操作，用于接收文本或图像；

所述模板填充模块还用于接受所述伪属性所绑定的页面修改操作，将接收的文本和/或图像添加到所述商品详情页面模板中。

8.根据权利要求7所述的装置，其特征在于，还包括图像尺寸调整模块，用于对接收的图像进行缩放和/或裁剪，使图像尺寸与所述商品详情页面模板中设定的图像尺寸相一致。

9.根据权利要求6所述的装置，其特征在于，所述作图模块还用于：

调用浏览器的画布功能，该画布功能用于按所述商品详情页面初稿的外观绘制得到图像；

将所述画布功能绘制得到的图像的宽度调整为所述接收的页面宽度参数。

10.根据权利要求9所述的装置，其特征在于，所述作图模块还用于：

调用文档对象模型解析器，该文档对象模型解析器用于对所述商品详情页面初稿进行解析得到页面基础元素的集合；

将所述页面基础元素的集合发送给浏览器的画布功能模块。3 -->