page optimization

Lynnic
Commit ab8a5051f029488b98ad82d1766811fcf6f29383 1 parent 01744950
Showing 4 changed files with 150 additions and 183 deletions
static/js/product/detail/detail.js
static/sass/product/_detail.scss
template/m.yohobuy.com/actions/product/detail/index.phtml
yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
--- a/static/js/product/detail/detail.js
View file @ab8a505
+++ b/static/js/product/detail/detail.js
View file @ab8a505
@@ -6,8 +6,11 @@
  var $ = require('jquery'),
     Swiper = require('yoho.iswiper'),
     lazyLoad = require('yoho.lazyload'),
-    Handlebars = require('yoho.handlebars'),
-    goodsSwiper,
+    Handlebars = require('yoho.handlebars');
+
+var goodsSwiper,
+
+    // winH = $(window).height(),
     sizeSwiper,
     refSwiper,
     handleHelper;
@@ -57,7 +60,9 @@ handleHelper = Handlebars.registerHelper('addOne', function(index) {
     return index + 1;
 });
-// $('#iframe').load(function() {
-//     var mainheight = $(this).contents().find('body').height() + 30;
-//     $(this).height(mainheight);
+
+//srcoll to load more
+// $(window).scroll(function () {
+//     if ($(window).scrollTop() + winH >= $(document).height() - 50) {
+//     }
 // });
--- a/static/sass/product/_detail.scss
View file @ab8a505
+++ b/static/sass/product/_detail.scss
View file @ab8a505
@@ -5,7 +5,7 @@ $tableCellC:#eee;
 $basicBtnC:#eb0313;
 .good-detail-page {
-
+overflow: hidden;
 /* basic component */
 .page-block{
     box-sizing:border-box;
@@ -14,7 +14,6 @@ $basicBtnC:#eb0313;
     border-top: 1px solid $borderC;
     padding: 0  pxToRem(28px);
     >.title{
-        min-height: pxToRem(88px);
         line-height: pxToRem(88px);
         color: $mainFontC;
         font-size : pxToRem(28px);           
@@ -23,7 +22,6 @@ $basicBtnC:#eb0313;
         span{
             color:#a0a0a0;
             font-size:pxToRem(18px);
-                // vertical-align: baseline;
             }
         }
         .detail{
@@ -40,24 +38,15 @@ $basicBtnC:#eb0313;
                     .column{
                        display: table-cell;
                        padding: 0.4em 0.8em;
-                     border:1px solid white;
+                       border:1px solid #fff;
                        font-size: pxToRem(24px);
                        background-color: $tableCellC;
                    }
                }
            }
-
-        // table {
-        //       width: 100%;
-        //       tbody td{
-        //            padding: 0.4em 0.8em;
-        //            border:3px solid white;
-        //            font-size: pxToRem(24px);
-        //            background-color: $tableCellC;
-        //       }
-        // }
     }
 }
+
 .gap-block{
     min-height: 30rem/$pxConvertRem;
     background-color: #f0f0f0;
@@ -167,7 +156,7 @@ $basicBtnC:#eb0313;
      h1{
         display: inline-block;
         line-height: pxToRem(88px);
-}
+    }
 }
 .goodsName,
 .goodsSubtitle{
@@ -179,6 +168,8 @@ $basicBtnC:#eb0313;
        }
  }
    .vipLevel {
+    width: 100%;
+    box-sizing:border-box;
     display: table;
     min-height: pxToRem(88px);
     padding-left:pxToRem(28px);
@@ -213,17 +204,21 @@ $basicBtnC:#eb0313;
     color: $mainFontC;
     line-height: pxToRem(88px);
-    border-bottom: 2px solid $borderC;
+    border-bottom: 1px solid $borderC;
     .iconfont{
-        // padding-right:28rem/$pxConvertRem;
-        font-size: inherit;
+        display: inline-block;
+        width: pxToRem(35px);
+        font-size: pxToRem(45px);
         float: right;
         color:#e0e0e0;
-        text-align: right;
+        // padding-left:pxToRem(50px);
     }
 }
-
+.goodsSubtitle,
+.goodsDiscount{
+    text-indent: pxToRem(-14px);
+}
 .feedback-list-page {
     padding-top: pxToRem(30px);
     background-color: #f0f0f0;
@@ -254,30 +249,28 @@ $basicBtnC:#eb0313;
             color: #000;
         }
     }
-
     .comment-nav {
         border-right: 1px solid #ccc;
     }
-
     .comment-content{
        .comment-content-main{
         background-color: #fff;
         border-bottom: 1px solid $borderC;
         .user-name{
-            font-size: px2rem(24);
-            line-height: px2rem(62);
+            font-size: pxToRem(24px);
+            line-height: pxToRem(62px);
             color:$mainFontC;
-            padding-left: px2rem(28);
-            padding-right: px2rem(18);
+            padding-left: pxToRem(28px);
+            padding-right: pxToRem(18px);
         }
         .goods-spec,
         .comment-time{
-            font-size: px2rem(24);
-            line-height: px2rem(62);
+            font-size: pxToRem(24px);
+            line-height: pxToRem(62px);
         }
         .detail-content{
-            font-size: px2rem(28);
-            line-height: px2rem(36);
+            font-size: pxToRem(28px);
+            line-height: pxToRem(36px);
             font-size: pxToRem(24px);
             line-height: pxToRem(62px);
             color:$mainFontC;
@@ -299,17 +292,15 @@ $basicBtnC:#eb0313;
         }
         .detail-content,
         .comment-time{
-            padding-left: px2rem(28);
+            padding-left: pxToRem(28px);
         }
         .detail-content{
-            padding-right: px2rem(28);
+            padding-right: pxToRem(28px);
             padding-left: pxToRem(28px);
-
         }
         .detail-content{
             padding-right: pxToRem(28px);
-
         }
         .comment-time{
             color:#c1c1c1;
@@ -322,7 +313,7 @@ $basicBtnC:#eb0313;
      text-align: center;
      background-color: #fff;
-       border-bottom: 2px solid $borderC;
+     border-bottom: 1px solid $borderC;
      line-height: pxToRem(88px);
      font-size: pxToRem(28px);
@@ -332,7 +323,7 @@ $basicBtnC:#eb0313;
            font-size: inherit;
        }
    }    
- }
+}
 }
@@ -353,10 +344,8 @@ $basicBtnC:#eb0313;
     .store-logo{
        // padding-right: 35rem/$pxConvertRem;
        img{
-
         width: pxToRem(109px);
         height: pxToRem(68px);
-
         margin-left: 0;
         margin-right: pxToRem(-25px);
     }
@@ -374,17 +363,19 @@ $basicBtnC:#eb0313;
     }
 }
 }
-    .goods-desc{
+.goods-desc{
     .service{
+        width: pxToRem(489px);
+        height: pxToRem(28px);
         margin-top: pxToRem(22px);
     }
-    }
-    .tips{
+}
+.tips{
     color:$subFontC;
     font-size: pxToRem(18px);   
     margin-top: pxToRem(20px); 
-    }
-    .materials{
+}
+.materials{
     .detail{
         img{
             display: block;
@@ -395,12 +386,14 @@ $basicBtnC:#eb0313;
             float: left;
         }
         .material-desc{
-                // float: left;
                 font-size: pxToRem(24px);
+                overflow: hidden;
             }
         }
         .material-type{
+            width: pxToRem(581px);
+            height: pxToRem(99px);
             border-top: 1px solid $borderC;
             padding: pxToRem(17px) 0;
         }
@@ -435,10 +428,15 @@ $basicBtnC:#eb0313;
     }
     #reference-swiper-container{
+
         .first-group{
-            width: pxToRem(58px);
-            >div{
-                height: pxToRem(67px);
+            width: pxToRem(70px);
+            margin-top: pxToRem(66px);
+            .avatar{
+                        line-height: pxToRem(40px);
+                        width: pxToRem(40px);
+                        height: pxToRem(40px);
+                        margin: pxToRem(18px) 0;
             }
         }
     }
@@ -446,7 +444,7 @@ $basicBtnC:#eb0313;
     .measurement-method{
         .detail{
             width: 100%;
-            height: pxToRem(300px);
+            // height: pxToRem(300px);
             img{
              float:left;
              width: pxToRem(270px);
@@ -455,7 +453,7 @@ $basicBtnC:#eb0313;
              margin-right: pxToRem(28px);
          }
          .right-part{
-                float:left;
+            overflow: hidden;
             .title{
                >h1{
                 margin-top: pxToRem(10px);
@@ -480,7 +478,7 @@ $basicBtnC:#eb0313;
                  height: pxToRem(15px);
                  background-color: $basicBtnC;
                  border-radius: 50%;
-                           color:white;
+                 color:#fff;
                  text-align: center;
                  line-height: pxToRem(15px);
                  font-size: pxToRem(13px);
@@ -491,37 +489,33 @@ $basicBtnC:#eb0313;
      }
  }
  clear:both;
-        }
-    }
-    .cart-bar{ 
+}
+}
+.cart-bar{ 
     position: relative;
     box-sizing:border-box;
     width: 100%;
     height: pxToRem(120px);
     position:fixed;
     bottom: 0;
-        background-color: white;
+    background-color: #fff;
     z-index: 64;
     padding:pxToRem(20px) pxToRem(28px);
     text-align: center;
-        
-
     a{
         display: inline-block;
         &.num-incart{
-                width: pxToRem(45px);
-                height: pxToRem(45px);
-                background: url(../img/product/cart.png) no-repeat;
+            font-size: pxToRem(47px);
+            color:#444;
         }
         &.favorite{
-                width: pxToRem(34px);
-                height: pxToRem(32px);
-                background:url(../img/product/favorite.png) no-repeat;
+            font-size: pxToRem(34px);
+            color:$basicBtnC;
         }
         &.addto-cart{
             height: pxToRem(80px);
             width: pxToRem(260px);
-                margin:0  pxToRem(100px) 0 pxToRem(128px);
+            margin:0  pxToRem(100px) 0 pxToRem(115px);
             color: #fff;
             background-color: $basicBtnC;  
             font-size: pxToRem(40px);
@@ -538,11 +532,8 @@ $basicBtnC:#eb0313;
         height: pxToRem(36px);
         background-color: $basicBtnC;
         border-radius: 50%;
-            color:white;
+        color:#fff;
         font-size: pxToRem(24px);
     }
-        
-    }
-
-    
+}
 }
--- a/template/m.yohobuy.com/actions/product/detail/index.phtml
View file @ab8a505
+++ b/template/m.yohobuy.com/actions/product/detail/index.phtml
View file @ab8a505
-
 {{> layout/header}}
 <div class="good-detail-page yoho-page">
-
     <div class="banner-container">
-
         <h1 class="is-new-lable">NEW</h1>
         {{# bannerTop}}
         {{> product/banner_swiper_arrow}}
         {{/ bannerTop}}
     </div>
-    
-
-
     {{# goodsName}}
     <h2 class="goodsName"><span>{{.}}</span></h2>
     {{/ goodsName}}
@@ -21,10 +15,6 @@
     <h1 class="goodsSubtitle"><span>{{.}}</span></h1>
     {{/ goodsSubtitle}}
- <!--     {{# goodsTitle}}
-        <h1 class="goodsTitle">{{.}}</h1>
-        {{/ goodsTitle}} -->
-
     <div class="price-date">
      {{#goodsPrice}}
      <div class="goodsPrice">
@@ -32,44 +22,32 @@
         <h1 class="previousPrice">{{previousPrice}}</h1>
     </div>
     {{/goodsPrice}}
-
     {{#periodOfMarket}}
     <div class="periodOfMarket">
         <h1>上市期：</h1>
         <h1 >{{.}}</h1>
     </div>
     {{/periodOfMarket}}
-    </div>
-    
- <!--      {{# vipLevel}}
-        <div class="vipLevel">
-             {{# list}}
-             {{#if @last}}
-                <span>{{text}}</span>
-                {{^}}
-                <span>{{text}}</span> |
-             {{/if}}
-             {{/ list}}           
-         </div>
-         {{/ vipLevel}} -->
+</div>
-         {{# vipLevel}}
-         <div class="vipLevel">
+{{# vipLevel}}
+<div class="vipLevel">
  {{# list}}
-           <span class="vip-img"><img src="{{img}}" alt=""></span>
+<span class="vip-img">
+    <img class="lazy" data-original="{{img}}" alt="">
+</span>
  <span class="vip-price">{{text}}</span>
  {{/ list}}           
-       </div>
-       {{/ vipLevel}}
+</div>
+{{/ vipLevel}}
-       {{#goodsDiscount}}
-       <div class="goodsDiscount">
+{{#goodsDiscount}}
+<div class="goodsDiscount">
     <h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
-    </div>
-    {{/goodsDiscount}}
-
+</div>
+{{/goodsDiscount}}
-    <div class="feedback-list-page ">
+<div class="feedback-list-page ">
     {{# feedbacks}}
     <ul id="nav-tab" class="nav-tab clearfix">
         <li class="comment-nav focus">{{commentName}}</li>
@@ -104,30 +82,31 @@
         </div>
     </div>
     {{/ feedbacks}}
-    </div>
-    <div class="gap-block"></div>
+</div>
+
+<div class="gap-block"></div>
-    {{# enterStore}}       
-    <div class="enter-store page-block">
+{{# enterStore}}       
+<div class="enter-store page-block">
     <a class="store-logo" href="{{url}}" style="">
-            <img src="{{img}}" alt="{{storeName}}">
+        <img class="lazy" data-original="{{img}}" alt="{{storeName}}">
     </a>
     <a class="store-name" href="{{url}}">{{storeName}}</a>
     <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
-    </div> 
-    {{/ enterStore}}
-    <div class="gap-block"></div>
-    <!--   <iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe> -->
+</div> 
+{{/ enterStore}}
+
+<div class="gap-block"></div>
-     {{#goodsDescription}}
-     <div class="goods-desc  page-block">
-         <img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">
+{{#goodsDescription}}
+<div class="goods-desc  page-block">
+ <img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
  <h1 class="title">
     {{title}}
     <span class="en-title">{{enTitle}}</span>
-        </h1>
-        {{#detail}}
-        <div class="detail table">
+</h1>
+{{#detail}}
+<div class="detail table">
     <div class="row">
         <div class="column">编号：{{nubmer}}</div>
         <div class="column">帽型：{{hatType}}</div>
@@ -144,21 +123,21 @@
         <div class="column">性别：{{gender}}</div>
         <div class="column">风格：{{style}}</div>
     </div> 
-        </div>
-        {{/detail}}
-     </div>
-     {{/goodsDescription}}
+</div>
+{{/detail}}
+</div>
+{{/goodsDescription}}
-    <div class="gap-block"></div>
+<div class="gap-block"></div>
-    {{#sizeInfo}}
-     <div class="size-info  page-block">
+{{#sizeInfo}}
+<div class="size-info  page-block">
  <h1 class="title">
     {{title}}
     <span class="en-title">{{enTitle}}</span>
-        </h1>
-        {{#detail}}
-        <div class="detail">
+</h1>
+{{#detail}}
+<div class="detail">
   <div class="swiper-container detail-swiper" id="size-swiper-container">
     <div class="swiper-wrapper">
         {{#list}}
@@ -169,24 +148,24 @@
         </div>
         {{/list}}
     </div>
-            </div>
-            <p class="tips">提示：左滑查看完整表格信息</p>
-         </div>
-         {{/detail}}
-     </div>
-     {{/sizeInfo}}
+</div>
+<p class="tips">提示：左滑查看完整表格信息</p>
+</div>
+{{/detail}}
+</div>
+{{/sizeInfo}}
-     <div class="gap-block"></div>
+<div class="gap-block"></div>
-    {{#measurementMethod}}
-     <div class="measurement-method  page-block">
+{{#measurementMethod}}
+<div class="measurement-method  page-block">
     <h1 class="title">
         {{title}}
         <span class="en-title">{{enTitle}}</span>
     </h1>
     {{#detail}}
     <div class="detail" style="width:100%">
-            <img src="{{img}}" alt="">
+        <img class="lazy" data-original="{{img}}" alt="">
         <div class="right-part">
             <div class="title">
                 <h1 >{{sort}}</h1>
@@ -220,13 +199,8 @@
                 {{#list}}
                 {{#if @first}}
                 <div class="swiper-slide first-group" >
-                        <div class="model-field" >{{fieldName}}</div>
-                        <div class="first-model">
-                            <img src="{{firstModel}}" alt="">
-                        </div>
-                        <div class="second-model">
-                            <img src="{{secondModel}}" alt="">
-                        </div>
+                        <img class="lazy avatar" data-original="{{firstModel}}"  alt="">
+                        <img class="lazy avatar" data-original="{{secondModel}}" alt="">
                 </div>
                 {{^}}
                 <div class="swiper-slide" >
@@ -241,52 +215,49 @@
         <p class="tips">提示:左滑查看完整表格信息</p>
     </div>
     {{/detail}}
-     </div>
-     {{/reference}}
+</div>
+{{/reference}}
-     <div class="gap-block"></div>
+<div class="gap-block"></div>
-     {{#materials}}
-     <div class="materials  page-block">
+{{#materials}}
+<div class="materials  page-block">
  <h1 class="title">
     {{title}}
     <span class="en-title">{{enTitle}}</span>
-        </h1>
-        <div class="detail">
-            <img src="{{img}}" alt="">
+</h1>
+<div class="detail">
+    <img class="lazy" data-original="{{img}}" alt="">
     <p class="material-desc">
-
         {{desc}}
     </p>
+</div>
+<img class="lazy material-type" data-original="{{materialType}}"  alt="" >
+</div>
+{{/materials}}
-        </div>
-        <img src="{{materialType}}" alt="" class="material-type">
-     </div>
-     {{/materials}}
-
-    <div class="gap-block"></div>
+<div class="gap-block"></div>
-    {{#productDetail}}
-     <div class="product-detail page-block">
+{{#productDetail}}
+<div class="product-detail page-block">
  <h1 class="title">
     {{title}}
     <span class="en-title">{{enTitle}}</span>
-        </h1>
-        <div class="detail">
+</h1>
+<div class="detail">
     <p>{{desc}}</p>
-            <img src="{{img}}" alt="">
-        </div>
-     </div>
-    {{/productDetail}}
-    
+    <img class="lazy" data-original="{{img}}" alt="">
+</div>
+</div>
+{{/productDetail}}
-    {{#cartInfo}}
-    <div class="cart-bar">
+{{#cartInfo}}
+<div class="cart-bar">
     <span class="num-tag">{{numInCart}}</span>
-        <a href="" class="num-incart"></a>
-        <a href="" class="addto-cart">加入购物车</a>
-        <a href="" class="favorite"></a>
-    </div>
-    {{/cartInfo}}
+    <a href="" class="num-incart iconfont">&#xe62c;</a>
+    <a href="" class="addto-cart ">加入购物车</a>
+    <a href="" class="favorite iconfont">&#xe605;</a>
+</div>
+{{/cartInfo}}
 </div>
 {{> layout/footer}}
--- a/yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
View file @ab8a505
+++ b/yohobuy/m.yohobuy.com/application/modules/Product/controllers/Detail.php
View file @ab8a505
@@ -105,7 +105,7 @@ SHOE BQT KEN BLOCK',
             'sizeInfo'=>array(
                   'title' => '尺码信息',
-                  'enTitle' =>'SIZE INFO',
+                  'enTitle' =>'xSIZE INFO',
                   'detail' =>array(
                      'list'=>array(
@@ -169,7 +169,7 @@ SHOE BQT KEN BLOCK',
                   'detail' =>array(
                      'list'=>array(
                          array(
-                             'fieldName'=>' ',
+                             'fieldName'=>'1 ',
                              'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
                              'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
                           ),