fe / 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 @@
}
]
}
### 无搜索/筛选结果提示
通过**goods**字段控制页面相关元素的渲染与否，若无结果，不要传goods字段
无搜索结果必须传递搜索的*searchActionUrl*，比如：search.yohobuy.com；可选字段为*keyWord*
### 标准页面内容
... ... @@ -462,12 +465,8 @@
href: ''
}
],
fivePerLine: true,
sixPerLineHref: '',
//or
sixPerLine: true,
fivePerLineHref: '',
//重要提示：页面筛选无结果时，接下来的参数不用传;
countPerPage => 120,
pageCounts => [
{
... ... @@ -482,8 +481,10 @@
pageCount: 30,
preHref: '', //若当前为第一页，不传此参数
nexHref: '' //若当前为最后一页，不传此参数
//重要提示END
},
//重要提示：若无搜索或者筛选结果，则不传goods，totalCount和pager也都不传字段
goods: [
{
...//good
... ... @@ -492,7 +493,13 @@
totalCount: 333, //共多少件商品
pager: '', //右下角分页HTML
//若为搜索导致的无结果，则传递关键词字段;筛选导致的不传
keyWord: '...',
searchActionUrl: ''
//重要提示END
//最近浏览<搜索无此内容>
latestWalk: [
{
... ...
<div class="no-result">
<p class="no-title">
抱歉！没有找到{{# keyWord}}与"<b class="keyword">{{.}}</b>"{{/ keyWord}}相关的商品
</p>
<div class="search-again clearfix">
<form method="GET" action="{{searchActionUrl}}">
<input id="no-result-input" name="query" type="text" placeholder="换个关键词试试">
<span id="search-again-btn">
<i class="iconfont">&#xe611;</i>
</span>
</form>
</div>
<p class="no-tip">建议您：看看输入的文字是否有误 / 减少分类条件限制 / 重新搜索</p>
</div>
\ No newline at end of file
... ...
... ... @@ -35,61 +35,67 @@
</a>
{{/ checks}}
<div class="pager-wrap">
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
</ul>
</div>
{{#if ../goods}}
<div class="pager-wrap">
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
</ul>
</div>
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
{{#if nextHref}}
<a href="{{nextHref}}">
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
{{#if nextHref}}
<a href="{{nextHref}}">
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
{{/if}}
</div>
{{/ opts}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
{{#if goods}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
</div>
<div class="product-pager clearfix">
<span class="total">{{opts.curPage}} - {{opts.pageCount}} / 共{{totalCount}}件商品</span>
<div class="product-pager clearfix">
<span class="total">{{opts.curPage}} - {{opts.pageCount}} / 共{{totalCount}}件商品</span>
<div class="pager">
{{{pager}}}
<div class="pager">
{{{pager}}}
</div>
</div>
</div>
\ No newline at end of file
{{^}}
{{> product/no-result}}
{{/if}}
\ No newline at end of file
... ...
... ... @@ -7,6 +7,8 @@
var $ = require('yoho.jquery'),
lazyLoad = require('yoho.lazyload');
require('yoho.placeholder');
require('./filter');
require('./sort-pager');
... ... @@ -17,6 +19,15 @@ require('./product');
//最近浏览的商品Lazyload
lazyLoad($('.latest-walk .lazy'));
//无搜索结果
if ($('.no-result').length > 0) {
$('#no-result-input').placeholder();
$('#search-again-btn').click(function() {
$(this).closest('form').submit();
});
}
//NEW页面图片轮播切换
(function() {
var $brands = $('.brands');
... ...
... ... @@ -16,7 +16,8 @@
"yoho.lazyload": "1.0.0",
"yoho.handlebars": "3.0.3",
"yoho.jquery": "1.8.3",
"json2": "1.0.0"
"json2": "1.0.0",
"yoho.placeholder": "0.0.1"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
@import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content";
@import "search", "list", "new-sale", "filter-box", "sort-pager", "good", "latest-walk", "left-content", "no-result";
.product-page {
.product-pager {
... ...
.product-page .no-result {
border: 1px solid #eaeceb;
padding: 60px 0;
text-align: center;
margin-bottom: 20px;
.no-title {
font-size: 16px;
}
.keyword {
color: #ee0011;
}
.search-again {
width: 490px;
margin: 15px auto;
input {
float: left;
width: 380px;
height: 18px;
padding: 15px 5px;
border: 10px solid #343434;
color: #333;
outline: none;
}
span {
float: left;
display: block;
width: 80px;
height: 24px;
line-height: 24px;
padding: 22px 0;
background: #343434;
vertical-align: middle;
color: #fff;
}
.iconfont {
font-size: 26px;
}
}
.no-tip {
font-size: 12px;
color: #999;
}
}
\ No newline at end of file
... ...
... ... @@ -290,8 +290,6 @@ class IndexController extends AbstractAction
'href' => ''
)
),
'fivePerLine' => true,
'sixPerLineHref' => '',
'countPerPage' => '120',
'pageCounts' => array(
array(
... ... @@ -311,6 +309,9 @@ class IndexController extends AbstractAction
'pageCount' => 30,
'nextHref' => 'hello'
),
// 无搜索结果字段
// 'keyWord' => '123'
// 'searchActionUrl' => ''
'goods' => array(
0 => array(
'tags' => array(
... ...