From 67b7729e66394d102a2c16008a6bb72971c11b82 Mon Sep 17 00:00:00 2001
From: lore-w <metro-cpu@hotmail.com>
Date: Sun, 6 Dec 2015 15:16:24 +0800
Subject: [PATCH] 商品列表左侧分类导航/数据结构
---
docs/web-data-structure.md | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
template/www.yohobuy.com/actions/product/index/list.phtml | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
web-static/config.rb | 2 +-
web-static/js/product/product.js | 18 ++++++++++++++----
web-static/sass/product/_list.scss | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
6 files changed, 378 insertions(+), 6 deletions(-)
diff --git a/docs/web-data-structure.md b/docs/web-data-structure.md
index bec2236..e2ccc87 100644
--- a/docs/web-data-structure.md
+++ b/docs/web-data-structure.md
@@ -251,6 +251,66 @@
preHref: '', //若当前为第一页，不传此参数
nexHref: '' //若当前为最后一页，不传此参数
},
+ // 商品导航列表
+ allSort: {
+ //全部品类
+ updateNum: 2, //更新总数
+ list: [
+ {
+ name: 'AA', //一级分类
+ num: 12 //一级分类更新数目
+ childList: [
+ {
+ name: 'AAA', //二级分类
+ href: '##', //二级分类跳转链接
+ num: 12 //二级分类更新数目
+ }
+ ]
+ }
+ ]
+ },
+ advNav: {
+ //图片导航
+ advNavTitle: 'AA', 图片导航标题
+ list: [
+ {
+ href: '',
+ src: '' // 图片地址
+ }
+ ]
+ },
+ advPic: {
+ //图片banner
+ advPicTitle: 'AA', 图片banner标题
+ list: [
+ {
+ href: '',
+ src: '' // 图片地址
+ }
+ ]
+ },
+ newSales: {
+ //一周新品上架
+ updateNum: 123,
+ list: [
+ {
+ name: 'AAA',
+ href: '',
+ num: 12,
+ }
+ ]
+ },
+ allDiscount: {
+ //全部折扣
+ updateNum: 111,
+ list: [
+ {
+ name: 'VVV',
+ href: '##',
+ num: 11
+ }
+ ]
+ }
//商品列表
goods: [
//商品信息
diff --git a/template/www.yohobuy.com/actions/product/index/list.phtml b/template/www.yohobuy.com/actions/product/index/list.phtml
index 1cf13d0..27fa41f 100644
--- a/template/www.yohobuy.com/actions/product/index/list.phtml
+++ b/template/www.yohobuy.com/actions/product/index/list.phtml
@@ -30,7 +30,75 @@
{{{brandIntro}}}
</div>
{{^}}
- <div class="list-left pull-left"></div>
+ <div class="list-left pull-left">
+ {{# allDiscount}}
+ <div class="sort-container">
+ <ul class="sort-child-list new-sale">
+ <li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li>
+ {{#each list}}
+ <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
+ {{/each}}
+ </ul>
+ </div>
+ {{/ allDiscount}}
+
+ {{# newSales}}
+ <div class="sort-container">
+ <h2>一周新品上架<span>{{updateNum}}</span></h2>
+ <ul class="sort-child-list new-sale">
+ {{#each list}}
+ <li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
+ {{/each}}
+ </ul>
+ </div>
+ {{/ newSales}}
+
+ {{# allSort}}
+ <div class="sort-container">
+ <h2>全部品类<span>{{updateNum}}</span></h2>
+ <ul>
+ {{#each list}}
+ <li class="product-list-nav">
+ <h3>
+ <span class="icon-triangle"></span>
+ {{name}}<span>{{num}}</span>
+ </h3>
+ <ul class="sort-child-list">
+ {{#each childList}}
+ <li>
+ <a href="{{href}}">{{name}}</a>
+ <span>{{num}}</span>
+ </li>
+ {{/each}}
+ </ul>
+ </li>
+ {{/each}}
+ </ul>
+ </div>
+ {{/ allSort}}
+
+ {{# advNav}}
+ {{# advNavTitle}}
+ <h2 class="nav-pic-title">{{.}}</h2>
+ {{/advNavTitle}}
+ <ul class="pic-nav">
+ {{#each list}}
+ <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
+ {{/each}}
+ </ul>
+ {{/advNav}}
+
+ {{#advPic}}
+ {{# advPicTitle}}
+ <h2 class="nav-pic-title">{{.}}</h2>
+ {{/ advPicTitle}}
+ <ul class="pic-nav">
+ {{#each list}}
+ <li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
+ {{/each}}
+ </ul>
+ {{/advPic}}
+ </div>
<div class="list-right pull-right">
{{# shopEntry}}
<div class="shop-entry clearfix">
diff --git a/web-static/config.rb b/web-static/config.rb
index a3147b0..8b7dd5b 100644
--- a/web-static/config.rb
+++ b/web-static/config.rb
@@ -14,7 +14,7 @@ fonts_dir = "font"
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
-# sourcemap = true
+sourcemap = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
diff --git a/web-static/js/product/product.js b/web-static/js/product/product.js
index db9d40c..f43927e 100644
--- a/web-static/js/product/product.js
+++ b/web-static/js/product/product.js
@@ -11,9 +11,10 @@ var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
- $goodSelectColor = $goodsContainer.find('.good-select-color');
+ $goodSelectColor = $goodsContainer.find('.good-select-color'),
+ $productListNav = $('.product-list-nav');
-var MouseOver = productEvent($goodItem, 5);
+var productList = productEvent($goodItem, 5);
/**
* @description 构造商品颜色列表的html结构
@@ -59,7 +60,7 @@ function createColorList(data) {
};
}
-MouseOver.addHandler('MouseEnter', function(event) {
+productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, //list的右边距
itemMb = 35, //list的下边距
@@ -88,7 +89,7 @@ MouseOver.addHandler('MouseEnter', function(event) {
$goodSelectColor.append($(ulStr));
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
- //
+ //todo
diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth;
@@ -110,3 +111,12 @@ $goodItemWrapper.mouseleave(function() {
display: 'none'
});
});
+
+// 左侧导航
+$productListNav.click(function() {
+ if ($(this).hasClass('active')) {
+ $(this).removeClass('active');
+ } else {
+ $(this).addClass('active');
+ }
+});
\ No newline at end of file
diff --git a/web-static/sass/product/_list.scss b/web-static/sass/product/_list.scss
index a4ad752..aeb57b7 100644
--- a/web-static/sass/product/_list.scss
+++ b/web-static/sass/product/_list.scss
@@ -1,6 +1,112 @@
.product-list-page {
.list-left {
width: 160px;
+
+ .sort-container {
+ width: 100%;
+ font-size: 12px;
+ border-bottom: 1px solid #ebebeb;
+ padding-bottom: 10px;
+ margin-bottom: 10px;
+
+ h2 {
+ height: 28px;
+ line-height: 28px;
+ color: #222;
+ font-weight: bold;
+ position: relative;
+
+ span {
+ color: #bbb;
+ padding-left: 5px;
+ }
+ }
+
+ .product-list-nav {
+ h3 {
+ height: 28px;
+ line-height: 28px;
+ color: #222;
+ font-weight: bold;
+ position: relative;
+ text-indent: 10px;
+ cursor: pointer;
+
+ span {
+ color: #bbb;
+ padding-left: 5px;
+
+ &.icon-triangle {
+ display: inline-block;
+ padding-left: 0;
+ width: 0;
+ height: 0;
+ border-top: 6px solid #fff;
+ border-left: 6px solid #000;
+ border-bottom: 6px solid #fff;
+ position: absolute;
+ top: 50%;
+ margin-top: -6px;
+ left: 0;
+ @include transition(transform .3s)
+ }
+ }
+ }
+
+ &.active {
+ h3 {
+ span {
+ &.icon-triangle {
+ @include rotate(90deg)
+ }
+ }
+ }
+ ul.sort-child-list {
+ display: block;
+ }
+ }
+ }
+
+ ul.sort-child-list {
+ display: none;
+
+ &.new-sale {
+ display: block;
+ }
+ li {
+ color: #bbb;
+
+ span {
+ padding-left: 5px;
+ }
+ }
+ a {
+ color: #666;
+ padding-left: 10px;
+ height: 22px;
+ line-height: 22px;
+ }
+ }
+ }
+
+ .nav-pic-title {
+ height: 35px;
+ line-height: 35px;
+ color: #000;
+ font-weight: bold;
+ border-bottom: 1px solid #ebebeb;
+ font-size: 12px;
+ }
+
+ .pic-nav {
+ display: block;
+
+ li, img {
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ }
+ }
}
.list-right {
diff --git a/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php b/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
index dc7bfe6..817cc81 100644
--- a/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
+++ b/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
@@ -763,6 +763,134 @@ class IndexController extends AbstractAction
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
)
+ ),
+ 'allSort' => array(
+ 'updateNum' => 145,
+ 'list' => array(
+ array(
+ 'name' => '裙装',
+ 'num' => '10',
+ 'childList' => array(
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ )
+ )
+ ),
+ array(
+ 'name' => '裙装BBB',
+ 'num' => '10',
+ 'childList' => array(
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '全身裙装',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ )
+ )
+ )
+ )
+ ),
+ 'advNav' => array(
+ 'advNavTitle' => 'AAAA',
+ 'list' => array(
+ array(
+ 'href' => 'http://adidas.yohobuy.com/?folder=1366',
+ 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
+ ),
+ array(
+ 'href' => 'http://adidas.yohobuy.com/?folder=1366',
+ 'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
+ )
+ )
+ ),
+ 'advPic' => array(
+ 'advPicTitle' => false,
+ 'list' => array(
+ array(
+ 'href' => 'http://adidas.yohobuy.com/?folder=1366',
+ 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
+ ),
+ array(
+ 'href' => 'http://adidas.yohobuy.com/?folder=1366',
+ 'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
+ )
+ )
+ ),
+ 'newSales' => array(
+ 'updateNum' => 130,
+ 'list' => array(
+ array(
+ 'name' => '12月03日',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '12月03日',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '12月03日',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '12月03日',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ )
+ )
+ ),
+ 'allDiscount' => array(
+ 'updateNum' => 130,
+ 'list' => array(
+ array(
+ 'name' => '1~3折',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '4~6折',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ ),
+ array(
+ 'name' => '7折',
+ 'href' => 'http://adidas.yohobuy.com/?gender=1,3',
+ 'num' => '5'
+ )
+ )
)
)
);
--
libgit2 0.24.0