基于Ecshop 的移动端商品分类页面总结

最新推荐文章于 2022-11-20 01:51:59 发布

F2E前端爱好者

最新推荐文章于 2022-11-20 01:51:59 发布

阅读量3.8k

点赞数 1

分类专栏： javascript css3 厦门 jquery

本文链接：https://blog.csdn.net/laike1355/article/details/50912287

版权

javascript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

jquery

22 篇文章 0 订阅

订阅专栏

css3

21 篇文章 0 订阅

订阅专栏

全面基于ajax

category_all.dwt html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
    <!--考虑到iPhone ipad 使用的retina 屏幕 dpr=2 所以 1/2=0.5 进行适配对页面进行缩放 可能导致字体变化但是使用rem 暂时不存在此问题-->
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link href="{$ectouch_themes}/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/gloabal.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/slider.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/ycaidao.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/category.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/alert.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/swiper-3.3.1.min.css">
    <link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/all-animation.css">
    <script src="{$ectouch_themes}/jsnew/jquery-2.2.1.min.js"></script>
    <style>
       .ycd-header-search-box-top form{
            width:100%;
            height:100%;
       }
       .yc-swiper-categry-left-tab .ycd-left-tab-slide a{
             display:block;
             width:100%;
             height:100%;
             color:#2b2b2b;
       }
    </style>
    <title>{$page_title} 触屏版</title>
</head>
<body>
<script type="text/javascript">
var process_request = "{$lang.process_request}";
var username_exist = "{$lang.username_exist}";
var compare_no_goods = "{$lang.compare_no_goods}";
var btn_buy = "{$lang.btn_buy}";
var is_cancel = "{$lang.is_cancel}";
var select_spe = "{$lang.select_spe}";
</script>
<div id="ohsnap"></div>
<!--头部搜索-->
<div class="ycd-header-search-box-top">
    <div class="ycd-js-search-input-box">
        <i class="ycd-font-icon ycd-js-service-icon inline-block">&#xe627;</i>
         <form method="post" action="search.php" name="searchForm" id="searchForm_id">
           <input type="text" name="search" value="" placeholder="搜索菜品名称" class="ycd-js-search-input ycd-font-icon">
           <i class="ycd-font-icon ycd-js-search-icon">&#xe622;</i>
         </form>
    </div>
</div>
<div class="ycd-js-container">
          <div class="swiper-container" id="swiper-container2" >
            <div class="swiper-wrapper swiper-catogry-tab-title-list">
                <!--{foreach from=$pcat_array item=cat name=no}-->
               {if $cat.cat_id }
                        {if $smarty.foreach.no.index  eq 0}
                        <div class="swiper-slide active-nav">{$cat.name|escape:html}</div>
                        {else}
                        <div class="swiper-slide">{$cat.name|escape:html}</div>
                        {/if}
               {else}
               <div class="swiper-slide"><a href="{$cat.url}">{$cat.name|escape:html}</a></div>
               {/if}
              <!--{/foreach}-->
            </div>
        </div>
        <div class="swiper-container" id="swiper-container3">
            <div class="swiper-wrapper">
             <!--{foreach from=$pcat_array item=cat name=no}-->
               {if $cat.cat_id }
                                        <div class="swiper-slide">
                                              <!--这里面我们还需要进行嵌套分两个部分 tab切换-->
                                              <ul class="yc-swiper-categry-left-tab" data-listview="6" data-listheight="" >
                                                    <!--{foreach from=$cat.cat_id item=child name=no1 }-->
                                                    {if $smarty.foreach.no1.index  eq 0}
                                                    <li class="ycd-left-tab-slide active-nav">
                                                    <a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a> 
                                                    </li>
                                                    {else}
                                                    <li class="ycd-left-tab-slide">
                                                    <a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a> 
                                                    </li>
                                                    {/if}
                                                    <!--{/foreach}--> 
                                            </ul>
                                            <!--{foreach from=$cat.cat_id item=child name=no1 }-->
                                            <div class="yc-swiper-right-list-content" id="ycd-content-{$child.id}" data-target="{$child.url}" data-parentid="{$child.id}">
                                                   <div class="yc-swiper-right-list-item">
                                                            <div class="pro-inner"></div>
                                                   </div>
                                                   <a href="javascript:;" class="get_more"></a>
                                            </div>      

                                            <!--{/foreach}--> 
                                        </div>
               {/if}
              <!--{/foreach}-->
            </div>
        </div>
        <div class="ycd-bottom-fixed">

        </div>
</div>
<!-- #BeginLibraryItem "/library/page_footer_new.lbi" --><!-- #EndLibraryItem --> 
<script>
Zepto(function($){

    var mySwiper2 = new Swiper('#swiper-container2',{
    watchSlidesProgress : true,
    watchSlidesVisibility : true,
    slidesPerView : 4,
    loop:false,
    spaceBetween:60,
    onTap: function(){
                mySwiper3.slideTo( mySwiper2.clickedIndex);
                if(mySwiper2.clickedIndex !== undefined){
                  $('#swiper-container3 .swiper-slide').eq(mySwiper2.clickedIndex).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap');
                }
                //console.log(mySwiper2.clickedIndex);
                //$('#swiper-container3 .swiper-slide').eq(mySwiper2.clickedIndex).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap');
            }

    }
    );
    var mySwiper3 = new Swiper('#swiper-container3',{
            onSlideChangeStart: function(){
                        updateNavPosition();
                    },
                    onSlideChangeEnd:function(){
                       if(mySwiper3.activeIndex !== undefined){
                           $('#swiper-container3 .swiper-slide').eq(mySwiper3.activeIndex).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap');
                      }

                    }
    });
    function updateNavPosition(){
            $('#swiper-container2 .active-nav').removeClass('active-nav')
            var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index()>mySwiper2.activeIndex) {
                    var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1
                    mySwiper2.slideTo(activeNav.index()-thumbsPerNav)
                }
                else {
                    mySwiper2.slideTo(activeNav.index())
                }   
            }
            // $('#swiper-container3 .swiper-slide').eq(mySwiper2.activeIndex+1).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap');
    }
       //初始化swiper
   $('.swiper-slide .yc-swiper-categry-left-tab li').tap(function(event){
    event.preventDefault();
    var index = $(this).index();
    $(this).parent().find('li').removeClass('active-nav').eq(index).addClass('active-nav')
    $(this).parent().parent().find('.yc-swiper-right-list-content').hide().eq(index).show('slow');
    //进行ajax 导航
    var id = $(this).find('a').data('id');
    var data_target= '#ycd-content-'+id;
    jQuery(data_target).html(' <div class="yc-swiper-right-list-item"><div class="pro-inner"></div></div><a href="javascript:;" class="get_more"></a>');
    jQuery(data_target).more({'address': 'category.php?act=asynclist&category='+id+'&brand=0&price_min=0&price_max=0&filter_attr=0&page=1&sort=goods_id&order=DESC', 'template':'.yc-swiper-right-list-item','spinner_code':'<div style="text-align:center; margin:10px;"><img src="{$ectouch_themes}/images/loader.gif" /></div>','last':0});
   });
   $('.swiper-slide').each(function(index,item){
           $(this).find('.yc-swiper-right-list-content').hide().eq(0).show('slow');
   });
   //当也面初始化的时候进行第一个tab 自动触发防止页面空白 
   $('#swiper-container3 .swiper-slide').eq(0).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap');

});
/**
 * 点选可选属性或改变数量时修改商品价格的函数
 */
var _num = null;
var _goods_id = 1;
var _parent_id = 0;
var _origin_num = 1;
var _goods_num = 1;
function changePrice(_this)
{
  var _operation = _this.getAttribute('data-operation');
  _goods_id = _this.getAttribute('data-goods-id');
  _parent_id = _this.getAttribute('data-cat-id');
  if( _operation === 'pre'){
     _num = _this.nextElementSibling;
  }else if(_operation === 'next'){
    _num = _this.previousElementSibling;
  }
  var qty = _num.value;
  _origin_num = qty;
  jQuery.get('goods.php',{act:'price',id:_goods_id,attr:'',number:qty},changePriceResponse,'JSON');
}

/**
 * 接收返回的信息
 */
function changePriceResponse(res)
{
  if (res.err_msg.length > 0)
  {
    alert(res.err_msg);
  }
  else
  {
    _num.value = _goods_num = res.qty;

    //添加到购物车操作
    addToCartflow(_goods_id);

  }
}

function addToCartflow(goodsId, parentId)
{
  var goods        = new Object();
  var spec_arr     = new Array();
  var fittings_arr = new Array();
  var quick        = 0;
  goods.quick    = quick;
  goods.spec     = spec_arr;
  goods.goods_id = goodsId;
  goods.number   = _goods_num;
  goods.parent   = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
  jQuery.post('flow.php?step=add_to_cart',{goods:jQuery.toJSON(goods)},addToCartflowResponse,'JSON');
}
function addToCartflowResponse(result)
{
  if (result.error > 0)
  {
    // 如果需要缺货登记，跳转
    if (result.error == 2)
    {
       Zepto('body').popup({
            title:'提示信息'
            ,id:'alert'
            ,closeOnOk:true
            ,ok:'确定',
            message:result.message
        });
    }
    // 没选规格，弹出属性选择框
    else if (result.error == 6)
    {
      openSpeDivflow(result.message, result.goods_id, result.parent);
    }
    else
    {
        Zepto('body').popup({
            title:'提示信息'
            ,id:'alert'
            ,closeOnOk:true
            ,ok:'确定',
            message:result.message
        });

    }
  }

  else
  {
    var cartInfo = document.getElementById('ECS_CARTINFO');
    var cartNum = document.getElementById('ECS_CARTINFO_TOTAL_NUMBER');
    var cart_url = 'flow.php?step=cart';
    if (cartInfo)
    {
      jQuery(cartInfo).fadeIn(600).delay(3000).fadeOut(600);
      jQuery(cartInfo).find('.cart-info-total').html(result.content);
      cartNum.innerHTML = result.cart_number;
    }
      switch(result.confirm_type)
      {
       default :
          //不用提示弹出框
          //opencartDivflow(result.shop_price,result.goods_name,result.goods_thumb,result.goods_brief,result.goods_id,result.goods_price,result.goods_number);
          break;
     }
  }
}
//打开商品属性对话框
function openSpeDivflow(message, goods_id, parent)
{       
        //先检查页面上是否有一个id位specDivForm 的表单 如果有的话那么闲删除了然后再进行添加
        if(document.getElementById('specDivForm')){
           document.body.removeChild(document.getElementById('specDivForm'));
        }
        var specDivForm= document.createElement('form');
        specDivForm.id="specDivForm";
        var i = 0;

        var sel_obj = document.getElementsByTagName('select');

        while (sel_obj[i])
        {
            sel_obj[i].style.visibility = "hidden";
            i++;
        }
        for (var spec = 0; spec < message.length; spec++) {
            specDivForm.innerHTML += '<h2>'+message[spec]['name']+'</h2>'
            if (message[spec]['attr_type'] == 1)
            {
                    for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++)
                    {
                      if (val_arr == 0)
                      {
                        specDivForm.innerHTML += "<p><input  type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' checked /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>';
                      }
                      else
                      {
                        specDivForm.innerHTML += "<p><input  type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>';
                      }
                    }
                    specDivForm.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />";

            }else{
                    for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++)
                    {
                    specDivForm.innerHTML += "<p><input  type='checkbox' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>';
                    }
                    specDivForm.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />";
            }
        }

        document.body.appendChild(specDivForm);

        Zepto('body').popup({
            title:select_spe
            ,id:'pop-1'
            ,closeOnOk:true
            ,ok:'提交',
            formId:'specDivForm',
            onOk:function(){
               submit_divflow(goods_id,parent);
            },
            message:''
        });
}
//获取选择属性后，再次提交到购物车
function submit_divflow(goods_id, parentId)
{
  var goods        = new Object();
  var spec_arr     = new Array();
  var fittings_arr = new Array();
  var input_arr      = document.getElementsByTagName('input');
  var quick        = 1;
  var spec_arr = new Array();
  var j = 0;
     for (i = 0; i < input_arr.length; i ++ )
    {
    var prefix = input_arr[i].name.substr(0, 5);
    if (prefix == 'spec_' && (

      ((input_arr[i].type == 'radio' || input_arr[i].type == 'checkbox') && input_arr[i].checked)))

    {

      spec_arr[j] = input_arr[i].value;

      j++ ;

    }

  }
    goods.quick    = quick;

    goods.spec     = spec_arr;

    goods.goods_id = goods_id;

    goods.number   = _goods_num;

    goods.parent   = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);

    jQuery.post('flow.php?step=add_to_cart',{goods:jQuery.toJSON(goods)},addToCartflowResponse,'JSON');

    var i = 0;

    var sel_obj = document.getElementsByTagName('select');

    while (sel_obj[i])

    {

      sel_obj[i].style.visibility = "";

      i++;

   }
}
</script>
<!--底部提示框-->
<div class="ycd-bottom-cart-info" id="ECS_CARTINFO" style="display:none;">
      <div class="cart-info-total">
        共：221元（免运费）
      </div>
      <a class="cart-info-checkout" href="flow.php">
        结算(<span id="ECS_CARTINFO_TOTAL_NUMBER"></span>)
      </a>
</div>
</body>
</html>

page_footer.lbi html 代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--底部导航栏-->
<div class="ycd-bottom">
      <div class="ycd-foot-tab">
         <a class="ycd-foot-tab-a " href="./">
            <span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-index " data-current="&#xe609;" data-default="&#xe60a;"></span>
            <div class="ycd-foot-tab-name">首页</div>
         </a>
      </div>
      <div class="ycd-foot-tab">
         <a class="ycd-foot-tab-a ycd-foot-tab-a-cur" href="cat_all.php">
            <span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-categry" data-current="&#xe626;" data-default="&#xe623;"></span>
            <div class="ycd-foot-tab-name">全部商品</div>
         </a>
      </div>
      <div class="ycd-foot-tab">
         <a class="ycd-foot-tab-a" href="flow.php?step=cart">
            <span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-cart" data-current="&#xe616;" data-default="&#xe617;"></span>
            <div class="ycd-foot-tab-name">购物车</div>
         </a>
      </div>
      <div class="ycd-foot-tab">
         <a class="ycd-foot-tab-a" href="user.php">
            <span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-my" data-current="&#xe61b;" data-default="&#xe61c;"></span>
            <div class="ycd-foot-tab-name">我的</div>
         </a>
      </div>
</div>
<script src="{$ectouch_themes}/jsnew/zepto.js"></script>
<script src="{$ectouch_themes}/jsnew/utils.js"></script>
<script src="{$ectouch_themes}/jsnew/common.js"></script>
<script src="{$ectouch_themes}/jsnew/jquery.more.js"></script>
<script src="{$ectouch_themes}/jsnew/zepto.slider.js"></script>
<script src="{$ectouch_themes}/jsnew/zepto.popup.js"></script>
<script src="{$ectouch_themes}/jsnew/swiper3.1.zepto.js"></script>
<script src="{$ectouch_themes}/jsnew/jquery.json.js"></script>

<script src="{$ectouch_themes}/jsnew/app.js"></script>