PC端商城详情页脚本
来源：互联网 发布：计算机编程培训班 编辑：程序博客网 时间：2024/05/17 00:04
例子：在商城详情页中，通过ajax传回来商品的各项参数，根据数组关系找到相应的ID
定义全局样式：var GoodsID;var RelationList = [];var AgentSkuList = {};var _tempSku = new Array(0);var globalVar = {};var AttributeList = {};$(function () { GoodsID = GetQueryString("GoodsID"); globalVar.GoodsID = GoodsID; LoadGoods(); SameBrandGoods(); //商品详情页页面 //固定选择参数框（有2个相同的参数选择框，同步ing~~） if ($(".rt-side").length) { var aa = $(".rt-side").offset().top; $(window).scroll(function () { var bb = $(window).scrollTop(); if (bb > aa) { $(".rt-side").css({ "position": "fixed", "top": 0, "left": 1054 + 'px' }); } else { $(".rt-side").css({ "position": "static" }); } }); } //详情页更多选择（当每种参数大于3个时 用模态框的方式来显示） function initPage() { var $netContent = $(".netContent"); var more = "<li class='goodsMoreType'><span>" + "更多" + "</span></li>" $netContent.each(function () { var list = $(this).find("li"); if (list.length > 3) { $.each(list, function (i) { if (i > 2) { $(this).hide(); } }); $(this).find(".standard").append(more); } }); } initPage(); /*模态框打开*/ $(".goodsMoreType").on("click", function (e) { var skuList = AgentSkuList; $target = $(e.target); var i = $target.parents(".netContent").index(); var goodsattributeid = $target.parents(".netContent").find(".ltword").data("attributeid"); var valueList = $.grep(AttributeList, function (item) { if (item.GoodsAttributeID == goodsattributeid) { return item; } }); var Html = ""; $(".goodsMoreTypeModalContent").html(""); valueList = valueList[0].ValueList; $.each(valueList, function (a, b) { Html += "<li>" + "<span data-attributevalueid=\"" + valueList[a].GoodsAttributeValueID + "\" class=\"u-btn-choose\">" + valueList[a].AttributeValue + "</span></li>"; }); $(".goodsMoreTypeModalContent").html(Html); $(".goodsMoreTypeModal").find("#indexOf").val(i); $(".goodsMoreTypeModal").fadeIn(); }); /*模态框关闭，点击遮罩层关闭*/ $(".close-goodsMoreTypeModal").on("click", function () { $(".goodsMoreTypeModal").fadeOut(); }); $(".goodsMoreTypeModal").on("click", function (e) { $target = $(e.target); var a = $target.parents(".goodsMoreTypeModal-dialog").length; if (a == "1") { return true; } else if (a == "0") { if ($target.hasClass("goodsMoreTypeModal-dialog")) { return true; } else { $(".goodsMoreTypeModal").fadeOut(); } } }); //模态框选择商品 $(".goodsMoreTypeModal-dialog").on("click", "span", function (e) { $currentTarget = $(e.currentTarget); if ($currentTarget.hasClass("u-checked")) { $currentTarget.removeClass("u-checked"); } else { $currentTarget.parents(".goodsMoreTypeModalContent").find(".u-checked").removeClass("u-checked"); $currentTarget.addClass("u-checked"); } }); //模态框保存按钮，与页面的参数同步更新查询 $(".btn-saveGoodsType").on("click", function () { var norms = $(this).parents(".goodsMoreTypeModal-dialog").find(".u-checked").parents("li"); if (norms.length == 1) { var attributevalueid = norms.first().find("span").data("attributevalueid") var i = $("#indexOf").val(); $(".goodsMoreTypeModal").fadeOut(); var netContent = $(".m-detail").find(".netContent"); var thatNetContent = $(".rt-side").find(".netContent"); netContent.eq(i).find(".u-checked").removeClass("u-checked"); thatNetContent.eq(i).find(".u-checked").removeClass("u-checked"); var list = netContent.eq(i).find("li").find("span"); var thatlist = thatNetContent.eq(i).find("li").find("span"); $.each(thatlist, function (j) { if ($(this).data("attributevalueid") == attributevalueid) { var l = 0; var aa = $(this).parents("ul").find("li:visible").find("span"); $.each(aa, function (p) { if ($(this).data("attributevalueid") == attributevalueid) { l = p; return false; } }); aa.eq(l).parents("li").hide(); $(this).addClass("u-checked"); $(this).parents("li").show(); } }); $.each(list, function (j) { if ($(this).data("attributevalueid") == attributevalueid) { var l = 0; var aa = $(this).parents("ul").find("li:visible").find("span"); $.each(aa, function (p) { if ($(this).data("attributevalueid") == attributevalueid) { l = p; return false; } }); aa.eq(l).parents("li").hide(); $(this).addClass("u-checked"); $(this).parents("li").show(); } }); } // 多条件选择完成，查询库存等数据用的，存一个JSON数组传过去 var $selectedItem = $(".m-detail").find(".chooseGoods-tag").find(".u-checked"), selectedArr = [], k; if ($selectedItem.length == $(".m-detail").find(".netContent").length) { for (k = 0; k < $selectedItem.length; k++) { selectedArr.push($selectedItem.eq(k).data("attributevalueid")); } updateGoodsInfo(selectedArr); } }); //筛选数据 function updateGoodsInfo(selectedArr) { var skuList = AgentSkuList, i, j var targetArr = [], index = -1; //筛选数据 for (i = 0; i < skuList.length; i++) { targetArr[i] = new Array(); for (j = 0; j < skuList[i].RelationList.length; j++) { targetArr[i].push(skuList[i].RelationList[j].ItemModel.GoodsAttributeValueID); } } //数据匹配 for (i = 0; i < targetArr.length; i++) { if (selectedArr.sort().toString() == targetArr[i].sort().toString()) { index = i; break; } } //填充数据 if (index != -1) { // 市场价 $(".g-in .MarketPrice").text(skuList[index].SalePrice); // 库存量 $(".u-allStock").text(skuList[index].Store); // 总销量 $(".allSales").text(skuList[index].SaledAmount); // 当前skuID var itemList = skuList[index].RelationList; var AgentGoodsID = skuList[index].AgentGoodsID; globalVar.AgentGoodsID = AgentGoodsID; if (skuList[index].Store == 0) { $(".action").hide(); } else { $(".action").show(); } } } //选取商品参数 $(".g-in").on("click", ".u-btn-choose", function (e) { $target = $(e.target); var a = $target.parents(".rt-side").length; var b = $target.parents(".m-detail").length; if (b == "1") { if ($target.hasClass("u-checked")) { $target.removeClass("u-checked"); var net = $target.parents(".netContent"); var arry = $(".m-detail").find(".netContent"); var index = arry.index(net); $target.parents(".g-in").find(".rt-side").find(".netContent").eq(index).find(".u-checked").removeClass("u-checked"); } else { var length = $target.parents(".netContent").find(".u-checked").length;//判断是否本规格内已选 var newArrey = $(".m-detail").find(".netContent"); var netContent = $target.parents(".netContent"); var number = newArrey.index(netContent); var arrey = $target.parents("ul").find("span"); var index = arrey.index(this); if (length == "0") { $target.addClass("u-checked"); $(".rt-side").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked"); } else if (length == "1") { $target.parents("ul").find(".u-checked").removeClass("u-checked"); $(".rt-side").find(".netContent").eq(number).find("ul").find(".u-checked").removeClass("u-checked"); $target.addClass("u-checked"); $(".rt-side").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked"); } } // 多条件选择完成 var $selectedItem = $(".m-detail").find(".u-checked"), selectedArr = [], i; if ($selectedItem.length == $(".m-detail").find(".netContent").length) { for (i = 0; i < $selectedItem.length; i++) { selectedArr.push($selectedItem.eq(i).data("attributevalueid")); } updateGoodsInfo(selectedArr); } } if (a == "1") { if ($target.hasClass("u-checked")) { $target.removeClass("u-checked"); var net = $target.parents(".netContent"); var arry = $(".rt-side").find(".netContent"); var index = arry.index(net); $target.parents(".g-in").find(".m-detail").find(".netContent").eq(index).find(".u-checked").removeClass("u-checked"); } else { var length = $target.parents(".netContent").find(".u-checked").length;//判断是否本规格内已选 var newArrey = $(".rt-side").find(".netContent"); var netContent = $target.parents(".netContent"); var number = newArrey.index(netContent); var arrey = $target.parents("ul").find("span"); var index = arrey.index(this); if (length == "0") { $target.addClass("u-checked"); $(".m-detail").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked"); } else if (length == "1") { $target.parents("ul").find(".u-checked").removeClass("u-checked"); $(".m-detail").find(".netContent").eq(number).find("ul").find(".u-checked").removeClass("u-checked"); $target.addClass("u-checked"); $(".m-detail").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked"); } } // 多条件选择完成 var $selectedItem = $(".rt-side").find(".u-checked"), selectedArr = [], i; if ($selectedItem.length == $(".rt-side").find(".netContent").length) { for (i = 0; i < $selectedItem.length; i++) { selectedArr.push($selectedItem.eq(i).data("attributevalueid")); } updateGoodsInfo(selectedArr); } } }); //加减符号运算 $(".mui-amount-increase").on("click", function (e) { var $target = $(e.target); var $number = $target.parents(".g-in").find(".mui-amount-input") var initial = parseInt($number.val()); var totalNum = $target.parents("dd").find(".u-allStock").text(); if (initial < totalNum || totalNum == "-1") { initial += 1; } else { return false; } $number.val(initial); }); $(".mui-amount-decrease").on("click", function (e) { var $target = $(e.target); var $number = $target.parent().parent().find(".mui-amount-input") var initial = parseInt($number.val()); if (initial > 1) { initial -= 1; } else { return false; } $number.val(initial); }); //加入购物车和立即购买 $(".u-btn-account").on("click", function (e) { $target = $(e.target); var arrey = $target.parents(".sku").find(".netContent").length; var index = $target.parents(".sku").find(".u-checked").length; var goodsNum = $(".mui-amount-input").val(); var obj = { AgentSkuID: globalVar.AgentGoodsID, GoodsNum: goodsNum, GoodsID: globalVar.GoodsID }; if (index == arrey) { if ($target.hasClass("accountCar")) { var url = "/AgentShop/Details/BuyShoppingCart"; $.ajax({ type: "POST", url: url, data: obj, success: function (data) { var BuyOrderID = data.data; if (data.status == "y") { alert("加入购物车成功！"); } else { alert("加入购物车失败！"); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("提交出错，请重试！"); } }); } else if ($target.hasClass("accountBuy")) { var url = "/AgentShop/Details/BuyShope"; $.ajax({ type: "POST", url: url, data: obj, success: function (data) { setTimeout(function () { location.href = data; }, 2000) }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("提交出错，请重试！"); } }); } } else { alert("请先选择商品规格"); } });});//页面进入加载数据function LoadGoods() { $.ajax({ url: '/AgentShop/Details/GetGoodsInfo?date=' + new Date().getMilliseconds(), type: 'post', dataType: 'json', async: false, data: { GoodsID: GoodsID }, success: function (data) { if (data.status == "n") { } else { AgentSkuList = data.GoodsModel.AgentSkuList; var AgentSkuModel = data.GoodsModel.AgentSkuModel; AttributeList = data.GoodsModel.AttributeList; RelationList = data.GoodsModel.RelationList var newDt = data.GoodsModel; $(".cloud-zoom").attr("href", newDt.ImgUrl); $(".cloud-zoom").find("img").attr("src", newDt.ImgUrl); if (newDt.ImgUrl) { $("#List1").append("<li><div><a href='" + newDt.ImgUrl + "' class='cloud-zoom-gallery' rel=\"useZoom:'zoom1', smallImage: '" + newDt.ImgUrl + "'\"> <img src=\"" + newDt.ImgUrl + "\" name=\"picautozoom\" /></a></div></li>") } //if (newDt.ThumbnailUrl) { // $("#List1").append("<li><div><a href='" + newDt.ThumbnailUrl + "' class='cloud-zoom-gallery' rel=\"useZoom:'zoom1', smallImage: '" + newDt.ThumbnailUrl + "'\"> <img src=\"" + newDt.ThumbnailUrl + "\" name=\"picautozoom\" /></a></div></li>") //} $(".swiper-wrapper").html("<div class=\"swiper-slide\"><a href=\"#\"><img src=\"" + newDt.ImgUrl + "\" alt=\"\"></a></div>"); $(".product_name").html(newDt.GoodsName); $(".promo-price").find(".price").html("¥" + AgentSkuModel.SalePrice); $(".gMarketPrice").html("¥" + "<label class='MarketPrice'>" + AgentSkuModel.MarketPrice + "</label>"); $(".gCode").html(newDt.GoodsCode); $("#DivmarginR1").html(newDt.TransportCost); $("#lbSaleAmount").html(AgentSkuModel.SaledAmount); $(".m-goodsDetails").html(newDt.Description); $(".thisGoodsProduct").find("span").html("¥" + AgentSkuModel.SalePrice); $("#lbStore").html(AgentSkuModel.Store); $(".GoodsNorms").find("img").first().attr("src", newDt.ImgUrl); var Html = ""; $.each(AttributeList, function (a, b) { var ValueList = AttributeList[a].ValueList; Html += " <dl class=\"netContent clearfix padding10\"><dt class=\"ltword padTop12\" data-AttributeID='" + AttributeList[a].GoodsAttributeID + "'>" + AttributeList[a].AttributeName + "</dt>"; Html += "<dd> <ul class=\"standard\">"; $.each(ValueList, function (v, c) { Html += "<li><span class=\"u-btn-choose\" data-AttributeValueID='" + ValueList[v].GoodsAttributeValueID + "'>" + ValueList[v].AttributeValue + "</span></li>"; }); Html += "</ul></dd></dl>"; }); $(".chooseGoods-tag").html(Html); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { } });}var SameBrandGoods = function () { $.ajax({ url: '/AgentShop/Details/GetSameBrandGoods?date=' + new Date().getMilliseconds(), type: 'post', dataType: 'json', async: false, data: { GoodsID: GoodsID }, success: function (data) { if (data.length > 0) { var Html = ""; $.each(data, function (a, b) { Html += "<li><a class=\"pic\" href=\"#\"><img alt=\"\" src=\"" + data[a].ImgUrl + "\">" + "</a><p class=\"name\"><a title=\"\" href=\"#\" target=\"_blank\">" + data[a].GoodsName + "</a> </p></li>"; '' }); $(".Same-brand").find("ul").html(Html); } } });} 0 0
- PC端商城详情页脚本
- 跳转到应用商城App详情页
- 2个PC端商城测试版
- 商城项目实战32：商品详情页实现
- Ecshop 2.7.1 B2B2C 小京东 商城网站 商品详情页二维码显示出错
- 微信小程序之商城分类详情
- 购物商城--商品详情多级联动
- B2Ctt商城09 商品详情页面
- javaWeb购物商城设计---商品详情显示
- 仿今日头条/商城商品详情指示器
- 淘淘商城系列——实现商品详情页面展示
- ThinkPHP 静态缓存 实现商品详情页PC版、手机版静态+SEO优化（未完待续。。。）
- pc移动端自适应布局js脚本（一）
- 类似AppStore详情页
- 爆款详情页
- 佛珠详情页
- 创建详情页
- 详情页+购物车
- Android 平台电容式触摸屏的驱动基本原理
- （2.1.25）关于时间，日期，星期，月份的算法（Java中Calendar的使用方法）
- 读取注册表键值
- 逆向生成MySQL数据库对应的建表与Insert语句(可完成记录的迁移与备份)
- 理解Netty中的Zero-copy
- PC端商城详情页脚本
- Netty之ByteBuf
- 励志名言短句霸气【古诗词版】
- ORA-01000: 超出打开游标的最大数
- Javascript 遍历DOM Tree
- （转）Android Studio 不错的开源库
- Android中手机通讯录的获取
- Python 多线程 多进程 全局解释器锁GIL join
- Sublime Text 3 快捷键精华版
