yuncart商品详情页数据格式 - Javascript操作规格是否可选

<script type="text/javascript">
$(function() {
Product.init(
		{
			itemid		:'<!--{$itemid}-->',
			productstr	:'<!--{def($productstr)}-->',
			specnum		:'<!--{if $itemspecs}--><!--{count($specs)}--><!--{else}-->0<!--{/if}-->',
			favorurl	:"<!--{url('index','item','addfavor')}-->",
			notifyurl	:"<!--{url('index','item','addnotify')}-->",
			compriceurl	:"<!--{url('index','item','comprice')}-->",
			carturl		:"<!--{url('index','cart','addCart')}-->",
			dis			:'<!--{if ($dis)}-->1<!--{else}-->0<!--{/if}-->',
			tuan		:'<!--{if ($tuan)}-->1<!--{else}-->0<!--{/if}-->'
		}
	);
});
</script>

只有itemid,productstr,specnum必须,其他参数忽略。

itemid是商品id,$productstr(货品的数组,以json字符串形式传递过来),$specs(商品有几个规格)在上篇文章中有提到。

<ul id="spec_规格ID">

        <li>

                <a id="specval_规格值ID"></a>

        </li>

</ul>

var Product = {
	products:null,//所有货品
	itemid:null,//商品ID
	type:'',imgsrc:'',text:'',//无视掉
	target:{},			//当前被点击a
	parent:{},			//当前被点击li
	selectspec:{},		        //当前已经选择的规格
	specid:'',			//当前点击的specid(规格ID)
	specvalid:'',		        //当前点击的specvalid(规格值ID)
	specnum:0,			//所有规格的数量
	pro: {},			//当前选择货品
	ssize:50,			//小图,无视掉
	bsize:310,			//大图,无视掉
	dis:false,			//是否折扣,无视掉
	tuan:false,			//是否团购,无视掉

	compriceurl:false,	//投诉价格,无视掉
	init:function(options) {
		try{
			this.products = eval('(' + options.productstr + ')');// productstr的数据格式看上篇文章
		}catch(ex) {
			this.products = {};
		}
		this.itemid		 = options.itemid;
		this.specnum	 = parseInt(options.specnum) || 0;
		this.favorurl	 = options.favorurl;//无视掉
		this.notifyurl	 = options.notifyurl;//无视掉
		this.carturl	 = options.carturl;//无视掉
		this.dis		 = parseInt(options.dis) || 0;//无视掉
		this.tuan		 = parseInt(options.tuan) || 0;//无视掉
		this.compriceurl = options.compriceurl;//无视掉
	},
	select:function(obj,type) {
		this.target		= $(obj);//当前点击元素
		this.parent		= this.target.parent();
		this.type		= type;  //当前点击类型,pic,text
		//选择该元素
		this.parent.siblings().removeClass("selected").end().addClass('selected');
		this.setSpec();
		//改变图片
		if(this.type == "pic") {
			this.imgsrc	= this.target.css('background-image').replace(/\"/g,"").replace(/url\(|\)$/ig, "");
			this.chgpic();
		}
		//设置按钮的选择与不可选择
		this.setAllow();
		if(this.checkCanBuy()) {
			this.hideHint();
			this.setPro();
		}
	},
	setSpec:function() {
		//当前选择元素的specvalid,specid,加入selectspec
		this.specvalid = this.target.attr("id").replace('specval_','');
		this.specid	   = this.parent.parent().attr("id").replace('spec_','');
		this.selectspec[this.specid] = this.specvalid;
	},
	chgpic:function() {//改变产品图片
		if(this.target.hasClass('notallow')) return ;
		var simg = "_" + this.ssize + "x" + this.ssize + ".jpg",
			bimg = "_" + this.bsize + "x" + this.bsize + ".jpg";

		var src = this.imgsrc.replace(simg,'');
		$("#picimg").attr("src" , src + bimg);
		$("#pic").attr("href",src);
		$("#pic")[0].largeimageloaded = false;
	},
	setAllow:function() {//设置allow数组
		if(this.target.hasClass('notallow')) return ;
		var allow = this.getAllow();
		for(var k in allow) {
			$("#spec_" + k).find("a").each(function() {
				var $this = $(this),specvalid = $this.attr("id").replace('specval_','');
				($.inArray(specvalid,allow[k]) != -1) && $this.parent().removeClass("notallow") || $this.parent().addClass('notallow');
			});
		}
	},
	getAllow:function(){//返回allow数组
		var p		= true,
			allow	= {},
			_this	= this;
		$.each(this.products,function(i,v) {
			p = true;
			for(var k in _this.selectspec) { //判断产品相似部分
				if(v['spec'][k] != _this.selectspec[k]) {
					p = false;
					break;
				}
			}
			if(!p) return true;
			for(var k in v['spec']) {
				if( k == _this.specid ) continue;
				if(typeof allow[k] == "undefined") {
					allow[k] = [v['spec'][k]];
				} else if($.inArray(v['spec'][k],allow[k]) == -1) {
					allow[k].push(v['spec'][k]);
				}
			}
		});
		return allow;
	},
	setPro:function() {
		var _this = this;
		$.each(this.products,function(i,v) {
			var thepro = true;
			for(var k in v['spec']) {
				if(v['spec'][k] != _this.selectspec[k]) {
					thepro = false;
					break;
				}
			}
			if(thepro) {
				_this.pro = v;
				return false;
			}
		});
		$("#inventory").text(_this.pro.inventory);
		if(_this.pro.inventory == 0) { //如果库存为0
			$(".button_car").hide();
			$(".button_notice").show();
		} else { //库存不为0
			$(".button_car").show();
			$(".button_notice").hide();
		}
		if(_this.tuan) return true;
		if(_this.dis) {//如果是价格
			$("#disprice").text(_this.pro.price);
		} else {
			$("#price").text(_this.pro.price);
		}
	},
	checkCanBuy:function() {
	   return this.specnum == $.util.objectLen(this.selectspec)
	},
	getPostData:function (){
		if(typeof this.pro.productid != "undefined") {
			return {productid:this.pro.productid};
		} else {
			return {itemid:this.itemid};
		}
	},
	addCart:function(){ //
		if(this.checkCanBuy()) { //如果可以购买
			var postdata	= this.getPostData();
			postdata['num'] = parseInt($("#buynum").val());
			$.tbox.popup(this.carturl,"POST",postdata);
		} else {
			this.showHint();
		}
	},
	addFavor:function() {
		$.tbox.popup(this.favorurl,"POST",{itemid:this.itemid});
	},
	addNotify:function(type) {
		var postdata	= this.getPostData();
		postdata['type'] = type;
		$.tbox.popup(this.notifyurl,"POST",postdata);
	},
	addComprice:function() {
		var postdata	= this.getPostData();
		$.tbox.popup(this.compriceurl,"GET",postdata);
	},
	showHint:function() {
		$(".buyinfo").addClass('nobuy');
		$(".buybutton").hide();
		$(".spechint").removeClass('none');
	},
	hideHint:function() {
		$(".buyinfo").removeClass('nobuy');
		$(".spechint").addClass('none');
		$(".buybutton").show();
	}
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值