CN113485703B - 一种在线交互式商品详情页编辑方法和系统 - Google Patents
一种在线交互式商品详情页编辑方法和系统 Download PDFInfo
- Publication number
- CN113485703B CN113485703B CN202110685386.4A CN202110685386A CN113485703B CN 113485703 B CN113485703 B CN 113485703B CN 202110685386 A CN202110685386 A CN 202110685386A CN 113485703 B CN113485703 B CN 113485703B
- Authority
- CN
- China
- Prior art keywords
- commodity
- image
- text
- detail page
- template
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000002452 interceptive effect Effects 0.000 title claims abstract description 46
- 238000012545 processing Methods 0.000 claims abstract description 43
- 238000004806 packaging method and process Methods 0.000 claims abstract description 9
- 238000005516 engineering process Methods 0.000 claims abstract description 8
- 238000013461 design Methods 0.000 claims description 37
- 238000004422 calculation algorithm Methods 0.000 claims description 21
- 230000006870 function Effects 0.000 claims description 21
- 238000003860 storage Methods 0.000 claims description 8
- 238000004458 analytical method Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 claims description 6
- 125000004122 cyclic group Chemical group 0.000 claims description 4
- TVZRAEYQIKYCPH-UHFFFAOYSA-N 3-(trimethylsilyl)propane-1-sulfonic acid Chemical compound C[Si](C)(C)CCCS(O)(=O)=O TVZRAEYQIKYCPH-UHFFFAOYSA-N 0.000 claims description 3
- 238000005034 decoration Methods 0.000 abstract description 3
- 239000000463 material Substances 0.000 description 9
- 230000008569 process Effects 0.000 description 9
- 238000004590 computer program Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 238000005215 recombination Methods 0.000 description 4
- 230000006798 recombination Effects 0.000 description 4
- 239000003086 colorant Substances 0.000 description 3
- 230000004075 alteration Effects 0.000 description 2
- 238000005520 cutting process Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 235000014443 Pyrus communis Nutrition 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000010979 ruby Substances 0.000 description 1
- 229910001750 ruby Inorganic materials 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/06—Buying, selling or leasing transactions
- G06Q30/0601—Electronic shopping [e-shopping]
- G06Q30/0641—Shopping interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Business, Economics & Management (AREA)
- Finance (AREA)
- Accounting & Taxation (AREA)
- Development Economics (AREA)
- Economics (AREA)
- Marketing (AREA)
- Strategic Management (AREA)
- General Business, Economics & Management (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种在线交互式商品详情页编辑方法和系统，所述方法包括：提供多个操作界面，采用界面化编程技术，通过不同的操作界面分别处理商品详情页中的商品详情页模板以及商品信息，并封装成电商平台能够发布的商品详情页面。本发明利用简化了商品详情页的装修效率，加快了电子商务产品上新速度。
Description
技术领域
本发明涉及视觉版面设计技术领域，尤其涉及一种在线交互式商品详情页编辑方法和系统。
背景技术
现有电商商品详情页依靠美工修图、排版、调整、裁剪，生成商品详情页首先需要设计人员设计PSD文件，然后开发人员通过PSD文件编写固定程序代码的商品详情页模板，再将制作好的商品详情页通过excel方式上传商品基础数据与图片数据后，选择相应的商品详情页模板即可生成相应详情页图片数据。这种传统流程需要几十分钟到几个小时。
现有通过命名匹配的方式生成电商平台商品详情页。先对模板上的图片占位框进行命名，然后对素材图片文件指定命名，通过计算机程序将指定命名的素材图片文件放置在模板上相同命名的图片占位框上即可。该方法缺点是需要设计师预先在头脑中规划详情页版面，然后指定素材图在详情页上的位置，最后给图片文件命名。该方法仅仅在详情页模板上填充已经命名好的图片，没有智能排版布局的功能，提升效率很有限。
随着技术的改进，先已有详情页排版系统，根据客户提交的原始详情页模板上传到排版系统，排版系统具有解析PSD源文件的解码功能，通过排版系统中的解码功能会解析PSD源文件，结合商家提供的预设模板信息生成可供人工智能识别和自动编辑的智能模板，接下来根据客户提供的产品图片上传到排版系统中的智能模板上，排版系统会从美学标准角度出发自动视觉识别产品图片的内容，其自动识别产品的图片内容通过自动比对、摆放、裁剪和美化图片来组合成商品展示详情页面，排版系统会从美学标准角度出发以DenseNet模型自动视觉识别并排版处理产品图片的内容，并最终通过自动比对、摆放、裁剪和美化图片将字段和图片拼接到智能模板上对应的区域内组合成商品展示详情页面。其缺点是：该方法处理某个素材包时，只有一个预先配置的详情页模板。当素材图的服装类型不符合模板上预设类型，或者素材包图片成分复杂，会导致最终详情页效果不佳，需要人工在详情页编辑器中大量调整，效率依然不高。
因此本发明发明人针对现有详情页制作过程，总结以下几点问题：
(1)商户需要多次修改商品详情页，每一次修改都要重复操作生成商品详情页的过程，比如，修改其中一个字，也需要技术人员通过修改代码来实现相应的更改。
(2)当处理多细节或多色图片展示时，比如一个展示区域需要展示不同颜色或者不同细节的多个图片时，需要针对每一种展示效果编写一串代码，由于不同的开发技术人员编写，容易出现大量的冗余和重复工作。
(3)针对同一段文字内中英文字体不同的需求无法满足。
(4)当详情页中存在较多A元素在B元素某个位置展示，无法统一定位设置解决方案。
(5)没有统一便捷的图片处理解决方案。
发明内容
为解决上述问题，本申请实施例通过提供一种在线交互式商品详情页编辑方法和系统，通过界面化编程达到简化开发维护操作，降低成本的目的，且通过自动匹配模板，解决系列处理问题，利用字符重组，解决中英文字符字体不同以及换行的问题，以及解决图文占位元素的定位问题。
本申请实施例提供了一种在线交互式商品详情页编辑方法，所述方法包括：提供多个操作界面，采用界面化编程技术，通过不同的操作界面分别处理商品详情页中的商品详情页模板以及商品信息，并封装成电商平台能够发布的商品详情页面；其包括步骤：
S1：提供商品详情页的模板编辑界面，对商品详情页的排版以及图文设计进行编辑，获取不同的图文展示模板，并组合形成商品详情页模板；
其中，所述模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各所述盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理各所述盒子模型以及各所述图文占位元素；后将各所述图文展示画布上交互的图文展示模板进行封装转换，组合形成JSON格式的商品详情页模板；
S2：提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素；基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面。
进一步地，所述步骤S1中进一步包括：基于所述模板编辑界面中JS、DSS语言的开发环境，利用界面化编程技术，获取所述图文展示画布上所述盒子模型以及所述图文占位元素的交互数据，并自动转换生成所述图文展示模板的设计代码，而后将所述设计代码封装成JSON格式。
进一步地，所述步骤S1中的所述图文展示画布还用于通过布置多个所述盒子模型以形成系列模型，以此适配相同配置的多个所述商品图片信息。
进一步地，所述步骤S2中进一步包括利用数据库查询逻辑，按照存储顺序读取所述商品图片信息；利用大数据中相似度匹配算法，根据所选的商品图片信息自动匹配图文展示模板，使所述图文展示模板中的盒子模型数量适配所选的商品图片信息。
进一步地，所述大数据中相似度匹配算法采用循环选择所述图文展示模板以匹配所选的商品图片信息，其进一步包括：
利用JSON串解析归类法读取所述商品详情页模板中的图文展示模板；
根据是否获取商品图片信息，判断当前是否需要循环匹配系列模型，若是则根据ksort()函数对当前系列模型中的盒子模型进行排序，若否则结束循环；
判断是否需要循环匹配系列模型中的盒子模型，若是则获取商品图片信息的数量，根据当前系列模型的商品图片信息数量预期值以及获取商品图片信息数量的实际值，判断预期值与实际值是否相等，若不相等则比较并记录预期值与实际值的差距，且在循环匹配系列模型中，选择预期值比实际值大的最小值，若是相等则将所有商品图片信息记录到系列模型的盒子模型中。
进一步地，所述步骤S2中还包括将所述商品图片信息关联的商品文字信息利用字符拆分重组算法自动换行处理。
进一步地，将所述商品图片信息关联的商品文字信息利用字符拆分重组算法自动换行处理的方法进一步包括：
接收所述商品文字信息以及所述图文展示模板中的字符属性配置数据；
利用preg_match_all()函数将所述商品文字信息拆分为若干单个字符，并组成字符集；
按顺序依次提取所述字符集中的字符，根据预设的换行策略，分别找出连续的中文字符或英文字符后，将相同字符合并处理；
根据所述图文展示模板中的字符属性配置数据，利用calculate TextBox()函数计算合并处理后的字符所需的长宽高属性值。
进一步地，所述步骤S2中还包括利用相对递归定位算法调整所述商品图片信息或商品文字信息位置；
进一步包括，解析JSON格式的所述商品详情页模板中的图文展示模板，获取所述图文展示画布上的交互数据，查找定位元素，判断所述商品图片信息或商品文字信息是否存在定位设计逻辑；
从商品图片信息或者商品文字信息中查找判断是否存在定位元素，若不存在则在原始的图文占位元素中查找，然后将找到的图文占位元素的定位键值作为新的定位重新递归调用，直到找到从商品图片信息或者商品文字信息中获取到的数据或链路断开位置，并提取定位值。
第二方面，本申请实施例提供了一种在线交互式商品详情页编辑系统，设于电商上新PIM平台中，采用如权利要求1-8任意一项所述的方法，包括：模板编辑模块、商品管理模块，
所述模板编辑模块配置为提供商品详情页的模板编辑界面，对商品详情页的排版以及图文设计进行编辑，获取不同的图文展示模板，并组合形成商品详情页模板；
其中，所述模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各所述盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理各所述盒子模型以及各所述图文占位元素；后将各所述图文展示画布上交互的图文展示模板进行封装转换，组合形成JSON格式的商品详情页模板；
所述商品管理模块配置为提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素；基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面。
本申请实施例中提供的一种在线交互式商品详情页编辑方法和系统，至少具有如下技术效果：
根据本发明的技术方案，利用盒子模型在图文展示画布上搭建图文展示模板，在商品图片信息上传前预先搭建商品详情页的设计架构，且商品图片信息上传操作页面与模板编辑界面位于不同界面，使得可以单独处理模板即可达到商品图片信息设计的目的，极大提高了商品详情页的装修效率。
本发明由于采用了相似度匹配算法，根据读取的商品数据素材包中的商品图片信息自动匹配图文展示模板，比如，读取单个商品图片信息，那么匹配的图文展示模板中只有一个盒子模型供商品图片信息绑定，从而优化了商品详情页的装修过程，仅需根据读取的商品图片信息数量自动匹配所需的图文展示模板。
本发明由于采用了字符拆分重组算法，利用多次循环逻辑，将输入的字符数据处理后自动换行，以解决中英文字体不同的问题，以提高字符显示美观性。
附图说明
图1为本申请实施例一种在线交互式商品详情页编辑方法的流程图。
具体实施方式
为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。
实施例1
参考图1所示，本申请实施例提供了一种在线交互式商品详情页编辑方法，该方法中，提供多个操作界面，采用界面化编程技术，通过不同的操作界面分别处理商品详情页中的商品详情页模板以及商品信息，并封装成电商平台能够发布的商品详情页面。
本实施例中利用在线交互式商品详情页编辑方法制作商品详情页面的步骤如下。
步骤S1：提供商品详情页的模板编辑界面，对商品详情页的排版以及图文设计进行编辑，获取不同的图文展示模板，并组合形成商品详情页模板。
其中，模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理各盒子模型以及各图文占位元素，进而达到图文展示页面设计目的。后将各图文展示画布上交互的图文展示模板进行封装转换，组合形成JSON格式的商品详情页模板。
在步骤S1中进一步包括，基于模板编辑界面中JS、DSS语言的开发环境，利用界面化编程技术，获取所述图文展示画布上盒子模型以及图文占位元素的交互数据，并自动转换生成图文展示模板的设计代码，而后将设计代码封装成JSON格式。
本实施例中的模板编辑界面为设计师提供商品详情页的设计框架，模板编辑界面中预设有商品详情页中图文展示类型，比如用于展示主色图的图文展示类型，用于展示公共图的图文展示类型，用于展示细节图的图文展示类型，并通过不同类型的图文展示模板组合成商品详情页的展示框架。进一步地，商品详情页的模板编辑界面中包括多个交互区域。图文展示画布上的操作为其中一个交互区域，图文展示画布中预设盒子模型，盒子模型内设置图文占位元素，图文占位元素包括图片占位元素和文字占位元素。交互区域还包括图片类型选择区域，图片类型选择区域中增加或删减图片占位元素缩略图减，各图片占位元素缩略图连接一盒子模型中的图文占位元素，通过对图片占位元素缩略图命名区分当前盒子模型的类型。交互区域还包括文字编辑区域，文字编辑区域连接一盒子模型中的文字占位元素，并通过在文字编辑区域增加或删减文字占位元素，以达到在盒子模型内的增加或删减图文占位元素的目的。交互区域还包括图文占位元素设计区域，其中，通过界面化设计盒子内图文占位元素的属性值，包括但不限于排版设计、图片处理，排版设计中包括图片元素、文字元素的定位设计，比如相对盒子模型顶部或侧壁的距离设置，比如盒子模型的背景色设计，比如各文字元素之间的分组设计等等。图片处理中，根据现有图片处理软件的处理功能实现的，例如Photoshop，区别与现有图片软件的处理方式，为了更加方便商户操作，本实施例中将图片处理方式分为多种，任意一种处理方式选择其中一种即可，通过分别对各处理方式进行选择即可到达对图片占位元素的设计效果，从而当图片占位元素替换为图片数据时，设计效果直接体现在图片数据上，操作人员在设计商品详情页时，直接找到对应图片所在的图片占位元素即可进行相关处理操作，无需重复整个详情页的设计流程，减少了设计人员的工作量，即使没有设计技巧的人员，也能很快上手操作。
在步骤S1中，图文展示画布还用于通过布置多个所述盒子模型以形成系列模型，以此适配相同配置的多个所述商品图片信息。具体地，通过系列模型来处理不同颜色或者不同细节的相同类型的若干图片数据所用的图文占位元素，举例说明，将多个颜色不同的图片数据设为一个系列的图片数据，并展示在同一个图文展示模板上，利用系列模型组合多个盒子模型后，设置图文展示模板，系列模型中的盒子模型可以呈列式排版、行式排版、混合叠加排版等，通过带有系列标识的名称进行命名，使同一系列内的多个盒子模型具有相同的系列标识，从而同时选中盒子模型时，仅需处理一次盒子模型中的图文占位元素以及对同一系列的盒子模型进行排版，即可获得具有系列模型的图文展示模板，并以此操作方式简化商户的工作过程，提高商品详情页的处理效率，减少处理时间。
本步骤中将盒子模型以及盒子模型中的图文占位元素的交互数据封装转换为JSON格式的图文展示模板。进一步地，设计人员在商品详情页的模板编辑界面通过拖拽或设置属性的方式处理图文占位元素，或者通过拖拽以及设置属性的方式对盒子模型进行排版，界面后台直接生成对应的设计代码，再利用JSON格式的优势，将系列模型以及交互数据所对应的设计代码封装成JSON格式。
JSON格式的图文展示模板的数据格式比较简单,易于读写,格式都是压缩的,占用带宽小，易于解析这种语言,客户端JavaScript可以简单的通过eval()进行JSON数据的读取搜索，支持多种语言,包括ActionScript,C,C#,ColdFusion,Java,JavaScript,Perl,PHP,Python,Ruby等语言服务器端语言,便于服务器端的解析，在PHP环境,现已经有PHP-JSON和JSON-PHP出现了,因此便于PHP序列化后的程序直接调用，且PHP服务器端的对象、数组等能够直接生JSON格式,便于客户端的访问提取.另外PHP的PEAR类已经提出了支持；JSON格式能够直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,但是完成的任务不变,且易于维护。
步骤S2：提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素，替换的同时根据一些设定的定位、关联元素是否存在、图片处理方式等参数实现不同情况下的自动排版功能；基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面。
进一步，本实施例中还将商品图片处理与定位设计自动结合，以达到自动排版的目的，设置在同一商品详情页模板的不同商品图片信息，在考虑到不同盒子模型中的商品图片信息，本实施例中将循环定位与预设的参数配置相结合，以实现智能排版，实现商品详情页模板上不同位置的商品图片信息的智能排版。进一步举例说明，商品图片信息设置到商品详情页模板上时需要根据所要设置位置的盒子模型的基本配置进行图片处理以及自动对齐并定位排版。
在步骤S2之前，可以利用步骤S1的模板编辑界面预先设置多款商品详情页模板，根据不同的商品类型，设计人员可以先打好操作，预先对商品详情页模板进行勾画布局，利用步骤S1中的模板编辑界面设计多款商品详情页模板。
在步骤S2之前还包括，预先上传商品素材包，商品素材包中包括多款商品对应的若干商品图片信息。在步骤S2中，上传的商品图片信息根据自定义选择的商品详情页模板即可得到商品详情页面。
在步骤S2中进一步包括利用数据库查询逻辑，按照存储顺序读取商品图片信息；利用大数据中相似度匹配算法，根据所选的商品图片信息自动匹配图文展示模板，使所述系列模型中的盒子模型数量适配所选的商品图片信息。
进一步地，本步骤中的大数据相似度匹配算法采用循环选择图文展示模板以匹配所选的商品图片信息，其进一步包括：
利用JSON串解析归类法读取所述图文展示模板中的系列模型；
根据是否获取商品图片信息，判断当前是否需要循环匹配系列模型，若是则根据ksort()函数对当前系列模型中的盒子模型进行排序；若否则结束循环；
判断是否需要循环匹配系列模型中的盒子模型，若是则获取商品图片信息的数量，根据当前系列模型的商品图片信息数量预期值以及获取商品图片信息数量的实际值，判断预期值与实际值是否相等，若不相等，则比较并记录预期值与实际值的差距，且在循环匹配系列模型中，选择预期值比实际值大的最小值，若是相等，则将所选商品图片信息记录到系列模型的盒子模型中。
本步骤中的相似度匹配算法利用所选的商品图片信息自动选择最合适的系列模型，当然，当图文展示模板中只有一个盒子模型时，可以认为该图文展示模板中设有循环次数较少的特殊系列模型。通过在多个已设计好的图文展示模板中选择最合适图文展示模板以生成图片格式的图文展示页面。
在步骤S2中，所述文字区域还包括将所述商品图片信息关联的商品文字信息利用字符拆分重组算法自动换行处理。其方法进一步包括：
接收所述商品文字信息以及所述图文展示模板中的字符属性配置数据。利用preg_match_all()函数将所述商品文字信息拆分为若干单个字符，并组成字符集；按顺序依次提取所述字符集中的单个字符，根据预设的换行策略，分别找出连续的中文字符或英文字符后，将相同字符合并处理；根据所述图文展示模板中的字符属性配置数据，利用calculate TextBox()函数计算合并处理后的字符所需的长宽高属性值。
在步骤S2中合成图片格式的图文展示页面之前还包括对输入的商品文字信息进行中英文字体调整以及换行处理。
具体包括：
接收商品文字信息以及图文展示模板中的与商品文字信息有关的属性值。当然图文展示模板中与字符有关的属性值可以理解为在模板编辑界面对图文占位元素中文字元素属性值设置，本步骤中接收商品管理界面中输入的商品文字信息，同时获取JSON格式的图文展示模板中的一些配置字符的属性值，或者说，图文展示模板中与文字有关的配置信息，进一步为详情页模板设计中配置的属性参数，比如中英文字体、字号、宽度等。
本实施例进一步将接收的商品文字信息拆分成若干单个字符，具体表现为，利用preg_match_all()函数将所述商品文字信息拆分为若干单个字符，并组成字符集。
在对字符集计算处理之前还包括设置变量$key，用于记录商品文字信息的行数；设置$text_line数组，用于记录每行商品文字信息；设置$has_blank_space,用于空格计数；设置$text_line_width，用于单行行宽计数；设置$_next_v,用于储存循环字符集中的下一个字符；设置$_en_v，用于记录循环中连续的英文；设置$_cn_v，用于记录循环中连续的中文。因此可以知道，在处理之前需要预设与行量有关的多个参量。本实施例中利用多个参量数定义换行策略，进一步地，换行策略中包括多个循环处理策略。
第一个循环策略为，判断字符集中的特殊字符、换行字符、空格字符等，特殊字符为常见的特殊符号，比如，“/-～@#$！％^&*():；"'}]{[”，本次循环步骤包括：
按顺序提取字符集中的单个字符；判断是否为特殊字符，若是则计算行数，即为$key++,行数计数器+1；$has_blank_space＝0,空格计数器归0；Stext_line_width＝0,行宽计数归0，并返回字符集重新提取字符。若否则再次判断字符是否为行号字符“/r”、“/n”，若是则Shas_blank_space++，空格计数器+1，并返回字符集重新提取字符。若否则获取当前单个字符，即获取获取循环中当前字符中英文，记录获取$_language值为en或cn。
第二次循环策略为，获取循环中的中文字符或英文字符,进行五次在内的判断循环,以便将当前字符拼接到对应的中文字符或者英文字符上。
第一次判断是否存在下一个字符，表示为判断当前单个字符是否为末位字符，若是则更新更新$_next_v变量，并进行第五次判断表示:$has_blank_space！＝0,以及对更新的$_next_v变量进行第二次判断,判断更新$_next_v变量后,判断下一个字符是否为特殊字符,若是则将当前字符拼接该特殊字符,并进行第五次判断,若否则进行第三次判断,判断下个字符是否为回车或者空格,若是则$_next v＝false,若否则获取下一个中文字符或英文字符,并进行第四次判断,第四次判断下个字符是否为中文字符,表示为下个字符的文字属性＝＝$_language,若否则表示$_next_v＝false,并进入第五次判断；第五次判断表示:$has_blank_space！＝0,若是则根据空格数量将空格拼接到当前字符之前,即判断当前字符之前是否有空格,若否则将当前字符拼接到对应的$_en_v或者$cn_v上,以此得到一串连续的中文字符或者一串连续的英文字符。
第三次循环策略，用于配置字符间距及长宽高属性。具体步骤包括两个分支。
第一分支中，第一次判断$_en_v有值且$_next v不为false且为英文字符时，将$_en_v拼接上$_next v，并获取字符串长度，进行第二次判断，判断是否超过配置设置的单行最大宽度，若否则返回循环进行拼接，若是则将当前字符值设置为$_en_v。
第二分支中，第一次判断$_cn_v有值且$_next v不为false且为中文字符时，将$_cn_v拼接上$_next v，并获取字符串长度，进行第二次判断，判断字符串长度、行宽计数、字间距是否大于设置的最大行宽，若否则返回循环进行拼接，若是则将当前字符值设置为$_cn_v。
从第一分支、第二分支置空$_en_v、$_cn_v，并获取获取当前字符的长度高度等数据，设置$text_line_width，累加字间距、当前字符长度，判断$text_line_width是否大于最大宽度，若是则“$key++；$Stext_line,_width＝当前字符宽度”，若否利用Stext_height记录行高，以$key做为键值将数据存入Stext_line，并返回至字符集中，提取下一个字符。其中，计算长度采用calculate TextBox方法能获取到字符串的一些长宽高属性计算是会根据配置传入一些字号字体等配置数据。
本步骤S2中还包括利用相对递归定位算法调整所述商品图片信息或商品文字信息所在图文占位元素的位置。进一步包括，解析JSON格式的图文展示模板，从设计代码中查找定位元素，判断所述商品图片信息或商品文字信息是否存在定位设计逻辑；从商品图片信息或者商品文字信息中查找判断是否存在定位元素，若不存在则在原始的图文占位元素中查找，然后将找到的图文占位元素的定位键值作为新的定位重新递归调用，直到找到从商品图片信息或者商品文字信息中获取到的数据或链路断开位置，并提取具有的定位置。
本步骤中采用相对递归定位算法解决商品数据复杂多变情况下的元素定位。其中，相对定位距离支持公式计算及特定关键词计算#self_height#、#self_width#、#target_height#、#target_width#。例：D相对于C的顶部距离可以设置为#self_height#+50(D的高度+50像素)或#target_height#+50(C的高度+50像素)。
相对递归定位算法的递归逻辑为，解析页面传来的json数据，如果元素存在定位设定走下图代码逻辑。参数说明$_position正在处理中元素的配置数据，$element_position其他全部处理完成的元素(未正常获取数据的元素不会记录在其中)，$getRelativeX递归存储用，$orig_element原始的全部元素的键值递归查找时使用。从$element_position中查找对应定位元素是否存在，如果不存在则在原始数据$orig_element中查找然后把找到元素的定位键值作为新的定位重新递归调用方法，直到找到从$element_position中获取到的数据或链路断开($orig_element元素无指定定位)。公式计算或直接取值获取具体定位值。
实施例2
本申请实施例提供了一种在线交互式商品详情页编辑系统，设于电商上新PIM平台中，采用实施例1中任意一项的方法，包括：模板编辑模块、商品管理模块。
所述模板编辑模块配置为提供商品详情页的模板编辑界面，编辑商品详情页中不同排版以及不同图文设计的图文展示模板，组合形成商品详情页模板。
其中，所述模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各所述盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理所述盒子模型以及所述图文占位元素，以达到图文展示页面设计目的；后将各所述图文展示画布上的交互数据封装转换为JSON格式的图文展示模板，以形成JSON格式的商品详情页模板。
所述商品管理模块配置为提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素，替换的同时根据一些设定的定位、关联元素是否存在、图片处理方式等参数实现不同情况下的自动排版功能，基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (6)
1.一种在线交互式商品详情页编辑方法，其特征在于，所述方法包括：提供多个操作界面，采用界面化编程技术，通过不同的操作界面分别处理商品详情页中的商品详情页模板以及商品信息，并封装成电商平台能够发布的商品详情页面；其包括步骤：
S1：提供商品详情页的模板编辑界面，对商品详情页的排版以及图文设计进行编辑，获取不同的图文展示模板，并组合形成商品详情页模板；
其中，所述模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各所述盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理各所述盒子模型以及各所述图文占位元素；后将各所述图文展示画布上交互的图文展示模板进行封装转换，组合形成JSON格式的商品详情页模板；所述图文展示画布还用于通过布置多个所述盒子模型以形成系列模型，以此适配相同配置的多个商品图片信息；
S2：提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素；基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面；
所述步骤S2中进一步包括利用数据库查询逻辑，按照存储顺序读取所述商品图片信息；利用大数据中相似度匹配算法，根据所选的商品图片信息自动匹配图文展示模板，使所述图文展示模板中的盒子模型数量适配所选的商品图片信息；所述大数据中相似度匹配算法采用循环选择所述图文展示模板以匹配所选的商品图片信息，其进一步包括：
利用JSON串解析归类法读取所述商品详情页模板中的图文展示模板；
根据是否获取商品图片信息，判断当前是否需要循环匹配系列模型，若是则根据ksort()函数对当前系列模型中的盒子模型进行排序，若否则结束循环；
判断是否需要循环匹配系列模型中的盒子模型，若是则获取商品图片信息的数量，根据当前系列模型的商品图片信息数量预期值以及获取商品图片信息数量的实际值，判断预期值与实际值是否相等，若不相等则比较并记录预期值与实际值的差距，且在循环匹配系列模型中，选择预期值比实际值大的最小值，若是相等则将所有商品图片信息记录到系列模型的盒子模型中。
2.如权利要求1所述的在线交互式商品详情页编辑方法，其特征在于，所述步骤S1中进一步包括：基于所述模板编辑界面中JS、DSS语言的开发环境，利用界面化编程技术，获取所述图文展示画布上所述盒子模型以及所述图文占位元素的交互数据，并自动转换生成所述图文展示模板的设计代码，而后将所述设计代码封装成JSON格式。
3.如权利要求1所述的在线交互式商品详情页编辑方法，其特征在于，所述步骤S2中还包括将所述商品图片信息关联的商品文字信息利用字符拆分重组算法自动换行处理。
4.如权利要求3所述的在线交互式商品详情页编辑方法，其特征在于，将所述商品图片信息关联的商品文字信息利用字符拆分重组算法自动换行处理的方法进一步包括：
接收所述商品文字信息以及所述图文展示模板中的字符属性配置数据；
利用preg_match_all()函数将所述商品文字信息拆分为若干单个字符，并组成字符集；
按顺序依次提取所述字符集中的字符，根据预设的换行策略，分别找出连续的中文字符或英文字符后，将相同字符合并处理；
根据所述图文展示模板中的字符属性配置数据，利用calculate TextBox()函数计算合并处理后的字符所需的长宽高属性值。
5.如权利要求1所述的在线交互式商品详情页编辑方法，其特征在于，所述步骤S2中还包括利用相对递归定位算法调整所述商品图片信息或商品文字信息所在图文占位元素的位置；
进一步包括，解析JSON格式的所述商品详情页模板中的图文展示模板，获取所述图文展示画布上的交互数据，查找定位元素，判断所述商品图片信息或商品文字信息是否存在定位设计逻辑；
从商品图片信息或者商品文字信息中查找判断是否存在定位元素，若不存在则在原始的图文占位元素中查找，然后将找到的图文占位元素的定位键值作为新的定位重新递归调用，直到找到从商品图片信息或者商品文字信息中获取到的数据或链路断开位置，并提取定位值。
6.一种在线交互式商品详情页编辑系统，设于电商上新PIM平台中，采用如权利要求1-5任意一项所述的方法，其特征在于，包括：模板编辑模块、商品管理模块，
所述模板编辑模块配置为提供商品详情页的模板编辑界面，对商品详情页的排版以及图文设计进行编辑，获取不同的图文展示模板，并组合形成商品详情页模板；
其中，所述模板编辑界面内预设有若干图文展示画布，所述图文展示画布上设有盒子模型，各所述盒子模型用于设置图文占位元素，通过拖拽或设置属性的交互方式处理各所述盒子模型以及各所述图文占位元素；后将各所述图文展示画布上交互的图文展示模板进行封装转换，组合形成JSON格式的商品详情页模板；所述图文展示画布还用于通过布置多个所述盒子模型以形成系列模型，以此适配相同配置的多个所述商品图片信息；
所述商品管理模块配置为提供商品详情页的商品管理界面，自定义选择商品详情页模板；接收商品图片信息以及关联的商品文字信息，自动匹配到所述商品详情页模板中的对应所述图文展示模板中，并替换所述图文占位元素；基于所述图文展示模板中的交互数据，自动处理所述商品图片信息以及所述商品文字信息，与所述商品详情页模板组成形成电商平台能够发布的商品详情页面；所述商品管理模块进一步包括利用数据库查询逻辑，按照存储顺序读取所述商品图片信息；利用大数据中相似度匹配算法，根据所选的商品图片信息自动匹配图文展示模板，使所述图文展示模板中的盒子模型数量适配所选的商品图片信息；所述大数据中相似度匹配算法采用循环选择所述图文展示模板以匹配所选的商品图片信息，其进一步包括：
利用JSON串解析归类法读取所述商品详情页模板中的图文展示模板；
根据是否获取商品图片信息，判断当前是否需要循环匹配系列模型，若是则根据ksort()函数对当前系列模型中的盒子模型进行排序，若否则结束循环；判断是否需要循环匹配系列模型中的盒子模型，若是则获取商品图片信息的数量，根据当前系列模型的商品图片信息数量预期值以及获取商品图片信息数量的实际值，判断预期值与实际值是否相等，若不相等则比较并记录预期值与实际值的差距，且在循环匹配系列模型中，选择预期值比实际值大的最小值，若是相等则将所有商品图片信息记录到系列模型的盒子模型中。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110685386.4A CN113485703B (zh) | 2021-06-21 | 2021-06-21 | 一种在线交互式商品详情页编辑方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110685386.4A CN113485703B (zh) | 2021-06-21 | 2021-06-21 | 一种在线交互式商品详情页编辑方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113485703A CN113485703A (zh) | 2021-10-08 |
| CN113485703B true CN113485703B (zh) | 2023-05-16 |
Family
ID=77935516
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110685386.4A Active CN113485703B (zh) | 2021-06-21 | 2021-06-21 | 一种在线交互式商品详情页编辑方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485703B (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110275996A (zh) * | 2019-06-17 | 2019-09-24 | 北京亚鸿世纪科技发展有限公司 | 数据可视化开发为内容开发提供页面框架的装置及方法 |
| CN111339467A (zh) * | 2020-02-27 | 2020-06-26 | 上海百秋电子商务有限公司 | 基于电商平台商品详情页标准化模板的方法 |
| CN111580815A (zh) * | 2020-05-08 | 2020-08-25 | 上海泛微网络科技股份有限公司 | 一种页面元素的编辑方法及相关设备 |
| CN112068835A (zh) * | 2020-09-04 | 2020-12-11 | 中国平安财产保险股份有限公司 | 一种在线生成页面的方法和装置 |
Family Cites Families (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7548334B2 (en) * | 2003-10-15 | 2009-06-16 | Canon Kabushiki Kaisha | User interface for creation and editing of variable data documents |
| JP2009080721A (ja) * | 2007-09-27 | 2009-04-16 | Dainippon Printing Co Ltd | ページレイアウト装置、媒体レイアウト支援システム、媒体レイアウト支援方法、プログラム、及び記録媒体 |
| CN105007539A (zh) * | 2015-07-17 | 2015-10-28 | 孙巍 | 一种基于html模板通过电视发布图文信息的方法、设备及系统 |
| CN105446744A (zh) * | 2015-12-15 | 2016-03-30 | 北京中网易企秀科技有限公司 | 基于互联网的展示物料系统及展示物料制作方法 |
| JP2017219954A (ja) * | 2016-06-06 | 2017-12-14 | 岡田 泰成 | ホームページの作成を支援する方法、プログラム、記録媒体、および装置 |
| CN106886418B (zh) * | 2017-03-27 | 2020-12-25 | 湛江市霞山区新软佳科技有限公司 | Html界面控件贴 |
| CN108694043B (zh) * | 2017-04-11 | 2022-04-12 | 北京京东尚科信息技术有限公司 | 页面装修方法和系统 |
| CN107609193A (zh) * | 2017-10-16 | 2018-01-19 | 杭州时间线信息科技有限公司 | 一种适合商品详情页中图片的智能自动处理方法和系统 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN110598017B (zh) * | 2019-08-29 | 2020-08-14 | 杭州光云科技股份有限公司 | 一种基于自学习的商品详情页的生成方法 |
| CN112561640A (zh) * | 2020-12-15 | 2021-03-26 | 中国建设银行股份有限公司 | 商品页面模板的生成方法、装置、计算机设备和存储介质 |
-
2021
- 2021-06-21 CN CN202110685386.4A patent/CN113485703B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110275996A (zh) * | 2019-06-17 | 2019-09-24 | 北京亚鸿世纪科技发展有限公司 | 数据可视化开发为内容开发提供页面框架的装置及方法 |
| CN111339467A (zh) * | 2020-02-27 | 2020-06-26 | 上海百秋电子商务有限公司 | 基于电商平台商品详情页标准化模板的方法 |
| CN111580815A (zh) * | 2020-05-08 | 2020-08-25 | 上海泛微网络科技股份有限公司 | 一种页面元素的编辑方法及相关设备 |
| CN112068835A (zh) * | 2020-09-04 | 2020-12-11 | 中国平安财产保险股份有限公司 | 一种在线生成页面的方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113485703A (zh) | 2021-10-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200372206A1 (en) | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout | |
| CN106886418B (zh) | Html界面控件贴 | |
| CN109408764B (zh) | 页面区域划分方法、装置、计算设备和介质 | |
| CN113609820B (zh) | 基于可扩展标记语言文件生成word文件的方法、装置及设备 | |
| CA3152833A1 (en) | Webpage editing method and device | |
| CN102945287A (zh) | Jsp数据自动分页jstl标签技术及应用 | |
| CN113934820A (zh) | 非结构化数据的可视化处理系统、方法、存储介质和终端 | |
| CN103176778A (zh) | 网页开发方法和装置 | |
| US20160314502A1 (en) | System and method for streamlining the design and development process of multiple advertising units | |
| US8140957B2 (en) | Technique for controlling screen display | |
| CN113485703B (zh) | 一种在线交互式商品详情页编辑方法和系统 | |
| CN113656487A (zh) | 信息系统中的对象数据展示方法及对象数据展示装置 | |
| CN111367514A (zh) | 页面卡片的开发方法和装置、计算设备和存储介质 | |
| CN117236356A (zh) | 基于web的标签在线设计及打印方法 | |
| CN113485704B (zh) | 一种用于电商平台商品活动页的信息处理方法及系统 | |
| CN108647337B (zh) | 一种仿真分析数据的格式处理方法及装置 | |
| CN115658056A (zh) | 一种基于图片的前端vue代码自动生成方法和系统 | |
| CN114594939A (zh) | 可视化页面构建方法、装置、计算机设备和存储介质 | |
| CN113687815B (zh) | 容器内多组件动效处理方法及装置、电子设备、存储介质 | |
| CN116301802A (zh) | 一种基于bi系统的自定义组件的方法及装置 | |
| US20240127510A1 (en) | Stylized glyphs using generative ai | |
| CN117494681A (zh) | 一种基于可视化配置的表格布局渲染方法及系统 | |
| CN112132926A (zh) | 基于可缩放矢量图的流程图图元样式设计器及其设计方法 | |
| CN117892698A (zh) | 一种文字渐变渲染方法、设备及存储介质 | |
| CN115357237A (zh) | 页面生成方法、装置、计算机设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 200335 floor 2, building B, No. 1358 Xiehe Road, Changning District, Shanghai Applicant after: Shanghai baiqiu new online commerce Digital Technology Co.,Ltd. Address before: 200335 room 2403, floor 1, building 8, No. 33, Guangshun Road, Changning District, Shanghai Applicant before: Shanghai baiqiu e-commerce Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231113 Address after: Room 701, Building B, No. 1358 Xiehe Road, Changning District, Shanghai, 200050 Patentee after: Shanghai Baiqiu Zhishang Network Service Co.,Ltd. Address before: 200335 floor 2, building B, No. 1358 Xiehe Road, Changning District, Shanghai Patentee before: Shanghai baiqiu new online commerce Digital Technology Co.,Ltd. |