用网站快车系统可以很容易的作产品比较,用来比较商品、产品之间的数据区别,显示多个产品之间的相同点、不同点,对用户挑选产品很有帮助。
实现后的功能样式如下图:
点击复选框,选择要比较的产品,再点击比较,就可以打开产品比较页面:
注意这里的显示相同点,显示不同点和显示全部,这是我们的产品比较和其它的比较系统不一样的地方,利用这个功能,用户可以很容易的分辨出产品的异同。
这个功能是怎么实现的呢?我们详细说明一下,
首先,我们进入用于保存数据的栏目,打开产品的数据模型。
进入产品数据栏目,点修改栏目,修改栏目的数据模型
在数据模型中,选择一个图片列表方式,注意,只有用图片列表的显示方式,才能设置产品比较功能,点击设置,设置这个显示方式的样式
首先,在附加显示一项中,钩上比较,让这个显示方式启用比较功能
然后在显示方式的产品比较详细设置中,设置比较的详细显示方式,设置好后,点保存,设置这个显示方式的设置,保存好之后,就可以看到我们的网页中,产品图片左上角有了一个比较功能:
这里,选择复选框后,点击比较,发现功能出错,还不能进行比较,怎么回事呢?
原来是由于我还没有制作一个比较页。制作比较页的方式非常简单,
我们用Dreamweaver建立一个网页文件,注意编码选择为UTF-8,如下图:
文件名保存为compare.aspx,这是默认的文件名,在前面设置显示方式的时候,可以设置使用不同的文件名。
文件内容如下:
|
|
现在这个页面还是空的,我们需要制作一个用来实现产品比较的标签,放到这个页面中,完成产品比较功能。
在标签管理功能中,点击新增标签,增加一个产品比较标签。
这里要注意,要选择和前面栏目对应的数据模型,因为系统无法在不同的数据模型间比较数据。选择好数据模型后,设置哪些字段需要比较:
注意这里,要对字段作一个分类,分类的名字是自己任意起的。然后设置哪些字段属于这个分类,注意这里是设置的字段名,不是字段显示的别名,同时,这些字段还必须是可以在内容页中显示的字段,一共可以把字段归为5个大类,如果用不到这么多种分类,不需要的空在那里就可以了。
设置好后,我们把这个标签放到compare.aspx文件中,于是这个文件成了这样的代码:
|
|
和原来相比,仅多了一个<%lb("比较");%>,这个代码用于调用刚才我们制作的用来实现产品比较功能的标签。
保存文件,我们再点栏目中的产品比较,就可以看到:
这样的产品比较功能了。
