基于Ecshop 的移动端商品分类页面总结
2016-03-17 11:34
323 查看
全面基于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"></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"></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="" data-default=""></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="" data-default=""></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="" data-default=""></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="" data-default=""></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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS 离屏渲染的研究
- Android Touch事件传递机制解析
- Android NDK 如何缩减库的大小
- IOS动态为类添加属性
- Android 之 NFC
- Swift 正向传值以及利用闭包(closure)实现反向传值(七)
- Android微信支付遇到的坑
- Android Log日志规则打印
- Android中ListView的addFooterView不显示的问题
- android接收短信——framework处理流程(android 5.1)
- 【Browser】浏览器横屏时程序崩溃
- android 5.1 kernel 编译模块
- Android TextView中显示图片的4种方式
- Android 手势锁
- js中apply使用方法小议
- Android Studio导出JavaDoc出现编码问题
- Android第三方登录详解2
- Android性能优化（1-4）
- Qt MetaObject System详解
- 使用Handler来实现实现事件重复驱动类JobDriver