Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop

@@ -72,21 +72,7 @@
 
 
     //footer已登录
     //footer已登录
     {
     {
-        pageFooter: {
-            user: {
-                name: '',
-                url: '',
-                signoutUrl: ''
-            }
-        }
-    }
-
-    //footer未登录
-    {
-        pageFooter: {
-            loginUrl: '',
-            signupUrl: ''
-        }
+        pageFooter: true
     }
     }
 
 
 ### 筛选
 ### 筛选
@@ -737,4 +723,29 @@
                 ...
                 ...
         ]
         ]
         
         
+    }
+
+## 商品列表页
+    {
+        goodList: {
+            search: '', //是否显示搜索栏并指定初始值
+            brandWay: { //品牌入口
+                url: '',
+                thumb: '',
+                name: ''
+            },
+            brand: {
+                id: 0,
+                intro: '...'
+            },
+            new: [
+                {
+                    ... //商品信息
+                },
+                ...
+            ],
+            filter: {
+                .. //筛选数据结构
+            }
+        }
     }
     }

--Subproject commit 119c247f5cf929aa1e059e40609bb16dd6b58f05
++Subproject commit 75bbc3b075de19f239532f60c5995d06c5f814e2

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!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">
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
 <metadata>
-Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
+Created by FontForge 20120731 at Wed Oct 21 13:32:56 2015
  By Ads
  By Ads
 </metadata>
 </metadata>
 <defs>
 <defs>
@@ -16,10 +16,10 @@ Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
     ascent="812"
     ascent="812"
     descent="-212"
     descent="-212"
     x-height="792"
     x-height="792"
-    bbox="0 -224 3943 812"
+    bbox="0 -224 3943 812.871"
     underline-thickness="50"
     underline-thickness="50"
     underline-position="-100"
     underline-position="-100"
-    unicode-range="U+0078-E61A"
+    unicode-range="U+0078-E622"
   />
   />
 <missing-glyph horiz-adv-x="374" 
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -117,5 +117,28 @@ q16 -8 34 -8zM899.5 225q30.5 0 51 21.5t20.5 52.5q0 9 -2 18t-5.5 16.5t-8 14t-11 1
     <glyph glyph-name="uniE61A" unicode="&#xe61a;" 
     <glyph glyph-name="uniE61A" unicode="&#xe61a;" 
 d="M511 -84q-102 0 -188.5 50t-137 137t-50.5 189t50.5 188.5t137 137t188.5 50.5t189 -50.5t137 -137t50 -188.5t-50 -189t-137 -137t-189 -50zM676 421q7 6 0 12l-6 7q-2 2 -5.5 2t-6.5 -2l-138 -139l-137 137q-6 6 -12 0l-6 -6q-6 -6 0 -12l136 -137l-138 -138
 d="M511 -84q-102 0 -188.5 50t-137 137t-50.5 189t50.5 188.5t137 137t188.5 50.5t189 -50.5t137 -137t50 -188.5t-50 -189t-137 -137t-189 -50zM676 421q7 6 0 12l-6 7q-2 2 -5.5 2t-6.5 -2l-138 -139l-137 137q-6 6 -12 0l-6 -6q-6 -6 0 -12l136 -137l-138 -138
 q-6 -6 0 -12l6 -6q7 -7 13 0l138 138l138 -139q6 -6 13 0l6 6q6 6 0 13l-139 138zM676 421z" />
 q-6 -6 0 -12l6 -6q7 -7 13 0l138 138l138 -139q6 -6 13 0l6 6q6 6 0 13l-139 138zM676 421z" />
+    <glyph glyph-name="uniE61B" unicode="&#xe61b;" 
+d="M437 41h-193q-27 2 -41.5 22.5t-17.5 45.5q3 25 17.5 41t41.5 18h193v63l-193 1q-27 2 -41.5 19t-17.5 43q3 25 17.5 41t41.5 18h144l-134 236q-10 12 -19 30.5t-8 40.5q5 28 20 45.5t56 22.5q24 -2 43 -16.5t31 -31.5l152 -278l167 280q12 17 31 30t43 16q15 -1 27.5 -4
+t22 -10t16 -20t9.5 -34q0 -29 -20 -55l-155 -252h147q26 -2 41 -18t17 -41q-2 -26 -17.5 -44t-41.5 -20l-191 -1v-61h192q26 -2 41 -20t17 -43q-2 -26 -17 -43.5t-41 -19.5l-192 1v-106q-4 -85 -93 -85q-44 0 -68.5 21t-26.5 64v104z" />
+    <glyph glyph-name="uniE61C" unicode="&#xe61c;" 
+d="M946 -196h-868q-26 0 -44 18t-18 44v868q0 26 18 44t44 18h868q26 0 44 -18t18 -44v-868q0 -26 -18 -44t-44 -18zM946 703q0 13 -9 22t-22 9h-806q-13 0 -22 -9t-9 -22v-806q0 -13 9 -22t22 -9h806q13 0 22 9t9 22v806z" />
+    <glyph glyph-name="uniE61D" unicode="&#xe61d;" 
+d="M939 -202h-876q-17 0 -31.5 8.5t-23 23t-8.5 31.5v876q0 26 18.5 44.5t44.5 18.5h876q26 0 44.5 -18.5t18.5 -44.5v-876q0 -39 -35 -57q-14 -6 -28 -6zM814 612l-376 -438l-250 188l-63 -126l313 -250l439 501z" />
+    <glyph glyph-name="uniE61E" unicode="&#xe61e;" 
+d="M224 211l416 410l179 -179l-416 -410zM659 525l-19 19l-333 -333l19 -19zM698 486l-20 20l-332 -333l19 -19zM736 448l-19 19l-333 -333l19 -19zM717 704q14 14 38 14t39 -14l102 -102q6 -6 9.5 -14t4.5 -16.5t0 -17t-4.5 -16.5t-9.5 -13l-64 -58l-173 173zM211 186
+l167 -167l-148 -51l-70 70zM205 -45l-83 -32l32 83z" />
+    <glyph glyph-name="uniE61F" unicode="&#xe61f;" 
+d="M512 812q-138 0 -256 -69t-187 -187t-69 -256t69 -256t187 -187t256 -69t256 69t187 187t69 256t-69 256t-187 187t-256 69zM563 44h-102v307h102v-307zM563 454h-102v102h102v-102z" />
+    <glyph glyph-name="uniE620" unicode="&#xe620;" 
+d="M938 276h-400v274h-50v-274h-399q-15 0 -29 5.5t-24 15.5t-16 24t-6 29v175q0 31 22 53t53 22h90q-18 21 -29 46t-11 54q0 27 10 47.5t25 30t29.5 15t24.5 6.5l11 1q53 0 100 -15.5t81 -42t56 -50t39 -50.5q17 27 39.5 51t56 50t79.5 41.5t98 15.5h4q2 0 8.5 -1.5
+t13.5 -3t16 -5.5t16.5 -9t15.5 -13t13.5 -17.5t9 -23.5t3.5 -30q0 -28 -9.5 -52t-25.5 -45h85q31 0 53 -22t22 -53v-175q0 -44 -39 -65q-17 -9 -36 -9zM264 725q-15 0 -26 -2.5t-15.5 -6t-6.5 -7.5t-2 -6v-3q0 -49 66 -100h173q-14 30 -30 52.5t-34 35.5t-33 21t-34.5 11.5
+t-30 4t-27.5 0.5zM763 723q-13 0 -20 -0.5t-21.5 -1.5t-24.5 -4.5t-24 -9t-25.5 -14.5t-24 -21.5t-24.5 -30.5t-22 -41h177q59 50 59 97v3q0 2 -2 6.5t-7 7.5t-15.5 6t-25.5 3zM488 -224h-349q-15 0 -29 6t-24 16t-16 24t-6 29v375h424v-450zM538 226h400v-375
+q0 -31 -22 -53t-53 -22h-325v450z" />
+    <glyph glyph-name="uniE621" unicode="&#xe621;" 
+d="M160 492v-640q0 -26 19 -45t45 -19h576q26 0 45 19t19 45v640h-704zM352 -84h-64v448h64v-448zM480 -84h-64v448h64v-448zM608 -84h-64v448h64v-448zM736 -84h-64v448h64v-448zM880 684h-208v80q0 20 -14 34t-34 14h-224q-8 0 -15 -2.5t-13 -7t-10.5 -10.5t-7 -13
+t-2.5 -15v-80h-208q-20 0 -34 -14t-14 -34v-80h832v80q0 6 -1.5 11t-3.5 10t-5.5 9t-7.5 7.5t-9 5.5t-10 3.5t-11 1.5zM608 684h-192v63h192v-63z" />
+    <glyph glyph-name="uniE622" unicode="&#xe622;" horiz-adv-x="1173" 
+d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144q0 -41 9 -78.5t24 -66.5t39 -57.5t47 -48.5t55.5 -43t56.5 -38t58.5 -35.5t53.5 -33.5q63 -42 118 -94.5t86.5 -95t39.5 -69.5q4 19 25.5 50t53.5 66t75 74t88 71q21 15 53.5 35.5t58 36
+t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
   </font>
   </font>
 </defs></svg>
 </defs></svg>

 var yohobuy;
 var yohobuy;
 
 
+require('./js/common');
+
 require('./js/passport/index');
 require('./js/passport/index');
 require('./js/guang/index');
 require('./js/guang/index');
 require('./js/home/index');
 require('./js/home/index');

+/**
+ * 页面公共逻辑
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/21
+ */
+var $ = require('yoho.zepto');
+
+function cookie(name) {
+    var cookies = document.cookie,
+        cookieVal,
+        offset;
+
+    if (document.cookie && document.cookie !== '') {
+        offset = cookies.indexOf(name + '=');
+        if (offset > -1) {
+            offset += name.length + 1;
+
+            cookieVal = decodeURIComponent($.trim(cookies.substring(offset, cookies.indexOf(';', offset))));
+        }
+    }
+
+    return cookieVal;
+}
+
+function getUser() {
+    var c = cookie('_UID'),
+        user;
+
+    if (typeof c === 'undefined') {
+        return 0;
+    }
+
+    user = c.split('::');
+
+    if (typeof user === 'undefined' || user.length < 4) {
+        return 0;
+    }
+
+    return user;
+}
+
+function getUid() {
+    var user = getUser();
+
+    if (user === 0) {
+        return 0;
+    }
+
+    return user[1];
+}
+
+function getShoppingKey() {
+    var c = cookie('_g');
+
+    if (typeof c === 'undefined') {
+        return '';
+    }
+
+    return JSON.parse(c).k;
+}
+
+//页面通用底部位置及status设置
+(function() {
+    var $footer = $('#yoho-footer'),
+        $op = $footer.children('.op-row');
+
+    var user = getUser();
+
+    if ($('body').height() < $(window).height()) {
+        $footer.addClass('bottom');
+    }
+
+    if (user === 0) {
+
+        //未登录
+        $op.prepend(
+            '<a href="http://m.yohobuy.com/signin.html">登录</a>' +
+            '<span class="sep-line">|</span>' +
+            '<a href="http://m.yohobuy.com/reg.html">注册</a>'
+        );
+    } else {
+
+        //已登录
+        $op.prepend(
+            'Hi,' +
+            '<a class="user-name" href="http://m.yohobuy.com/home?tmp=' + Math.random() + '">' + user[0] + '</a>' +
+            '<a href="http://m.yohobuy.com/passport/signout/index?token=' + user[3] + '">退出</a>'
+        );
+    }
+
+    $footer.removeClass('hide');
+}());
+
+//暴露公共接口
+window.cookie = cookie;
+
+window.getUser = getUser;
+
+window.getUid = getUid;
+
+window.getShoppingKey = getShoppingKey;

@@ -12,8 +12,6 @@ var $clear = $('#search-input > .clear-input');
 
 
 var $history = $('.history');
 var $history = $('.history');
 
 
-require('../plugin/pos-footer');
-
 $('#clear-history').bind('touchstart', function() {
 $('#clear-history').bind('touchstart', function() {
     $.ajax({
     $.ajax({
         type: 'POST',
         type: 'POST',

@@ -7,7 +7,7 @@
 
 
 var $ = require('yoho.zepto');
 var $ = require('yoho.zepto');
 
 
-var $filter = $('#yoho-filter');
+var $filter = $('.filter-mask, .filter-body');
 
 
 var $classify = $filter.find('.classify'),
 var $classify = $filter.find('.classify'),
     $subClassify = $filter.find('.sub-classify');
     $subClassify = $filter.find('.sub-classify');
@@ -29,9 +29,6 @@ function registerCbFn(cb) {
     cbFn = cb;
     cbFn = cb;
 }
 }
 
 
-//初始化sub高度与classify高度一致
-$subClassify.height($classify.height());
-
 //设置完高度后显示sub并设置选中
 //设置完高度后显示sub并设置选中
 $classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
 $classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
 
 
@@ -49,7 +46,7 @@ $classify.delegate('.classify-item', 'touchstart', function() {
 });
 });
 
 
 //点击Mask隐藏筛选界面
 //点击Mask隐藏筛选界面
-$filter.children('.filter-mask').click(function() {
+$filter.filter('.filter-mask').click(function() {
     hideFilter();
     hideFilter();
 });
 });
 
 

-/**
- * 共用底部<解决某些页面过短导致底部悬空的问题>
- * @author: xuqi<qi.xu@yoho.cn
- * @date: 2015/10/19
- */
-var $ = require('yoho.zepto');
-
-var $footer = $('#yoho-footer');
-
-if ($('body').height() < $(window).height()) {
-    $footer.addClass('bottom');
-}
-
-$footer.removeClass('hide');

@@ -5,4 +5,5 @@
  */
  */
 
 
 require('./newsale/newarrival');
 require('./newsale/newarrival');
-require('./newsale/discount');
+require('./newsale/discount');
+require('./list');

+/**
+ * 商品列表页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('yoho.zepto'),
+    lazyLoad = require('yoho.zeptolazyload');
+
+var filter = require('../plugin/filter');
+
+var $goodsContainer = $('#goods-container'),
+    $ngc = $goodsContainer.children('.new-goods'),
+    $pgc = $goodsContainer.children('.price-goods'),
+    $dgc = $goodsContainer.children('.discount-goods');
+
+var winH = $(window).height();
+
+//默认筛选条件
+var defaultOpt = {
+    gender: $('#gender').val(),
+    brand: $('#brand').val(),
+    msort: $('#msort').val(),
+    color: $('#color').val(),
+    size: $('#size').val(),
+    price: $('#price').val(),
+    discount: $('#discount').val()
+};
+
+var $listNav = $('#list-nav'),
+
+    //导航数据信息
+    navInfo = {
+        newest: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        },
+        price: {
+            order: 0,
+            reload: true,
+            page: 0,
+            end: false
+        },
+        discount: {
+            order: 0,
+            reload: true,
+            page: 0,
+            end: false
+        }
+    },
+    $pre, //纪录进入筛选前的active项
+    searching;
+
+/**
+ * 筛选注册的回调，筛选子项点击后逻辑
+ * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
+ * @param opt {type, id}
+ */
+function search(opt) {
+    var setting = {},
+        ext,
+        att,
+        nav, navType,
+        page;
+
+    if (opt) {
+
+        //筛选项变更则重置reload为true
+        for (att in navInfo) {
+            if (navInfo.hasOwnProperty(att)) {
+                navInfo[att].reload = true;
+            }
+        }
+
+        switch (opt.type) {
+            case 'gender':
+                ext = {
+                    gender: opt.id
+                };
+                break;
+            case 'brand':
+                ext = {
+                    brand: opt.id
+                };
+                break;
+            case 'msort':
+                ext = {
+                    msort: opt.id
+                };
+                break;
+            case 'color':
+                ext = {
+                    color: opt.id
+                };
+                break;
+            case 'size':
+                ext = {
+                    size: opt.id
+                };
+                break;
+            case 'price':
+                ext = {
+                    price: opt.id
+                };
+                break;
+            case 'discount':
+                ext = {
+                    discount: opt.id
+                };
+                break;
+        }
+
+        $.extend(defaultOpt, ext); //扩展筛选项
+    }
+
+    if (searching) {
+        return;
+    }
+
+    //导航类别
+    if ($pre.hasClass('new')) {
+        navType = 'newest';
+    } else if ($pre.hasClass('price')) {
+        navType = 'price';
+    } else if ($pre.hasClass('discount')) {
+        navType = 'discount';
+    }
+
+    nav = navInfo[navType];
+
+    page = nav.page + 1;
+    if (nav.reload) {
+        page = 1;
+    } else if (nav.end) {
+
+        //不需要重新加载并且数据请求结束
+        return;
+    }
+
+    $.extend(setting, defaultOpt, {
+        type: navType,
+        order: nav.order,
+        page: page
+    });
+
+    searching = true;
+
+    $.ajax({
+        type: 'GET',
+        url: '/product/list/search',
+        data: setting,
+        success: function(data) {
+            var noResult = '<p class="no-result">未找到相关搜索结果</p>',
+                $container;
+
+            switch (navType) {
+                case 'newest':
+                    $container = $ngc;
+                    break;
+                case 'price':
+                    $container = $pgc;
+                    break;
+                case 'discount':
+                    $container = $dgc;
+                    break;
+            }
+
+            if (data.data === ' ') {
+                nav.end = true;
+
+                if (nav.reload) {
+                    $container.html(noResult);
+                }
+            } else {
+                if (nav.reload) {
+                    $container.html(data.data);
+                } else {
+                    $container.append(data.data);
+                }
+
+                lazyLoad($container.find('.lazy'));
+            }
+
+            nav.reload = true;
+            nav.page = page;
+
+            searching = false;
+        }
+    });
+
+}
+
+lazyLoad($('.lazy'));
+
+filter.registerCbFn(search);
+
+//导航栏点击逻辑说明：
+//1.点击非active项时切换active状态
+//2.价格和折扣active状态时继续点击切换排序
+//3.筛选无active时点击展开筛选面板
+//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
+//5.当前active为筛选并且点击其他项时，隐藏筛选面板
+$listNav.delegate('li', 'touchstart', function() {
+    var $this = $(this),
+        navType,
+        $active;
+
+    if ($this.hasClass('filter')) {
+
+        //筛选面板切换状态
+        if ($this.hasClass('active')) {
+            filter.hideFilter();
+
+            //点击筛选钱的active项回复active
+            $pre.addClass('active');
+            $this.removeClass('active');
+        } else {
+            $pre = $this.siblings('.active');
+
+            $pre.removeClass('active');
+            $this.addClass('active');
+
+            filter.showFilter();
+        }
+    } else {
+        if ($this.hasClass('active')) {
+
+            //最新无排序切换
+            if ($this.hasClass('new')) {
+                return;
+            }
+
+            if ($this.hasClass('price') || $this.hasClass('discount')) {
+
+                // 价格/折扣切换排序状态
+                $this.find('.icon > .iconfont').toggleClass('cur');
+            }
+        } else {
+
+            $active = $this.siblings('.active');
+            if ($active.hasClass('filter')) {
+                $pre = $this; //$pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
+
+                //若之前active项为筛选，则隐藏筛选面板
+                filter.hideFilter();
+            } else {
+                $pre = $active;
+            }
+
+            $active.removeClass('active');
+            $this.addClass('active');
+
+            $pre = $active;
+        }
+
+        if ($this.hasClass('new')) {
+            navType = 'newest';
+        } else if ($this.hasClass('price')) {
+            navType = 'price';
+        } else if ($this.hasClass('discount')) {
+            navType = 'discount';
+        }
+
+        if (navInfo[navType].reload) {
+            search();
+        }
+    }
+});
+
+$(window).scroll(function() {
+
+    //当scroll到1/4$goodsContainer高度后继续请求下一页数据
+    if ($(window).scrollTop() + winH >
+        $(document).height() - 0.25 * $goodsContainer.height()) {
+        search();
+    }
+});

+/**
+ * 购物车商品
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.zeptolazyload');
+
+ellipsis.init();
+
+lazyLoad($('.lazy'));
+
+$('.name')[0].mlellipsis(2);
+
+//checkbox toggle status
+$('.checkbox').bind('touchstart', function() {
+    var $this = $(this);
+
+    if ($this.hasClass('icon-cb-checked')) {
+        $this.removeClass('icon-cb-checked').addClass('icon-checkbox');
+    } else {
+        $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
+    }
+});

+/**
+ * 购物车Logic
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('yoho.zepto');
+
+require('./good');
+
+$('.cart-nav').delegate('li', 'touchstart', function() {
+    var $this = $(this);
+
+    if ($this.hasClass('active')) {
+        return;
+    }
+
+    $this.siblings('.active').removeClass('active');
+    $this.addClass('active');
+});

@@ -11,17 +11,18 @@
 }
 }
 
 
 .filter-body {
 .filter-body {
-    position: relative;
     background: #fff;
     background: #fff;
     color: #000;
     color: #000;
     cursor: pointer;
     cursor: pointer;
     font-size: 14px;
     font-size: 14px;
+    height: 440px;
     
     
     .classify {
     .classify {
         width: 50%;
         width: 50%;
+        height: 100%;
+        background: #f8f8f8;
 
 
         > li {
         > li {
-            background: #f8f8f8;
             height: 60px;
             height: 60px;
             line-height: 60px;
             line-height: 60px;
 
 
@@ -56,6 +57,7 @@
         position: absolute;
         position: absolute;
         display: none;
         display: none;
         width: 50%;
         width: 50%;
+        height: 440px;
         padding-left: 15px;
         padding-left: 15px;
         left: 50%;
         left: 50%;
         top: 0;
         top: 0;
@@ -68,10 +70,6 @@
             overflow: hidden;
             overflow: hidden;
             white-space: nowrap;
             white-space: nowrap;
             text-overflow: ellipsis;
             text-overflow: ellipsis;
-
-            &:last-child {
-                border-bottom: none;
-            }
         }
         }
 
 
         .chosed-icon {
         .chosed-icon {

@@ -92,4 +92,5 @@ a {
     @include border-radius(10px);
     @include border-radius(10px);
 }
 }
 
 
-@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index","category/brand", "product/index", "index/index";
+
+@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";

@@ -10,12 +10,18 @@
 
 
         .user-name {
         .user-name {
             text-decoration: underline;
             text-decoration: underline;
+            margin-left: .3em;
+            margin-right: 1em;
         }
         }
 
 
         .back-to-top {
         .back-to-top {
             position: absolute;
             position: absolute;
             right: 20px;
             right: 20px;
         }
         }
+
+        .sep-line {
+            margin: 0 0.3em;
+        }
     }
     }
 
 
     .copyright {
     .copyright {

-@import "new-arrival", "discount";
+@import "new-arrival", "discount", "list";

+.good-list-page {
+    .search-input {
+        position: relative;
+        padding: 7px 46px 7px 15px;
+        background: #f8f8f8;
+
+        .search-icon {
+            position: absolute;
+            font-size: 12px;
+            top: 16px;
+            left: 24px;
+        }
+
+        input {
+            height: 30px;
+            width: 100%;
+            border-radius: 15px;
+            text-indent: 26px;
+            background: #fff;
+            border: none;
+        }
+
+        .clear-input {
+            position: absolute;
+            top: 12px;
+            right: 50px;
+        }
+
+        .search {
+            position: absolute;
+            top: 12px;
+            right: 0;
+            border: none;
+            background: transparent;
+            font-size: 16px;
+        }
+    }
+
+    .brand-way {
+        padding-bottom: 10px;
+        background: #f4f4f4;
+
+        > a {
+            display: block;
+            height: 40px;
+            line-height: 40px;
+            padding: 0 10px;
+            border-bottom: 1px solid #e6e6e6;
+            border-top: 1px solid #e6e6e6;
+            font-size: 17px;
+            background: #fff;
+        }
+
+        .brand-thumb {
+            display: block;
+            float: left;
+            width: 75px;
+            height: 40px;
+            margin: 0;
+        }
+
+        .entry {
+            color: #999;
+            font-size: 14px;
+            float: right;
+        }
+    }
+
+    .brand-header {
+        position: relative;
+        height: 150rem / $pxConvertRem;
+
+        > img {
+            display: block;
+            height: 100%;
+        }
+    }
+
+    .btn-intro, .btn-col {
+        position: absolute;
+        display: block;
+        width: 62px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border: 1px solid #fff;
+        color: #fff;
+
+        top: 50%;
+        margin-top: -12px;
+    }
+
+    .btn-intro {
+        right: 90px;
+    }
+
+    .btn-col {
+        right: 15px;
+    }
+
+    .brand-intro-box {
+        display: none;
+    }
+
+    .list-nav {
+        > li {
+            float: left;
+            width: 25%;
+            height: 33px;
+            line-height: 33px;
+            text-align: center;
+            font-size: 14px;
+        }
+
+        a {
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            color: #999;
+        }
+
+        .active > a {
+            border-bottom: 2px solid #000;
+            color: #000;
+
+            .iconfont {
+                color: #999;
+
+                &.cur {
+                    color: #000;
+                }
+            }
+        }
+
+        .new .iconfont {
+            @include scale(0.8);
+            font-weight: bold;
+        }
+
+        .filter .iconfont {
+            font-size: 12px;
+            @include transition(transform 0.1 ease-in);
+        }
+
+        .filter.active .iconfont {
+            @include rotate(-180deg);
+        }
+
+        .icon {
+            position: relative;
+
+            i {
+                position: absolute;
+                @include scale(0.8);
+                font-weight: bold;
+            }
+
+            .up {
+                top: -11px;
+            }
+
+            .down {
+                top: -4px;
+            }
+        }
+    }
+
+    .no-result {
+        text-align: center;
+        vertical-align: middle;
+        color: #ccc;
+        font-size: 1.2em;
+        margin-top: 220px;
+    }
+
+    .goods-container {
+        position: relative;
+        min-height: 440px;
+    }
+}

+.shopping-cart-good {
+    position: relative;
+    padding-left: 16rem / $pxConvertRem;
+
+    .checkbox {
+        position: absolute;
+        top: 50%;
+        margin-top: -14rem / $pxConvertRem;
+        font-size: 28rem / $pxConvertRem;
+        color: #f0f0f0;
+
+        &.icon-cb-checked {
+            color: #000;
+        }
+    }
+
+    .info {
+        float: left;
+        margin-left: 50rem / $pxConvertRem;
+        padding: 16rem / $pxConvertRem 0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .thumb {
+        float: left;
+        width: 120rem / $pxConvertRem;
+        height: 160rem / $pxConvertRem;
+    }
+    
+    .deps {
+        margin-left: 135rem / $pxConvertRem;
+        padding-right: 20rem / $pxConvertRem;
+    }
+
+    .name {
+        font-size: 28rem / $pxConvertRem;
+    }
+    
+    .row:nth-child(2) {
+        font-size: 22rem / $pxConvertRem;
+        height: 45rem / $pxConvertRem;
+        line-height: 45rem / $pxConvertRem;
+
+        > span {
+            margin-right: 15rem / $pxConvertRem;
+        }
+    }
+
+    .row:nth-child(3) {
+        position: relative;
+    }
+
+    .color, .size {
+        color: #b6b6b6;
+    }
+
+    .appear-date {
+        color: #e01;
+    }
+
+    .price {
+        font-size: 24rem / $pxConvertRem;
+        color: #000;
+    }
+
+    .count {
+        font-size: 20rem / $pxConvertRem;
+        color: #999;
+        margin-left: 22rem / $pxConvertRem;
+    }
+
+    .sold-out, .low-stocks {
+        display: inline-block;
+        width: 100rem / $pxConvertRem;
+        height: 30rem / $pxConvertRem;
+        line-height: 30rem / $pxConvertRem;
+        font-size: 22rem / $pxConvertRem;
+        border: none;
+        color: #fff;
+        text-align: center;
+        margin-left: 16rem / $pxConvertRem;
+    }
+
+    .sold-out {
+        background: #999;
+    }
+
+    .low-stocks {
+        background: #e01;
+    }
+
+    .icon-del,
+    .icon-edit {
+        position: absolute;
+        color: #ccc;
+        font-size: 30rem / $pxConvertRem;
+    }
+
+    .icon-del {
+        right: 14rem / $pxConvertRem;
+    }
+
+    .icon-edit {
+        right: 72rem / $pxConvertRem;
+    }
+
+    .opt-panel {
+        display: none;
+
+        width: 220rem / $pxConvertRem;
+        height: 190rem / $pxConvertRem;
+
+        color: #fff;
+
+        .put-in-favorite {
+            background: #bbb;
+        }
+
+        .del {
+            background: #999;
+        }
+    }
+}

+@import "good";
+
+
+.icon-checkbox:before { content: "\e61c"; }
+.icon-cb-checked:before { content: "\e61d"; }
+
+.cart-nav {
+    height: 30rem / $pxConvertRem;
+    color: #c6c6c6;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 30rem / $pxConvertRem 0;
+
+    li {
+        float: left;
+        width: 50%;
+    }
+
+    li.active {
+        color: #000;
+    }
+
+    span {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        height: 30rem / $pxConvertRem;
+        line-height: 30rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        text-align: center;
+    }
+
+    li:first-child span {
+        border-right: 1px solid #e0e0e0;
+    }
+}
+
+.cart-goods {
+    border-bottom: 1px solid #e0e0e0;
+
+    .shopping-cart-good:last-child .info {
+        border-bottom: none;
+    }
+}
+
+.freebie-and-advance-buy {
+    padding: 20rem / $pxConvertRem;
+    font-size: 24rem / $pxConvertRem;
+    border-bottom: 1px solid #e0e0e0;
+
+    > li {
+        box-sizing: border-box;
+        height: 90rem / $pxConvertRem;
+        line-height: 90rem / $pxConvertRem;
+        margin-bottom: 10rem / $pxConvertRem;
+        background: #f8f8f8;
+        padding: 0 20rem / $pxConvertRem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        a {
+            float: right;
+        }
+    }
+
+    .count {
+        color: #f00;
+    }
+
+    .icon-right-arrow {
+        color: #8f8f8f;
+    }
+}
+
+.price-compute {
+    padding: 20rem / $pxConvertRem;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 26rem / $pxConvertRem;
+
+    .title {
+        display: inline-block;
+        width: 175rem / $pxConvertRem;
+    }
+
+    .minus {
+        float: right;
+    }
+}
+
+.balance {
+    position: fixed;
+    box-sizing: border-box;
+    bottom: 0;
+    width: 100%;
+    padding: 20rem / $pxConvertRem;
+    height: 120rem / $pxConvertRem;
+    border-top: 1px solid #e0e0e0;
+
+    .iconfont {
+        position: absolute;
+        top: 50%;
+        margin-top: -14rem / $pxConvertRem;
+        font-size: 28rem / $pxConvertRem;
+    }
+
+    p {
+        float: left;
+        margin-left: 50rem / $pxConvertRem;
+        font-size: 26rem / $pxConvertRem;
+
+        span {
+            display: block;
+            height: 40rem / $pxConvertRem;
+            line-height: 40rem / $pxConvertRem;
+        }
+
+        .tip {
+            color: #666;
+            font-size: 22rem / $pxConvertRem;
+        }
+    }
+
+    .btn-balance {
+        float: right;
+        width: 140rem / $pxConvertRem;
+        height: 80rem / $pxConvertRem;
+        line-height: 80rem / $pxConvertRem;
+        text-align: center;
+        background: #e01;
+        color: #fff;
+        border: none;
+        font-size: 28rem / $pxConvertRem;
+    }
+}

+{{> layout/header}}
+<div class="shopping-cart-page yoho-page">
+    {{# shoppingCart}}
+        {{#if cartNav}}
+            <ul class="cart-nav">
+                <li class="active">
+                    <span>
+                        普通商品({{commonGoodsCount}})
+                    </span>
+                </li>
+                <li>
+                    <span>
+                        预售商品({{presellGoodsCount}})
+                    </span>
+                </li>
+            </ul>
+        {{/if}}
+
+        <div class="cart-goods">
+            {{# goods}}
+                {{> shopping-cart/good}}
+            {{/ goods}}
+        </div>
+
+        {{#if freebieOrAdvanceBuy}}
+            <ul class="freebie-and-advance-buy">
+                {{# freebie}}
+                    <li class="freebie">
+                        <span class="iconfont">&#xe620;</span>
+                        赠品
+                        <a href={{url}}>
+                            <span class="count">{{count}}</span>
+                            <span class="iconfont icon-right-arrow">&#xe614;</span>
+                        </a>
+                    </li>
+                {{/ freebie}}
+                {{# advanceBuy}}
+                    <li class="advance-buy">
+                        <span class="iconfont">&#xe61b;</span>
+                        加价购
+                        <a href={{url}}>
+                            <span class="count">{{count}}</span>
+                            <span class="iconfont icon-right-arrow">&#xe614;</span>
+                        </a>
+                    </li>
+                {{/ advanceBuy}}
+            </ul>
+        {{/if}}
+
+        <div class="price-compute">
+            <p class="sum-price">
+                <span class="title">总价</span>
+                ￥{{price}}
+            </p>
+            <p class="activity-price">
+                <span class="title">
+                    活动价
+                    <i class="minus">-</i>
+                </span>
+                ￥{{activityPrice}}
+            </p>
+        </div>
+
+        <div class="balance">
+            <span class="iconfont icon-cb-checked"></span>
+            <p>
+                <span>
+                    {{count}}件总计:￥{{sumPrice}}
+                </span>
+                <span class="tip">(不含运费)</span>
+            </p>
+            <button class="btn-balance">
+                结算
+            </button>
+        </div>
+    {{/ shoppingCart}}
+</div>
+{{> layout/footer}}

+{{> layout/header}}
+<div class="good-list-page yoho-page">
+    {{# goodList}}
+        {{# search}}
+            <div id="search-input" class="search-input">
+                <i class="search-icon iconfont">&#xe60f;</i>
+                <input type="text" value={{default}}>
+                <i class="clear-input iconfont hide">&#xe61a;</i>
+                <button id="search" class="search">搜索</button>
+            </div>
+        {{/ search}}
+
+        {{# brandWay}}
+            <div class="brand-way">
+                <a  href={{url}}>
+                    <img class="brand-thumb" src={{thumb}}>
+                    <span>{{name}}</span>
+                    <span class="entry">
+                        进入品牌
+                        <i class="iconfont">&#xe614;</i>
+                    </span>
+                </a>
+            </div>
+        {{/ brandWay}}
+
+        {{# brand}}
+            <div class="brand-header" data-id={{id}}>
+                <img class="lazy" data-original={{banner}}>
+                <a class="btn-intro" href="javascript:void(0);">
+                    品牌介绍
+                </a>
+                <a class="btn-col" href="javascript:void(0);">
+                    <span class="iconfont">&#xe622;</span>
+                    收藏
+                </a>
+            </div>
+            <div class="brand-intro-box">
+                <div id="brand-intro" class="brand-intro">{{intro}}</div>
+            </div>
+        {{/ brand}}
+
+        <ul id="list-nav" class="list-nav clearfix">
+            <li class="new active">
+                <a href="javascript:void(0);">
+                    最新
+                    <span class="iconfont cur">&#xe616;</span>
+                </a>
+            </li>
+            <li class="price">
+                <a href="javascript:void(0);">
+                    价格
+                    <span class="icon">
+                        <i class="iconfont up">&#xe615;</i>
+                        <i class="iconfont down cur">&#xe616;</i>
+                    </span>
+                </a>
+            </li>
+            <li class="discount">
+                <a href="javascript:void(0);">
+                    折扣
+                    <span class="icon">
+                        <i class="iconfont up">&#xe615;</i>
+                        <i class="iconfont down cur">&#xe616;</i>
+                    </span>
+                </a>
+            </li>
+            <li class="filter">
+                <a href="javascript:void(0);">
+                    筛选
+                    <span class="iconfont">&#xe613;</span>
+                </a>
+            </li>
+        </ul>
+        <div id="goods-container" class="goods-container">
+            <div class="new-goods">
+                {{# new}}
+                    {{> good}}
+                {{/ new}}
+            </div>
+            <div class="price-goods hide"></div>
+            <div class="discount-goods hide"></div>
+
+            {{> filter}}
+        </div>
+
+    {{/ goodList}}
+</div>
+{{> layout/footer}}

 {{# filter}}
 {{# filter}}
-    <div id="yoho-filter">
-        <div class="filter-mask"></div>
-        <div class="filter-body">
-            <ul class="classify">
-                {{#each classify}}
-                    <li class="classify-item">
-                        <p class="shower{{#if default}} default{{/if}}">
-                            <span class="title">{{title}}：</span>
-                            {{name}}
-                        </p>
-                        <ul class="sub-classify" data-type={{dataType}}>
-                            {{# subs}}
-                                <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
-                                    {{name}}
-                                    <i class="iconfont chosed-icon">&#xe617;</i>
-                                </li>
-                            {{/ subs}}
-                        </ul>
-                    </li>
-                {{/each}}
-            </ul>
-        </div>
+    <div class="filter-mask hide"></div>
+    <div class="filter-body hide">
+        <ul class="classify">
+            {{#each classify}}
+                <li class="classify-item">
+                    <p class="shower{{#if default}} default{{/if}}">
+                        <span class="title">{{title}}：</span>
+                        {{name}}
+                    </p>
+                    <ul class="sub-classify" data-type={{dataType}}>
+                        {{# subs}}
+                            <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
+                                {{name}}
+                                <i class="iconfont chosed-icon">&#xe617;</i>
+                            </li>
+                        {{/ subs}}
+                    </ul>
+                </li>
+            {{/each}}
+        </ul>
     </div>
     </div>
 {{/ filter}}
 {{/ filter}}

 {{#pageFooter}}
 {{#pageFooter}}
     <footer id="yoho-footer" class="yoho-footer hide">
     <footer id="yoho-footer" class="yoho-footer hide">
         <p class="op-row">
         <p class="op-row">
-            {{# user}}
-                Hi, 
-                <a class="user-name" href="{{url}}">{{name}}</a>
-                <a href="{{signoutUrl}}">退出</a>
-            {{^}}
-                <a href="{{loginUrl}}">登录</a>
-                <span class="sep-line">|</span>
-                <a href="{{signupUrl}}">注册</a>
-            {{/ user}}
             <span class="back-to-top">
             <span class="back-to-top">
                 Back to top
                 Back to top
                 <i class="iconfont">&#xe608;</i>
                 <i class="iconfont">&#xe608;</i>

+<script>
+    seajs.use('js/common');
+</script>
 
 
 {{!-- 逛(PLUS+STAR) --}}
 {{!-- 逛(PLUS+STAR) --}}
 {{#if psList}}
 {{#if psList}}
@@ -117,6 +120,13 @@
     </script>
     </script>
 {{/if}}
 {{/if}}
 
 
+{{!-- 商品列表 --}}
+{{#if goodListPage}}
+    <script>
+        seajs.use('js/product/list');
+    </script>
+{{/if}}
+
 {{!-- 品类 --}}
 {{!-- 品类 --}}
 {{#if categoryPage}}
 {{#if categoryPage}}
     <script>
     <script>
@@ -135,4 +145,11 @@
     <script>
     <script>
         seajs.use('js/index/search');
         seajs.use('js/index/search');
     </script>
     </script>
+{{/if}}
+
+{{!-- 购物车 --}}
+{{#if shoppingCartPage}}
+    <script>
+        seajs.use('js/shopping-cart/index');
+    </script>
 {{/if}}
 {{/if}}

+<div class="shopping-cart-good clearfix">
+    <span class="checkbox icon-cb-checked iconfont"></span>
+    <div class="info">
+        <img class="thumb lazy" data-original={{thumb}}>
+        <div class="deps">
+            <p class="name row">{{name}}</p>
+            <p class="row">
+                {{#if color}}
+                    <span class="color">
+                        颜色:{{color}}
+                    </span>
+                {{/if}}
+
+                {{#if size}}
+                    <span class="size">
+                        尺码:{{size}}
+                    </span>
+                {{/if}}
+
+                {{#if appearDate}}
+                    <span class="appear-date">
+                        上市期:{{appearDate}}
+                    </span>
+                {{/if}}
+            </p>
+            <p class="row">
+                <span class="price">
+                    ￥{{price}}
+                </span>
+                <span class="count">
+                    ×{{count}}
+                </span>
+                {{#if soldOut}}
+                    <span class="sold-out">
+                        已售罄
+                    </span>
+                {{/if}}
+
+                {{#if lowStocks}}
+                    <span class="low-stocks">
+                        库存不足
+                    </span>
+                {{/if}}
+
+                <span class="iconfont icon-edit">&#xe61e;</span>
+                <span class="iconfont icon-del">&#xe621;</span>
+            </p>
+        </div>
+    </div>
+    <div class="opt-panel">
+        <div class="put-in-favorite">
+            <span class="iconfont">&#xe622;</span>
+            移入收藏夹
+        </div>
+        <div class="del">
+            <span class="iconfont">&#xe61a;</span>
+            删除
+        </div>
+    </div>
+</div>

+<?php
+
+use Action\AbstractAction;
+
+/**
+ * 购物车
+ */
+class ShoppingCartController extends AbstractAction
+{
+    public function indexAction()
+    {
+        $data = array(
+            'cartNav' => true,
+            'commonGoodsCount' => 2,
+            'presellGoodsCount' => 2,
+            'goods' => array(
+                array(
+                    'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
+                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
+                    'color' => '黄色',
+                    'size' => 'F',
+                    'appearDate' => '12月',
+                    'price' => 399.00,
+                    'count' => 8,
+                    'lowStocks' => true
+                ),
+                array(
+                    'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
+                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                    'color' => '黄色',
+                    'size' => 'F',
+                    'price' => 553.00,
+                    'count' => 1,
+                    'soldOut' => true
+                )
+            ),
+            'freebieOrAdvanceBuy' => true,
+            'freebie' => array(
+                'url' => '',
+                'count' => 2
+            ),
+            'advanceBuy' => array(
+                'url' => '',
+                'count' => 3
+            ),
+            'price' => 3192,
+            'activityPrice' => 0,
+            'count' => 8,
+            'sumPrice' => 3192
+        );
+        // 渲染模板
+        $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(
+            'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data));
+    }
+}

 <?php
 <?php
 
 
-/* 
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
+use Action\AbstractAction;
+
+/**
+ * 商品列表页
  */
  */
 
 
+class ListController extends AbstractAction
+{
+    public function indexAction()
+    {
+        $data = array(
+            'goodListPage' => true,
+            'goodList' => array(
+                'search' => 'Aape',
+                'brandWay' => array(
+                    'url' => 'http://aape.m.yohobuy.com/',
+                    'name' => 'Aape',
+                    'thumb' => 'http://img13.static.yhbimg.com/brandLogo/2015/08/26/15/02261f64c198cb4b181c5ef9e61f38f4b9.jpg?imageMogr2/thumbnail/150x70/extent/150x70/background/d2hpdGU=/position/center/quality/90'
+                ),
+                'new' => array(
+                    array(
+                        'id' => 1,
+                        'thumb' => 'http://img13.static.yhbimg.com/goodsimg/2015/09/15/03/02e50b1037b45b90aa8f33ee328b18facf.jpg?imageMogr2/thumbnail/290x388/extent/290x388/background/d2hpdGU=/position/center/quality/90',
+                        'url' => '',
+                        'name' => 'Aape X YO’HOOD moon face YOH',
+                        'salePrice' => 599,
+                        'tags' => array(
+                            'is_new' => true,
+                            'is_discount' => true
+                        ),
+                        'is_soon_sold_out' => true
+                    ),
+                    array(
+                        'id' => 2,
+                        'thumb' => 'http://img10.static.yhbimg.com/goodsimg/2015/09/15/03/0101b0c3998752d02724a5512c6efcb241.jpg?imageMogr2/thumbnail/290x388/extent/290x388/background/d2hpdGU=/position/center/quality/90',
+                        'url' => '',
+                        'name' => 'Aape X YO’HOOD moon face YOH',
+                        'salePrice' => 99,
+                        'tags' => array(
+                            'is_yohoood' => true
+                        ),
+                        'is_soon_sold_out' => true
+                    )
+                ),
+                'filter' => array(
+                    array(
+                        'classify' => array(
+                            array(
+                                'title' => '性别',
+                                'name' => '全部性别',
+                                'default' => true,
+                                'subs' => array(
+                                    array(
+                                        'chosed' => true,
+                                        'dataId' => 0,
+                                        'name' => '全部性别'
+                                    ),
+                                    array(
+                                        'dataId' => 1,
+                                        'name' => '男'
+                                    ),
+                                    array(
+                                        'dataId' => 3,
+                                        'name' => '女'
+                                    )
+                                )
+                            ),
+                            array(
+                                'title' => '尺寸',
+                                'name' => 'XL',
+                                'subs' => array(
+                                    array(
+                                        'dataId' => 0,
+                                        'name' => '全部尺寸'
+                                    ),
+                                    array(
+                                        'dataId' => 1,
+                                        'name' => 'S'
+                                    ),
+                                    array(
+                                        'dataId' => 2,
+                                        'name' => 'M'
+                                    ),
+                                    array(
+                                        'dataId' => 3,
+                                        'name' => 'L'
+                                    ),
+                                    array(
+                                        'chosed' => true,
+                                        'dataId' => 4,
+                                        'name' => 'XL'
+                                    ),
+                                    array(
+                                        'dataId' => 5,
+                                        'name' => 'XXL'
+                                    )
+                                )
+                            )
+                        )
+                    )
+                )
+            )
+        );
+
+        $this->_view->display('index', $data);
+    }
+}