如何添加和修改商品挂件

文章 by kulolo    4 评论

Shopex独立网店系统最重要的挂件之一就是商品挂件了，几乎所有的模板都会将其放在首页或者其他页面上。例如：最新商品，热卖商品，推荐商品。Shopex的商品挂件可以分别对分类，品牌和标签筛选你要的展示的商品，所以可以极方便的调用各种需要调用的商品。

我们先简单的添加一个商品挂件，看下效果。添加挂件前，需要在HTML上添加挂件位，假设添加一个<{widgets id=”goods”}>，然后去商店后台可视化模板编辑中添加版块，选择商品相关中的多功能商品展示或者商品展示挂件，我们只是简单的添加商品挂件，所以添加下商品展示挂件。如下图：

对所需要的商品进行筛选，如果商品的要求无法达到需要的筛选条件，可以为你的需要的商品添加标签。比如给某些商品添加半价促销的标签（在商品添加或编辑的时候），那么标签选择半价促销，就会选中那些商品。显示设置的选项是对应网站前台的展示效果。可以选择设置下，看下效果。一般如下图所示

那么如何美化和修改这个商品挂件呢。如果简单的修改可以通过css来进行调整，如把字体颜色修改和行间距的修改，都可以通过css来修改。如果你想将市场价移动到销售价下，那只有通过修改该挂件的HTML架构来完成了。

修改之前先备份文件或者重新建立一个挂件模板，商品展示挂件的路径为：plugins/widgets/goods_show/。

这块的HTML是<table>布局的，<table>布局的版块向来是代码冗余的代表作。直接把他改成<ul><li></li></ul>布局，不仅代码精简利于SEO，后期维护也简便了不少。大家可以尝试下把这个挂件修改成xhtml+css的布局方式。

多功能商品展示类似上面的商品展示，只是他多了很多展示方式和效果，例如多层展示就是类似TAB页的展示效果，还可以将图片的展示的方式放在文字的左边或者右边，多种展示方式可以展现出不同的页面效果。多功能的商品展示挂件的挂件路径为：plugins/widgets/goods /。这个挂件的的HTML相对复杂很多，修改起来非常不容易。如果想优化前端代码带来了不少麻烦，一般我只修改商品展示（goods_show）挂件，自己添加JS来实现效果，逻辑清晰，维护方便。

所有的挂件的模板被修改后，都需要清除缓存。不然刷新页面是看不到效果的。好了，今天就讲到这里——商品挂件的添加和修改。