chenchao / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 2ee05ae74ada25a18243ba13a9181fc461f29890 1 parent 9adf20be

product seach/filter no-result

Inline Side-by-side
Showing 9 changed files with 148 additions and 59 deletions
@@ -297,6 +297,9 @@ @@ -297,6 +297,9 @@
297 } 297 }
298 ] 298 ]
299 } 299 }
  300 +### 无搜索/筛选结果提示
  301 +通过**goods**字段控制页面相关元素的渲染与否，若无结果，不要传goods字段
  302 +无搜索结果必须传递搜索的*searchActionUrl*，比如：search.yohobuy.com；可选字段为*keyWord*
300 303
301 ### 标准页面内容 304 ### 标准页面内容
302 305
@@ -462,12 +465,8 @@ @@ -462,12 +465,8 @@
462 href: '' 465 href: ''
463 } 466 }
464 ], 467 ],
465 - fivePerLine: true,  
466 - sixPerLineHref: '',  
467 - //or  
468 - sixPerLine: true,  
469 - fivePerLineHref: '',  
470 468
  469 + //重要提示：页面筛选无结果时，接下来的参数不用传;
471 countPerPage => 120, 470 countPerPage => 120,
472 pageCounts => [ 471 pageCounts => [
473 { 472 {
@@ -482,8 +481,10 @@ @@ -482,8 +481,10 @@
482 pageCount: 30, 481 pageCount: 30,
483 preHref: '', //若当前为第一页，不传此参数 482 preHref: '', //若当前为第一页，不传此参数
484 nexHref: '' //若当前为最后一页，不传此参数 483 nexHref: '' //若当前为最后一页，不传此参数
  484 + //重要提示END
485 }, 485 },
486 - 486 +
  487 + //重要提示：若无搜索或者筛选结果，则不传goods，totalCount和pager也都不传字段
487 goods: [ 488 goods: [
488 { 489 {
489 ...//good 490 ...//good
@@ -492,7 +493,13 @@ @@ -492,7 +493,13 @@
492 493
493 totalCount: 333, //共多少件商品 494 totalCount: 333, //共多少件商品
494 pager: '', //右下角分页HTML 495 pager: '', //右下角分页HTML
495 - 496 +
  497 + //若为搜索导致的无结果，则传递关键词字段;筛选导致的不传
  498 + keyWord: '...',
  499 + searchActionUrl: ''
  500 +
  501 + //重要提示END
  502 +
496 //最近浏览<搜索无此内容> 503 //最近浏览<搜索无此内容>
497 latestWalk: [ 504 latestWalk: [
498 { 505 {
  1 +<div class="no-result">
  2 + <p class="no-title">
  3 + 抱歉！没有找到{{# keyWord}}与"<b class="keyword">{{.}}</b>"{{/ keyWord}}相关的商品
  4 + </p>
  5 + <div class="search-again clearfix">
  6 + <form method="GET" action="{{searchActionUrl}}">
  7 + <input id="no-result-input" name="query" type="text" placeholder="换个关键词试试">
  8 + <span id="search-again-btn">
  9 + <i class="iconfont">&#xe611;</i>
  10 + </span>
  11 + </form>
  12 + </div>
  13 + <p class="no-tip">建议您：看看输入的文字是否有误 / 减少分类条件限制 / 重新搜索</p>
  14 +</div>
@@ -35,61 +35,67 @@ @@ -35,61 +35,67 @@
35 </a> 35 </a>
36 {{/ checks}} 36 {{/ checks}}
37 37
38 - <div class="pager-wrap">  
39 - <div class="page-count">  
40 - <span id="count-per-page">  
41 - {{countPerPage}}  
42 - <i class="iconfont">&#xe604;</i>  
43 - </span>  
44 - 每页  
45 - <ul>  
46 - {{# pageCounts}}  
47 - <li>  
48 - <a href="{{href}}">{{count}}</a>  
49 - </li>  
50 - {{/ pageCounts}}  
51 - </ul>  
52 - </div> 38 + {{#if ../goods}}
  39 + <div class="pager-wrap">
  40 + <div class="page-count">
  41 + <span id="count-per-page">
  42 + {{countPerPage}}
  43 + <i class="iconfont">&#xe604;</i>
  44 + </span>
  45 + 每页
  46 + <ul>
  47 + {{# pageCounts}}
  48 + <li>
  49 + <a href="{{href}}">{{count}}</a>
  50 + </li>
  51 + {{/ pageCounts}}
  52 + </ul>
  53 + </div>
53 54
54 - <p class="pager">  
55 - {{#if preHref}}  
56 - <a href="{{preHref}}">  
57 - <span class="iconfont">&#xe615;</span>  
58 - </a>  
59 - {{^}}  
60 - <span class="dis-icon iconfont">&#xe615;</span>  
61 - {{/if}} 55 + <p class="pager">
  56 + {{#if preHref}}
  57 + <a href="{{preHref}}">
  58 + <span class="iconfont">&#xe615;</span>
  59 + </a>
  60 + {{^}}
  61 + <span class="dis-icon iconfont">&#xe615;</span>
  62 + {{/if}}
62 63
63 - <span>  
64 - <i>{{curPage}}</i>/{{pageCount}}  
65 - </span> 64 + <span>
  65 + <i>{{curPage}}</i>/{{pageCount}}
  66 + </span>
66 67
67 - {{#if nextHref}}  
68 - <a href="{{nextHref}}">  
69 - <span class="iconfont">&#xe601;</span>  
70 - </a>  
71 - {{^}}  
72 - <span class="dis-icon iconfont">&#xe601;</span>  
73 - {{/if}}  
74 - </p>  
75 - </div> 68 + {{#if nextHref}}
  69 + <a href="{{nextHref}}">
  70 + <span class="iconfont">&#xe601;</span>
  71 + </a>
  72 + {{^}}
  73 + <span class="dis-icon iconfont">&#xe601;</span>
  74 + {{/if}}
  75 + </p>
  76 + </div>
  77 + {{/if}}
76 </div> 78 </div>
77 {{/ opts}} 79 {{/ opts}}
78 80
79 -<div class="goods-container clearfix">  
80 - {{#each goods}}  
81 - {{> product/good}}  
82 - {{/each}}  
83 - <div class="good-item-wrapper">  
84 - <div class="good-info-main"></div>  
85 - <div class="good-select-color"></div> 81 +{{#if goods}}
  82 + <div class="goods-container clearfix">
  83 + {{#each goods}}
  84 + {{> product/good}}
  85 + {{/each}}
  86 + <div class="good-item-wrapper">
  87 + <div class="good-info-main"></div>
  88 + <div class="good-select-color"></div>
  89 + </div>
86 </div> 90 </div>
87 -</div>  
88 91
89 -<div class="product-pager clearfix">  
90 - <span class="total">{{opts.curPage}} - {{opts.pageCount}} / 共{{totalCount}}件商品</span> 92 + <div class="product-pager clearfix">
  93 + <span class="total">{{opts.curPage}} - {{opts.pageCount}} / 共{{totalCount}}件商品</span>
91 94
92 - <div class="pager">  
93 - {{{pager}}} 95 + <div class="pager">
  96 + {{{pager}}}
  97 + </div>
94 </div> 98 </div>
95 -</div>  
  99 +{{^}}
  100 + {{> product/no-result}}
  101 +{{/if}}
@@ -7,6 +7,8 @@ @@ -7,6 +7,8 @@
7 var $ = require('yoho.jquery'), 7 var $ = require('yoho.jquery'),
8 lazyLoad = require('yoho.lazyload'); 8 lazyLoad = require('yoho.lazyload');
9 9
  10 +require('yoho.placeholder');
  11 +
10 require('./filter'); 12 require('./filter');
11 13
12 require('./sort-pager'); 14 require('./sort-pager');
@@ -17,6 +19,15 @@ require('./product'); @@ -17,6 +19,15 @@ require('./product');
17 //最近浏览的商品Lazyload 19 //最近浏览的商品Lazyload
18 lazyLoad($('.latest-walk .lazy')); 20 lazyLoad($('.latest-walk .lazy'));
19 21
  22 +//无搜索结果
  23 +if ($('.no-result').length > 0) {
  24 + $('#no-result-input').placeholder();
  25 + $('#search-again-btn').click(function() {
  26 + $(this).closest('form').submit();
  27 + });
  28 +}
  29 +
  30 +//NEW页面图片轮播切换
20 (function() { 31 (function() {
21 var $brands = $('.brands'); 32 var $brands = $('.brands');
22 33
@@ -16,7 +16,8 @@ @@ -16,7 +16,8 @@
16 "yoho.lazyload": "1.0.0", 16 "yoho.lazyload": "1.0.0",
17 "yoho.handlebars": "3.0.3", 17 "yoho.handlebars": "3.0.3",
18 "yoho.jquery": "1.8.3", 18 "yoho.jquery": "1.8.3",
19 - "json2": "1.0.0" 19 + "json2": "1.0.0",
  20 + "yoho.placeholder": "0.0.1"
20 }, 21 },
21 "devDependencies": { 22 "devDependencies": {
22 "expect.js": "0.3.1" 23 "expect.js": "0.3.1"
1 -@import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content"; 1 +@import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content", "no-result";
2 2
3 .product-page { 3 .product-page {
4 .product-pager { 4 .product-pager {
  1 +.product-page .no-result {
  2 + border: 1px solid #eaeceb;
  3 + padding: 60px 0;
  4 + text-align: center;
  5 + margin-bottom: 20px;
  6 +
  7 + .no-title {
  8 + font-size: 16px;
  9 + }
  10 +
  11 + .keyword {
  12 + color: #ee0011;
  13 + }
  14 +
  15 + .search-again {
  16 + width: 490px;
  17 + margin: 15px auto;
  18 +
  19 + input {
  20 + float: left;
  21 + width: 380px;
  22 + height: 18px;
  23 + padding: 15px 5px;
  24 + border: 10px solid #343434;
  25 + color: #333;
  26 + outline: none;
  27 + }
  28 +
  29 + span {
  30 + float: left;
  31 + display: block;
  32 + width: 80px;
  33 + height: 24px;
  34 + line-height: 24px;
  35 + padding: 22px 0;
  36 + background: #343434;
  37 + vertical-align: middle;
  38 + color: #fff;
  39 + }
  40 + .iconfont {
  41 + font-size: 26px;
  42 + }
  43 + }
  44 +
  45 + .no-tip {
  46 + font-size: 12px;
  47 + color: #999;
  48 + }
  49 +}
@@ -290,8 +290,6 @@ class IndexController extends AbstractAction @@ -290,8 +290,6 @@ class IndexController extends AbstractAction
290 'href' => '' 290 'href' => ''
291 ) 291 )
292 ), 292 ),
293 - 'fivePerLine' => true,  
294 - 'sixPerLineHref' => '',  
295 'countPerPage' => '120', 293 'countPerPage' => '120',
296 'pageCounts' => array( 294 'pageCounts' => array(
297 array( 295 array(
@@ -311,6 +309,9 @@ class IndexController extends AbstractAction @@ -311,6 +309,9 @@ class IndexController extends AbstractAction
311 'pageCount' => 30, 309 'pageCount' => 30,
312 'nextHref' => 'hello' 310 'nextHref' => 'hello'
313 ), 311 ),
  312 + // 无搜索结果字段
  313 + // 'keyWord' => '123'
  314 + // 'searchActionUrl' => ''
314 'goods' => array( 315 'goods' => array(
315 0 => array( 316 0 => array(
316 'tags' => array( 317 'tags' => array(