product filter

xuqi
Commit 34c7779954846ed001e16bce42bb8c6660753720 1 parent c7fbfba8
Showing 9 changed files with 251 additions and 33 deletions
template/www.yohobuy.com/actions/product/index/list.phtml
web-static/font/iconfont.eot
web-static/font/iconfont.svg
web-static/font/iconfont.ttf
web-static/font/iconfont.woff
web-static/js/product/list.js
web-static/sass/index.scss
web-static/sass/product/_index.scss
yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
--- a/template/www.yohobuy.com/actions/product/index/list.phtml
View file @34c7779
+++ b/template/www.yohobuy.com/actions/product/index/list.phtml
View file @34c7779
@@ -73,8 +73,8 @@
                                     {{/each}}
                                 </p>
-                                <div id="brand-search" class="brand-search">
-                                    <input type="text">
+                                <div class="brand-search">
+                                    <input id="brand-search-input" type="text">
                                     <span class="btn">
                                         <i class="iconfont">&#xe611;</i>
                                     </span>
@@ -83,15 +83,17 @@
                             <ul class="panel-body check-container clearfix">
                                 {{# brandsShow}}
-                                    <li class="attr" data-href="{{href}}" data-id="{{id}}" data-index="{{index}}">
-                                        <span class="iconfont checkbox">&#xe613;</span>
+                                    <li class="attr" data-index="{{index}}" data-key="{{key}}">
+                                        <a href="{{href}}">
+                                            <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
                                             <span title="{{name}}">{{name}}</span>
+                                        </a>
                                     </li>
                                 {{/ brandsShow}}
                             </ul>
                             <div class="btns">
-                                <button class="multi-select-ok dis">确定</button>
+                                <button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
                                 <button class="multi-select-cancel">取消</button>
                             </div>
                         </div>
@@ -152,24 +154,23 @@
                     <span class="title">高级选项：</span>
                     <div class="attr-content">
-                        <ul class="clearfix">
+                        <ul class="clearfix senior-attr-wrap">
                             {{#each seniorChose}}
                                 <li class="attr">
                                     {{name}}
                                     <span class="iconfont"></span>
-                                </li>
-                            {{/each}}
-                        </ul>
-                        <div class="sub-senior-wrap hide">
-                            {{#each seniorChose}}
-                                <div class="sub check-container" data-attr="{{attr}}">
+                                    <div class="sub hide" data-attr="{{attr}}">
+                                        {{#if showMulti}}
                                             <span class="multi-select">多选 +</span>
-                                    <ul class="clearfix">
+                                        {{/if}}
+                                        <ul class="clearfix check-container">
                                             {{#each sub}}
                                                 <li class="attr">
-                                                <span class="iconfont checkbox">&#xe613;</span>
-                                                <span data-id="{{id}}" data-href="{{href}}">{{name}}</span>
+                                                    <a href="{{href}}">
+                                                        <span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
+                                                        <span>{{name}}</span>
+                                                    </a>
                                                 </li>
                                             {{/each}}
                                         </ul>
@@ -178,8 +179,9 @@
                                             <button class="multi-select-cancel">取消</button>
                                         </div>
                                     </div>
+                                </li>
                             {{/each}}
-                        </div>
+                        </ul>
                     </div>
                 </div>
             {{/if}}
--- a/web-static/font/iconfont.eot
View file @34c7779
+++ b/web-static/font/iconfont.eot
View file @34c7779
--- a/web-static/font/iconfont.svg
View file @34c7779
+++ b/web-static/font/iconfont.svg
View file @34c7779
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Wed Nov 25 18:16:02 2015
+Created by FontForge 20120731 at Thu Nov 26 10:18:10 2015
  By Ads
 </metadata>
 <defs>
@@ -69,6 +69,9 @@ d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
 d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
     <glyph glyph-name="uniE610" unicode="&#xe610;" 
 d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
+    <glyph glyph-name="uniE611" unicode="&#xe611;" 
+d="M892 41l-236 236q54 77 54 172q0 81 -39.5 150t-108.5 108.5t-150 39.5q-123 0 -210.5 -87t-87.5 -211t87.5 -211t210.5 -87q95 0 173 55l236 -236q16 -17 38 -18t37 14q10 10 12.5 23.5t-1.5 27t-15 24.5zM213 449q0 82 58.5 140.5t140.5 58.5t140.5 -58.5t58.5 -140.5
+t-58.5 -140.5t-140.5 -58.5t-140.5 58.5t-58.5 140.5z" />
     <glyph glyph-name="uniE612" unicode="&#xe612;" 
 d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
 M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
--- a/web-static/font/iconfont.ttf
View file @34c7779
+++ b/web-static/font/iconfont.ttf
View file @34c7779
--- a/web-static/font/iconfont.woff
View file @34c7779
+++ b/web-static/font/iconfont.woff
View file @34c7779
--- a/web-static/js/product/list.js
View file @34c7779
+++ b/web-static/js/product/list.js
View file @34c7779
@@ -17,10 +17,19 @@ moreUnicode = {
 var $brandDefault = $('.brand .default'),
     $brandPanel = $('.brand .brand-panel'),
-    $brandMore = $('#brand-more');
+    $brandAttrs = $('.brand .attr'),
+    $brandMore = $('#brand-more'),
+    $brandMulti = $('#brand-multi');
 var $brandMoreTxt, $brandMoreIcon;
+// var uriLoc = require('./uri');
+
+//清除checkbox选中状态
+function clearChecked($checkbox) {
+    $checkbox.removeClass('checked').html(checkUnicode.unchecked);
+}
+
 //显示更多品牌面板
 function brandShowMore() {
     $brandDefault.addClass('hide');
@@ -33,19 +42,36 @@ function brandHideMore() {
     $brandDefault.removeClass('hide');
 }
+//url构造&跳转
+function uriLoc(attr, val) {
+    var href = decodeURIComponent(window.location.search),
+        query = attr + '=' + val,
+        newHref;
+
+    if (href === '') {
+        newHref = '?' + query;
+    } else {
+        newHref = href + '&' + query;
+    }
+
+    window.location.href = newHref;
+}
+
 if ($brandMore.length > 0) {
     $brandMoreTxt = $brandMore.children('em');
     $brandMoreIcon = $brandMore.children('.iconfont');
 }
 //屏蔽筛选项双击文字选中
-$('.filter-box').on('selectstart', '.attr', function() {
+$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
     return false;
 });
 //checkbox
 $('.check-container').on('click', '.attr', function() {
-    var $check = $(this).find('.checkbox');
+    var $this = $(this),
+        $check = $this.find('.checkbox'),
+        $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
     $check.toggleClass('checked');
@@ -54,10 +80,18 @@ $('.check-container').on('click', '.attr', function() {
     } else {
         $check.html(checkUnicode.unchecked);
     }
+
+    //更新按钮状态
+    if ($check.hasClass('checked') ||
+        $this.siblings('.attr').find('.checked').length > 0) {
+        $btnOk.removeClass('dis');
+    } else {
+        $btnOk.addClass('dis');
+    }
 });
 //品牌多选
-$('#brand-multi').click(function() {
+$brandMulti.click(function() {
     if ($brandPanel.css('display') === 'none') {
         //显示品牌面板
@@ -86,7 +120,139 @@ $brandMore.click(function() {
     $(this).toggleClass('more');
 });
+//品牌索引
+$('.brands-index').on('click', 'span', function() {
+    var $this = $(this),
+        index = $this.data('index');
+
+    if ($this.index() === 0) {
+
+        //全部
+        $brandAttrs.removeClass('hide');
+    } else {
+        $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
+    }
+});
+
+//品牌搜索
+$('#brand-search-input').keyup(function() {
+    var val = $(this).val().toLowerCase();
+
+    if (val === '') {
+        $brandAttrs.removeClass('hide');
+    } else {
+        $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
+    }
+});
+
+$('#brand-multi-ok').click(function() {
+    var val = '';
+
+    if ($(this).hasClass('dis')) {
+        return;
+    }
+
+    $brandPanel.find('.checked').each(function() {
+        var id = $(this).data('id');
+
+        val += (val === '') ? id : (',' + id);
+    });
+
+    uriLoc('brand', val);
+});
+
+//多选取消(品牌/高级选项)
+$('.multi-select-cancel').click(function() {
+    var $panel = $(this).closest('.multi');
+
+    if ($panel.hasClass('brand-panel')) {
+        brandHideMore();
+
+        $brandMulti.removeClass('hide'); //显示多选按钮
+    }
+
+    $panel.removeClass('multi');
+    clearChecked($panel.find('.checkbox.checked')); //清除选中状态
+});
+
+//用户定义价格处理
+(function() {
+    var $udPrice = $('.ud-price-range'),
+        interReg = /^\d+$/,
+        $limit, $min, $max, $btn;
+
+    if ($udPrice.length === 0) {
+        return;
+    }
+
+    $limit = $udPrice.find('.limit');
+    $min = $limit.filter('.min');
+    $max = $limit.filter('.max');
+    $btn = $udPrice.find('.price-sure');
+
+    $limit.keyup(function() {
+        var min = $.trim($min.val()),
+            max = $.trim($max.val()),
+            isMinInt = interReg.test(min),
+            isMaxInt = interReg.test(max);
+
+        if (isMaxInt && (min === '' || isMinInt) ||
+            isMinInt && (max === '' || isMaxInt)
+            ) {
+            $btn.removeClass('hide');
+        } else {
+            $btn.addClass('hide');
+        }
+    });
+
+    //价格多项查询
+    $btn.click(function() {
+        var min = $.trim($min.val()),
+            max = $.trim($max.val()),
+            tmp;
+
+        //对于min大于max的情况，交换位置
+        if (min !== '' && max !== '' && +min > +max) {
+            tmp = max;
+            max = min;
+            min = tmp;
+        }
+
+        uriLoc('price', min + ',' + max);
+    });
+}());
+
+//高级选项
+$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
+    $(this).children('.sub').removeClass('hide');
+}).on('mouseleave', '.attr', function() {
+    $(this).children('.sub').addClass('hide');
+});
+
 //高级选项多选
-$('.sub-senior-wrap').on('click', '.multi-select', function() {
+$('.sub').on('click', '.multi-select', function() {
+    $(this).closest('.sub').addClass('multi');
+}).on('click', '.multi-select-ok', function() {
+    var $btn = $(this),
+        $sub = $btn.closest('.sub'),
+        val = '';
+    if ($btn.hasClass('dis')) {
+        return;
+    }
+
+    $sub.find('.checked').each(function() {
+        var id = $(this).data('id');
+
+        val += (val === '') ? id : (',' + id);
+    });
+
+    uriLoc($sub.data('attr'), val);
+});
+
+//当多选时阻止品牌和高级选项的默认跳转
+$('.brand, .senior').on('click', '.attr > a', function(e) {
+    if ($(this).closest('.multi').length > 0) {
+        e.preventDefault();
+    }
 });
--- a/web-static/sass/index.scss
View file @34c7779
+++ b/web-static/sass/index.scss
View file @34c7779
@@ -49,7 +49,7 @@ a {
 }
 .hide {
-    display: none;
+    display: none !important;
 }
 a:focus {
--- a/web-static/sass/product/_index.scss
View file @34c7779
+++ b/web-static/sass/product/_index.scss
View file @34c7779
@@ -90,6 +90,8 @@
             span {
                 margin: 0 5px;
+                cursor: pointer;
+                -moz-user-select: none;
                 &:first-child {
                     margin-left: 10px;
@@ -100,6 +102,7 @@
         .brand-search {
             float: left;
             height: 18px;
+            line-height: 18px;
             border: 1px solid #b0b0b0;
             margin-top: 5px;
             margin-left: 15px;
@@ -119,6 +122,7 @@
                 background: #b0b0b0;
                 color: #fff;
                 text-align: center;
+                cursor: default;
             }
         }
@@ -126,6 +130,7 @@
             padding: 15px 20px;
             margin-top: 5px;
             background: #f4f7f6;
+            min-height: 30px;
         }
     }
@@ -147,6 +152,11 @@
         color: #fff;
         font-size: 15px;
         margin-right: 15px;
+        cursor: pointer;
+
+        &.dis {
+            background: #ccc;
+        }
     }
     .ud-price-range {
@@ -182,20 +192,35 @@
         margin-right: 5px;
     }
-    .sub-senior-wrap {
+    .senior-attr-wrap {
         position: relative;
-        padding: 15px;
         .sub {
+            box-sizing: border-box;
+            position: absolute;
+            padding: 15px;
+            left: 0;
+            right: -16px;
+            background: #fff;
+            border: 1px solid #ccc;
+
+            ul {
                 max-width: 950px;
             }
+            &.multi .multi-select {
+                display: none;
+            }
+
             .multi-select {
                 position: absolute;
-            top: 15px;
+                top: 20px;
                 right: 15px;
             }
         }
+    }
+
+
     .checkbox {
         display: none;
--- a/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
View file @34c7779
+++ b/yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
View file @34c7779
@@ -107,31 +107,36 @@ class IndexController extends AbstractAction
                             'id' => '1',
                             'href' => '',
                             'index' => '0-9',
-                            'name' => '5cm'
+                            'name' => '5cm',
+                            'key' => '5cm'
                         ),
                         array(
                             'id' => '2',
                             'href' => '',
                             'index' => 'k',
-                            'name' => 'KTZ'
+                            'name' => 'KTZ',
+                            'key' => 'ktz'
                         ),
                         array(
                             'id' => '3',
                             'href' => '',
                             'index' => 't',
-                            'name' => 'Tapenade特芙娜'
+                            'name' => 'Tapenade特芙娜',
+                            'key' => 'tapenade特芙娜'
                         ),
                         array(
                             'id' => '4',
                             'href' => '',
                             'index' => 'j',
-                            'name' => '金银帝国Imperial Taels'
+                            'name' => '金银帝国Imperial Taels',
+                            'key' => '金银帝国imperial taels'
                         ),
                         array(
                             'id' => '5',
                             'href' => '',
                             'index' => 'a',
-                            'name' => 'ABLE JEANS'
+                            'name' => 'ABLE JEANS',
+                            'key' => 'able jeans'
                         )
                     )
                 ),
@@ -171,18 +176,35 @@ class IndexController extends AbstractAction
                     array(
                         'attr' => 'style',
                         'name' => '风格',
+                        'showMulti' => true,
                         'sub' => array(
                             array(
-                                'id' => '',
+                                'id' => '1',
                                 'href' => '',
                                 'name' => '街头'
                             ),
                             array(
-                                'id' => '',
+                                'id' => '2',
                                 'href' => '',
                                 'name' => '简约'
                             )
                         )
+                    ),
+                    array(
+                        'attr' => 'weather',
+                        'name' => '适用季节',
+                        'sub' => array(
+                            array(
+                                'id' => '1',
+                                'href' => '',
+                                'name' => '春天'
+                            ),
+                            array(
+                                'id' => '2',
+                                'href' => '',
+                                'name' => '夏天'
+                            )
+                        )
                     )
                 )
             )