完善商品分类导航


                                                    完善商品分类导航
                                             作者:abin    时间:2004.10.14   出处:http://blog.csdn.net/abinstudio

在上一次商品导航的分析(《建立合理的商品类与导航类》)中建立了两级的商品分类与一级的导航目录,从商品的分类来考虑,已经实现了三级分类。但是为了满足更清晰的导航案例三级分类导航明显是不够的。下面用一个例子来说明:

“电脑综合 >> 电脑整机 >> 笔记本电脑 ”

“电脑综合” 是导航类,  “电脑整机”是主类(下面不包含任何商品) “笔记本电脑”是次类(商品所在目录)
由于开发的网站面对中小型电子商务公司,他们商品有多也有少,还有另外一种情况就是这些电子商务公司有些类别的商品很多,而有些类别的确很少。如果一个次级目录下只有少量的几个或者十几个商品三级分类足以满足要求,但是如果有几十件或者几百件那么三级分类就不能满足需求,客户会因为找不到自己想要的商品而退出网站,这是我们所不期望发生的。
    要解决上面的问题有两种方法,1.是用站内搜索、2.是添加第四级分类。我们这里先不讨论站内搜索,因为站内搜索是一个电子商务网站必备的,用它来弥补以上不足有点差强人意。因此只有添加第四分类。从灵活方面考虑第四级分类不能固定(因为有的类商品很少,没有必要分四级),也就是说不能规定死每一个分类都要求有四级,这样违背了设计原则--灵活性。也许你会觉得很简单,那就是在分类的时候进行规划,多商品的类分四级,少商品的类分三级,这种想法是对的,但是商品是变化的,这个时间这样的商品多,随着公司的发展可能原来不多商品的类商品也变的很多,这个时候怎么办?由于原来是分三级,现在要把所有该类商品重新分四级。这样还是违背了设计原则--灵活性,这是一个长远角度的灵活性。
    先分析一下三级目录缺乏什么“电脑综合 >> 电脑整机 >> 笔记本电脑 ”,这个三级目录中最低一级目录是“笔记本电脑”,如果要分第四级以什么来分好?价格?CPU配置?品牌?……,经过考虑发现品牌是所有商品的共性,这种共性不光存在与“笔记本电脑”中,还同样存在与其他的商品中,如“打印机”“手机”等。找到共性后分析如何使用这个类,如果是简单的添加到数据库的商品二级分类中,使原来的二级分类变成三级分类这样上一篇文章就白讨论了,完全破坏了商品目录的性能与可扩展性。因此这里不打算把第四级目录添加到二级分类的表中,而是从新创建一个叫ProductBrands表,这个表中存储商品的品牌,表结构如下:

原商品二级分类表:
--------------------------------------------------------------------------------
 CategoryId           Description          ParentCategoryId
     1                     电脑整机                    NULL
     2                    笔记本电脑                    1
--------------------------------------------------------------------------------

添加的表:

ProductBrands:
--------------------------------------------------------------------------------
ProductId         CategoryId               BrandValue             
     1                           2                      联想                   
     2                           2                      方正
     3                           2                      紫光

--------------------------------------------------------------------------------
PK:ProductId,CategoryId

有了上面的表以后读取一个商品类的时候就可以检索这个表,读取改类下所有的商品品牌,将会有如下效果:

            电脑综合 >> 电脑整机 >> 笔记本电脑 >> 联想
                                                                              方正
                                                                              紫光

关于品牌可以读取到DropDownList中,这样客户就可以随时切换他们需要寻找的品牌,当然也可以建立一个按品牌分类的导航栏,假设在读取“笔记本电脑”类时候先预读取所有的该类商品(各个品牌都有),然后客户自行在品牌导航栏上选择需要查看的具体品牌,这样就可以过滤掉不需要的品牌信息。这样做满足了“冲动消费型”的客户,因为他们寻找商品没有目的,只是突然看到喜欢的没有过思考就买了,也满足了“谨慎消费型”客户,因为他们可以很仔细的,快速的找到他们所要找的商品,而不会迷失在商品堆里。


总结,结合《建立合理的商品类与导航类》与这次的完善,基本建立了一个强壮的电子商务系统导航,当然客户总是挑剔的,商品也是多样性的,一些特殊商品的导航设计需要特速对待,也不能按部就班。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现了首页商品分类,广告栏,分类菜单 <ion-view view-title="阿哥汇商城" hide-nav-bar="true"> <ion-header-bar align-title="left" class="bar-balanced"> <div class="buttons"> <!--ui-sref="category"--> <div class="button icon-left ion-navicon button-clear" ng-click="toggleCategory()"></div> <!--<div class="button icon-left ion-navicon button-clear" ng-click="modal.show()"></div>--> </div> <label class="item-input-wrapper" ui-sref="search" style="height: 33px;"> <i class="icon ion-ios-search placeholder-icon" style="margin: 20px 0px;color: #BBBBBB"></i> <input class="small-text" type="search" ng-model="searchStr" style="background: transparent;width: 100%" placeholder="请输入商品名称"> </label> <div class="buttons"> <div class="button icon-right ion-ios-cart-outline button-clear" ng-click="toCart()"></div> <i class="badge icon-right assertive" style="height:15px;font-size: 10px;margin-left: -10px;top: -8px;padding:0px 5px;float: inherit;background: #FFFFFF" ng-show="true">{{cartSize}}</i> </div> </ion-header-bar> <ion-content scroll="false" ng-show="isCategory" style="height:100%;background-color: rgba(0, 0, 0, 0.50);z-index: 900"> <div style="height: 85%;margin-bottom: 50px;"> <div class="row" style="width: 100%;height:100%;margin: 0;padding: 0;"> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0"> <div class="item item-icon-right item-icon-left" ng-repeat="item in categoryAndProducts" ng-click="selectItem(item, $index)" ng-class="{active: activeItem == item}"> <i class="icon balanced" ng-class="iconArr[$index]"></i> {{item.cat_name}} <i class="icon ion-ios-arrow-right balanced" style="font-size: 24px;align-items:center"></i> </div> </div> </div> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0;background: #dedede"> <div class="item active-item item-button-right" ng-repeat="cat in subCategory" ng-click="selectCategory(cat.cat_id)" style="background: #dedede"> {{cat.cat_name}} <button class="button button-clear">{{cat.goods_total}}ddd</button> </div> </div> </div> </div> </div> </ion-content> <ion-content class="false" overflow-scroll="true" style="overflow: hidden;"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" spinner="android"></ion-refresher> <ion-slide-box active-slide="myActiveSlide" auto-play="true" does-continue="true" show-pager="true" slide-interval="2000" ng-if="ads" style="height: 108px;"> <ion-slide ng-repeat="ad in ads"> <div class="box blue"> <!--<h1>BLUE</h1>--> <img src="{{APPCONFIG.picURL}}/{{ad.src}}" style="width: 100%;height:inherit"> </div> </ion-slide> </ion-slide-box> <ion-list style=""> <ion-item style="padding: 0px;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" onclick="save($index)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[0]}}"></i> <div class="padding" style="width: 100%"><h2 style="font-size: 20px;color:{{colors[0]}}">热门店铺</h2></div> 更多<i class="icon icon-right ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-wrap" style="height:auto; width: 100%;padding: 0;margin-top: 0 "> <div class="col col-33 img" ng-repeat="image in hotsuppliers" style="margin: 0px;padding: 7px auto;height: 60px"> <img ng-src="{{APPCONFIG.picURL}}{{image.logo}}" style="height: 45px;width: 90px"/> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> <ion-item collection-repeat="item in categoryAndProducts" style="padding: 0;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" ng-click="selectCategory(item.cat_id)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[(item.cat_id%5)]}}"></i> <div class="padding" style="width: 100%"><h2 style="color: {{colors[(item.cat_id%5)]}};font-size: 20px"> {{item.cat_name}}</h2></div> 更多<i class="icon icon-left ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-center" style="padding: 0;margin-top: 0"> <div class="col-33" ng-repeat="product in item.goods" style="padding: 5px" ng-click="goProductDetail(product.goods_id)"> <div class="img" style="width: 100%"> <img class="item-product-img" ng-src="{{APPCONFIG.picURL}}/{{product.goods_thumb}}" style="width: 90px;height: 90px"> <div class="desc" style="text-overflow: ellipsis;white-space:nowrap; overflow:hidden;font-size: 16px;margin-top: 5px"> {{product.goods_name}} </div> <div style="background: #DEDFE0;height: 1px;margin: 2px"></div> <div class="desc assertive" style="text-overflow: ellipsis;overflow:hidden;font-size: 16px"><b>{{product.price | currency:"¥"}}</b></div> </div> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> </ion-list> </ion-content>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值