维看帮助中心

如何使用产品列表组件?

浏览数量:157     作者:本站编辑     发布时间: 2017-02-24      来源:本站

一、什么是产品列表组件?


产品列表组件:是在网页上展示部分或所有产品的模块,支持分页展示。在产品系统中添加的产品需要通过产品列表组件在页面上展示出来。展示风格多样化,如下图所示,在下面展示风格中做详细介绍。

产品展示风格.jpg


二、产品列表组件的应用场景主要有哪些?


产品列表组件通常被应用在需要展示产品的页面,比如系统页面的产品中心页面、网站首页等;

系统页面中的产品中心页面,如下图所示:

首页的产品列表组件.jpg


网站首页,如下图所示:

首页的产品列表.jpg


三、如何使用产品列表组件?


1、如何查看产品列表组件是否已经存在?


系统页面中的产品中心页面通常已经添加好了一个产品列表组件,直接根据需要对这个组件进行相应操作就可以。

像首页或其它页面没有添加好的话,就需要先添加一个产品列表组件。这就需要我们先学会查看要设置的组件是否已经存在了,如何查看某一块内容是使用什么组件制作的?如果不存在,就需要先添加这块内容。


2、如何添加产品列表组件?


在页面上添加组件的方法都是一样的,单击查看如何添加组件?

添加的组件名称为“产品列表”,如下图所示:

产品列表组件.jpg


3、如何设置产品列表组件?


1)进入组件的“设置”分两种情况:


1>此组件已经添加好的情况:进入所有组件的设置项方法都是一样的,可以参考这个攻略:如何进入组件的设置项?

2>新添加的组件的情况:在添加此组件时会弹出这个组件的的设置话框。


2)在组件的设置中可以设置组件展示的内容、高级功能、风格和特效。


1>内容


组件标题:根据需要可以输入组件标题,比如产品中心,若不输入,标题也不会显示;

选择列表的产品数据:即选择展示在这个页面上的产品。有三个选项,所有产品、使用筛选条件、选择指定产品。

若选择“所有产品”,则产品列表中会显示所有的已上架产品,一页显示不了会分页显示;

若选择“使用筛选条件”:可以只勾选热门产品、新产品、推荐产品,这样被设置为热门产品、新产品、推荐产品的所有已上架的产品都会显示出来;若需要只显示某一个分类下的产品,可以直接选择这个分类就可以;    

使用筛选条件.png


若选择“选择指定产品”:可以选择特定产品展示在这里;

选择指定产品.png


分页展示:若选择“是”,在产品列表中的产品超过“每页产品数量”设置的指时会自动进行分页。若选择“否”,产品展示方式有“产品混排”和“按分类展示”两种方式可以选择。产品混排:即不按照分类排列;显示产品总数量:输入数值。不分页。

分页展示选择否.png 


分页展示:若选择“否”,同时产品展示方式选择“按分类展示”,下面会让设置每个分类展示产品个数。则产品不会分页展示并且展示完一个分类的产品后再展示第二个、第三个等产品分类下的产品;

否按照分类展示.png


显示更多:可以根据需要设置是否显示更多按钮,通常会在非产品中心页面设置显示更多按钮,通常可以链接到产品中心等能够展示更多产品页面。

单击下图所示“显示更多”后的链接按钮,弹出“插入链接”窗口,根据需要选择一个类型,单击查看链接类型介绍

插入链接按钮.jpg


设置显示更多按钮后,前台展示的效果如下图所示:

显示更多按钮.jpg

高级:

在高级页签下,可以设置产品排序方式,分页刷新方式,开启或关闭产品询价、加入询价蓝、下单购买、加入购物车,是否在新窗口中打开产品详情的链接,是否显示产品分类描述。


产品排序方式:点击下拉小箭头,支持产品按照以下方式排序,按修改日期降序(最新修改的在最前面)、按修改日期升序(最新修改的在最后面)、按添加日期升序(最新添加的在最前面)、按添加日期降序(最新添加的在最后面)。

产品排序方式.jpg

分页刷新方式:选择“页面全局刷新URL变化”时,点击分页按钮时,页面URL会变化,即打开新的页面;若选择“页面局部刷新URL不变”时,点击分页按钮时,只会局部刷新,页面URL不变,即不会跳转到其他页面。两者区别,前者利于SEO,页面打开速度相对慢一些,后者页面打开速度会相对快一些;

功能设置

产品询价:可选择开启或关闭产品询价按钮,开启,则在产品图片下方增加一个产品询价按钮;

加入询价蓝:可选择开启或关闭询价蓝,开启,则在产品图片下方增加一个“加入询价蓝”按钮,加入询价蓝可以和其它产品一起询价;

下单购买:若给产品输入了价格,需要客户在线下单购买的,可以开启此功能;

加入购物车:若给产品输入了价格,需要客户在线下单购买的,可以开启此功能;

“下单购买和加入购物车”功能与“产品询价和加入询价蓝功能”是二选一的关系;

当产品列表组件的产品询价、加入询价篮、下单购买、加入购物车这四个按钮都是开启状态时,系统会自动识别,当产品有价格时就显示购买和加入购物车,当产品没有价格时就会显示询价和加入询盘篮。


在新窗口中打开产品详情的链接:可以选择是否在新窗口打开产品详情的链接;

显示产品分类描述:若勾选此功能并且在产品分类编辑页面输入了产品分类描述,那么在打开一个产品分类描述页面时,产品列表上方会显示产品分类描述。如果不在此勾选此功能,但又想显示产品分类描述,可以使用产品分类描述组件来制作。

产品列表的字段配置:有时客户需要在产品图片和名称下面显示这些字段,那么我们就可以在这里勾选要显示的字段,并且可以拖动调整字段顺序;

高级功能.jpg



3>风格


选择展示风格:常用的产品展示风格如下图所示。


风格--产品展示风格.jpg


第1种风格:如下图所示,产品主图+产品名称。

第1种风格.jpg

选择第1种风格,还支持设置以下内容:

● 设置响应式变化下不同宽度的图片数量:可选择默认,即自适应;也可以自定义不同设备下一行展示的产品图片数量,可以设置宽屏电脑通栏(>1200px)、宽屏电脑非通栏(961px~1200px)、PAD竖屏(741px~960px)、手机横屏(500px~740px)、手机竖屏(<500px)一行显示的图片数量,(可填数值在2~8之间)。


● 选择图片显示比例(宽:高):建议所有的产品图片的宽与高的比例都是相同的,并且在这里选择这个比例。如果图片的宽与高的比例不一样,选择一个符合大部分图片的比例,然后修改小部分的图片原图比例。图片比例(宽:高):1:1、3:2、2:3、4:3、3:4、16:9、9:16。

响应式变化下图片数量.jpg

QQ截图20160807165508


● 还可以设置单个产品背景颜色、单个产品悬浮鼠标样式、单个产品边框、设置产品图片边框。

单个产品背景色:可以自定义单个产品背景色;
单个产品鼠标悬浮样式:可以设置鼠标悬浮在当产品时单个产品的背景颜色和链接文字颜色;

单个产品边框:可以设置不显示,可以选择显示(边框是默认的,不支持改);

设置产品图片边框:可以设置不显示,若设置显示,可以设置边框宽度、边框颜色;


针对单个产品的设置.jpg


● 按钮样式:可以选择以下符合自己网站风格的按钮,这些按钮颜色已经配置好了,不支持修改;


按钮样式jpg.jpg

● 分页风格,可以设置默认,也可以自定义分页风格,可以自定义分页按钮中颜色,也可以选择分页位置居左、居中或者居右。

12


特效:


鼠标悬停产品图片特效:可以设置鼠标悬停在产品图片上时图片的特效,有:默认、放大、透明、黑白、蒙层、黑白变彩色、向上偏移、向右偏移、向下偏移、向左偏移、动画线。直接选择这些特效试一下就知道分别代表什么意思咯。

鼠标悬停图片特效.jpg


当选择动画线特效的时候,可以自定义动画线颜色:

设置动画线颜色.jpg


3)设置好产品列表组件的内容、高级功能、风格和特效后,点击右下方“保存”按钮,保存所设置的内容。

14


4、针对显示在产品列表组件中的产品可以排序,单击查看:

如何对产品排序?

如何对产品分类下的产品排序?


5、如何编辑产品列表组件的样式?


所有组件的“编辑样式”功能操作入口都是一样的,组件的“编辑样式”功能主要可以编辑此组件的以下内容:组件尺寸、组件背景、组件边框、组件边距、文字字号、颜色等。单击查看如何编辑组件的样式

组件的“编辑样式”功能,操作入口如下:


组件编辑样式.png


6、如何复制产品列表组件?


通过组件的复制功能,可以快速拷贝出一个同原组件一模一样的组件,然后在这个组件的基础上再做局部的修改,这样省时省力省心。注意:通过复制组件生成的新组件,同原组件没有关系,单独编辑/删除其中一个组件不会影响到另一个组件。此功能经常用于页面上要展示多个同类的组件,先设置好一个组件,然后通过复制组件功能将内容样式等设置项全部拷贝过去,然后再简单修改即可实现不同的内容。

所有组件的“复制组件”功能都是一样的,单击查看如何复制组件?

操作入口如下图所示:

复制组件.png


7、如何应用产品列表组件?


通过组件的“应用组件”功能,可以将当前页面的组件应用到其他页面上,因为原理上它们是同一个组件,所以在任何被应用到的页面上编辑/删除组件时,被应用的页面会一起变化,这个是“应用组件”和“复制组件”最本质的区别。此功能经常用于面包屑导航、产品分类组件、文章分类组件等。被应用过去的组件会出现在页面的最底端,可以用鼠标左键按住组件名称拖动到需要的位置。

所有组件的“应用组件”功能操作入口都是一样的,单击查看如何应用组件?

组件的“应用组件”功能,操作入口如下:

应用组件.png


8、如何删除产品列表组件?


如果确定不需要这个组件了,可以通过“删除组件”按钮把此组件删除掉,被删除的组件会默认放到组件回收站中。

所有组件的“删除组件”功能操作入口都是一样的,单击查看如何删除组件?

组件的“删除组件”功能,操作入口如下:

删除组件.png


9、如何恢复已被删除的产品列表组件?


如果需要恢复已经删除的组件,可以到组件回收站中,找到对应的组件,然后执行【还原】操作,即可恢复此组件到原有的页面上,通常会位于页面的最底端。单击查看如何恢复组件?

恢复组件入口:所有组件的恢复功能操作入口都是一样的,如下图所示:

组件回收站.jpg



四.组件优化


1.优化产品列表组件中星级展示的对齐方式,可以通过编辑样式中的内容区普通文字项对其调整;

(1)新增功能应用场景:通过设置对齐方式,满足用户不同的排版需求,让产品列表更加美观。

(2)设置对齐方式的效果图如下所示,图1为左对齐,图2为中间对齐,图3为右对齐。

图1

QQ图片20180426134825




图2

QQ图片20180426134708



图3

QQ图片20180426134936



2.产品列表组件新增多种风格切换功能;  (2018-05-02优化)

(1)新增功能应用场景:当用户前台产品较多,希望给买家提供方便适宜的产品浏览方式时,可以在产品列表组件中添加展示风格前台切换功能,允许买家在前台产品列表上一键切换自己想要的展示风格。

(2)操作方法:

QQ图片20180502131627


QQ图片20180502155001



3.、产品列表组件增加产品对比功能(英文站上叫“Compare”);    (2017-10-19优化)

   (1)新增功能应用场景:当需要对产品的各个属性进行直观的分析对比的时候,人工对比费时费力,这个时候只需要将需要对比的产品加入到对比池,就能够得到很直观的数据。

   (2)新增功能的操作方法:

QQ图片20180510133433


(3)新增功能应用效果:

QQ图片20180510133833



4.产品列表组件新增抖动特效;   (2017-9-30优化)

(1)新增功能应用场景:组件新增“抖动”特效,鼠标悬停到产品图片上出现抖动效果;

(2)新增功能操作方法:

QQ图片20180514163425




5.产品列表组件在更多链接中新增nofollow功能;   (2017-6-1优化)

(1)新增功能应用场景:分页链接加上nofollow标签,避免分散当前页面的权重,在SEO方向做的更细致;

(2)新增功能操作方法:

QQ图片20180517162003




6.产品列表组件将更多改为显示更多链接;     (2017-5-23优化)

QQ图片20180522135649



7.产品列表组件产品对比增加对比字段选择功能;  (2018-6-7优化)    

(1)新增功能应用场景:客户开启产品对比功能时,可以根据网站需求选择参与对比的属性,提高产品对比功能的实用性。

(2)新增功能操作方法:

QQ图片20180608090243


(3)新增功能应用效果:

无标题


8、产品列表组件新增风格,支持鼠标悬停更换图片(2019-4-17优化)

【应用场景】为便于用户浏览产品图片时,全面了解产品细节,快速询盘、购买产品,领动特在产品列表组件中增加鼠标悬停切换或放大图片功能。若用户将鼠标悬停于产品展示图片之上,当图片仅有一张时,可实现自动放大;当图片不止一张时,可实现图片切换展示,且都在展示图片右上角设置快速操作入口,该功能便于用户全面获取产品信息、快速询盘或购买。

【操作方法】在“产品组件”中选择“产品列表”,在“设置产品列表框”选择“风格”栏,选中如下图所示的风格:

5(V_ZV}I@695)1@UVL]YU9


【应用效果】在产品展示界面,将鼠标悬停于产品图片上时,其效果如下图所示:

鼠标悬停换图


9、“产品列表”组件,选择”默认样式“后可自定义“产品询价”及“加入询价篮”按钮样式;(2019-9-3优化)

123


建站流程

 找不到你的问题?
 135-6001-3420
 seoprixcom@gmail.com
 214227632
Facebook
Twitter
Google
LinkedIn
Instagram
维看云建站系统
专业外贸建站系统,为你打造一个适合谷歌优化的网站!
  • 客服QQ
    214227632
  • 微信手机
    135-6001-3420
  • 邮箱
    seoprixcom@gmail.com