电商系统常用的产品颜色，尺码选择JS程序实现

一、说业务

这两天，一直在处理，日常电商系统的一个功能。

即，产品规格选择的。主要包括颜色，尺码。

我们主要是做服装。

因此，当客人打开我们的某个产品页面。

有购物车，及立即购物的选择，点击时，即显示这个规格窗口。

供用户选择：

颜色：白，黑

尺码： S ,M,L XL

二、说功能细节。

今天我们要说的，就是这个功能：

首先：我们的产品页面是通过后台生成。

因此，生成的产品页面如8193238.html的页面：

显示的页面效果如下：

其中有两样东西：

1.页面显示的规格窗口，以下是HTML代码

2.在售产品的颜色与尺码（Json对象）

现在来场景举例：

首先，小A打开产品页面。

系统显示产品详情页中，所有的颜色和尺码（这个颜色和尺码是当初建立这个产品时，建立的颜色，尺码，即使后面

断码，也全部都会显示出来）

不过，这里有个初始化工作，即：

我们需要通过一个

for语句，把所有颜色，找出来，并且和当前可售的尺码匹配，如果当前可售的，没有，就显示灰，并不可点击

第三、说说代码

代码如下：

var theColor = $(":radio[name=colorStandard][checked]").val()

var theSize = $(":radio[name=sizeStandard][checked]").val()

if (theColor == undefined || theColor == "")

theColor = null;

if (theSize == undefined || theSize == "")

theSize = null;

var contrlData = getColorSizeItemControls(theColor, theSize);

for (i = 0; i < $("input[name='colorStandard']").length; i++) {

if (contrlData.Colors.indexOf($("input[name='colorStandard']")[i].value) <= -1) {

//$("input[name='colorStandard']")[i].nextSibling.style.display = "none";

$("input[name='colorStandard']")[i].nextSibling.style = "pointer-events: none;"

$("input[name='colorStandard']")[i].nextSibling.style.opacity = "0.2";

} else {

$("input[name='colorStandard']")[i].nextSibling.style = "pointer-events:auto;"

$("input[name='colorStandard']")[i].nextSibling.style.opacity = "1";

}

for (i = 0; i < $("input[name='sizeStandard']").length; i++) {

if (contrlData.Sizes.indexOf($("input[name='sizeStandard']")[i].value) <= -1) {

$("input[name='sizeStandard']")[i].nextSibling.style = "pointer-events: none;"

$("input[name='sizeStandard']")[i].nextSibling.style.opacity = "0.2";

}

else {

$("input[name='sizeStandard']")[i].nextSibling.style = "pointer-events:auto;"

$("input[name='sizeStandard']")[i].nextSibling.style.opacity = "1";

}

不过，这里需要注意的地方是。

我通过nextSibling的方法，无法使用css方法去设置，这里我只是希望把它变化，且点击事件不执行

但，象attr addClass removeAttr等方法都不能用，这是比较奇怪的一个地方。

先不管这个了，好了，通过这个方法，我们就可以把所有颜色尺码初始化

主要是通过getColorSizeItemControls(theColor, theSize)，传入颜色，尺寸，就可以获得在售的颜色尺码。

它将返回一个contrlData={"Colors":["黑色","白色"],"Sizes":["S","L","XL"],"CanGotoCart":false}

它是一个JSON对象，里面有两个属性，Colors,Size,他们均是数组，代表的就是颜色和尺码的在售情况（根据传入的颜色或尺码获得的对象）

这个方法，回头可以细说。

接下来，我们看看当按钮被点击后，所发生的事情：

$(".standard>div input[type=radio]").each(function () {

$(this).hide(); //把radio隐藏

var objALink = $("<a>" + $(this).val() + "</a>");//显示<a>==objALink对象为显示的按钮，this为radio

objALink.insertAfter($(this)); //objALink插入在 radio后面

if ($(this).attr("checked")) { //如果raido是checked ，

objALink.addClass("active"); //则objALink按钮为激活

}

上面的代码，主要是初始化

给类名为standard里 div input是radio的标素，每个执行以下方法

首先，

1）把它们隐藏，

2）创建一个对象，用于显示<a>对象，对象的值就是radio里的值

3）把这个对象，插入到这个radio无素的后面

4）如果这个radio是选中，则<a>对象为激活。

objALink.on('click', function () {

//初始化显示全部显示

$("input[name='colorStandard']").parent().find("a").css("display", "inline-block");

$("input[name='sizeStandard']").parent().find("a").css("display", "inline-block");

var theColorOrSize;

var theCOlorOrSizeValue = "";

theColorOrSize = $(this).parent().find("input")[0].name

theColorOrSizeValue = $(this)[0].innerHTML;

if ($(this).prev("input[type=radio]").attr("checked")) {

$(this).prev("input[type=radio]").attr("checked", false);

$(this).removeClass("active");

$(this).prev("input[type=radio]").trigger("click"); //此this为AObjLink,点击的<a>对象

} else {

$(this).prev("input[type=radio]").attr("checked", true);

$(this).addClass("active");

}

$(this).prev("input[type=radio]").trigger("click");

$(this).siblings("a").removeClass("active"); //把其它AObjLink去掉active

//$(this).prev("input[type=radio]").attr("checked", "checked"); //给AobjLink前一个radio Checked一下

//给radio触发 click事件

$(this).prev("input[type=radio]").siblings("input[type=radio]").removeAttr("checked");//把其它radio 去掉checked

//取得color

//取得size

var theColor = $(":radio[name=colorStandard][checked]").val()

var theSize = $(":radio[name=sizeStandard][checked]").val()

//=========================由robin提供=========================

//取得可以显示的颜色和尺码

//var contrlData = getColorSizeItemControls(null, "XL");

if (theColor == undefined || theColor == "")

theColor = null;

if (theSize == undefined || theSize == "")

theSize = null;

var contrlData = getColorSizeItemControls(theColor, theSize);

// document.writeln(JSON.stringify(contrlData));

//1.当用户点击XL

// 1）把当前AObjLink置为激活

// 2) 把除AObjLink之后的控件，removeClass

// 3) 把旁边的Radio Check一下

// 4) 触发一下Radio 的click事件

// 5）把Radio之外的控件，全部removeAttr Checked

//2.当用户点击蓝色

//把颜色显示出来

for (i = 0; i < $("input[name='colorStandard']").length; i++) {

//默认false

var hadColor = true;

if (contrlData.Colors.indexOf($("input[name='colorStandard']")[i].value) <= -1) {

//$("input[name='colorStandard']")[i].nextSibling.style.display = "none";

$("input[name='colorStandard']")[i].nextSibling.style = "pointer-events: none;"

$("input[name='colorStandard']")[i].nextSibling.style.opacity = "0.2";

} else {

$("input[name='colorStandard']")[i].nextSibling.style = "pointer-events:auto;"

$("input[name='colorStandard']")[i].nextSibling.style.opacity = "1";

}

for (i = 0; i < $("input[name='sizeStandard']").length; i++) {

if (contrlData.Sizes.indexOf($("input[name='sizeStandard']")[i].value) <= -1) {

$("input[name='sizeStandard']")[i].nextSibling.style = "pointer-events: none;"

$("input[name='sizeStandard']")[i].nextSibling.style.opacity = "0.2";

}

else {

$("input[name='sizeStandard']")[i].nextSibling.style = "pointer-events:auto;"

$("input[name='sizeStandard']")[i].nextSibling.style.opacity = "1";

}

var dispText = "已选择";

if ($(":radio[name=colorStandard][checked]").val() != undefined)

dispText = dispText + " " + $(":radio[name=colorStandard][checked]").val() + " ";

if ($(":radio[name=sizeStandard][checked]").val() != undefined)

dispText = dispText + " " + $(":radio[name=sizeStandard][checked]").val() + " ";

$(".standardtext").html(dispText);

});

电商系统常用的产品颜色，尺码选择JS程序实现相关推荐

电商系统商品中心产品设计
由于商业性质决定了电商业务支撑系统必须具备稳定性.可扩展.安全性强等特点,PM在设计产品架构时,应充分考虑到业务发展需要,尽量将各模块隔离,商品模块建个商品中心,订单模块建个订单中心. 只有在产品设计 ...
HH SaaS电商系统移动端商城，买家选择商品规格的交互设计
文章目录未完整选择商品规格时商品图如何显示库存如何显示价格如何显示选择规格提示文案如何显示原型图已选完整选择商品规格时商品图如何显示库存如何显示价格如何显示原型图 SKU下架后如 ...
【项目实战经验】电商系统常用数据结构
查看全文 http://www.taodudu.cc/news/show-5356572.html 相关文章: android电商评论,三步教你获取电商评论数据黑马Vue电商电商数据仓库理论 ja ...
前端学习（1882）vue之电商管理系统电商系统之设置字体颜色并添加标签
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
ShopXO开源电商系统源码支持PC+H5支付宝小程序微信小程序百度小程序头条amp；抖音小程序QQ小程序APP等
介绍: ShopXO开源电商体系,国内抢先企业级.支撑PC+H5.支付宝小程序.微信小程序.百度小程序.头条&抖音小程序.QQ小程序.APP等- 支撑多库房.多商户形式运营(组件插件化.即插即 ...
ShopXO开源电商系统源码支持PC+H5支付宝小程序微信小程序百度小程序头条抖音小程序QQ小程序APP等
介绍: ShopXO开源电商体系,国内抢先企业级.支撑PC+H5.支付宝小程序.微信小程序.百度小程序.头条&抖音小程序.QQ小程序.APP等- 支撑多库房.多商户形式运营(组件插件化.即插即 ...
商淘多b2b2c商城系统怎么在个人电脑上安装_社交电商系统开发是否有价值？
电商平台已经呈现出平稳发展之势,再加上近年来星期的社交,让社交电商平台蓬勃发展,不仅是小平台,京东.唯品会.小米等纷纷有了自己的社交电商平台,说明了社交+电商是发展的大趋势,开发社交电商系统也是创业 ...
电商 php 颜色数据怎么敲?_来客说电商|电商系统开发注意事项
来客B2B2C多用户电商系统打造支持自营+招商入驻经营模式的电商平台(类似京东.天猫的经营模式),创新模块化设计整合运营商,供货商,批发商,入驻商,分销商,门店于一体,各个模块可自由拆分组合,可以让商 ...
常用电商系统优劣势对比—管易云、远丰电商、电商宝、海商、旺店通ERP、百数
如今,各大电商行业已经风生水起,京东.天猫.淘宝各大电商商城已经无人不知无人不晓,那么面对每天滔滔不绝不绝的订单,你需要如果去处理呢?毋庸置疑,面对大批量的订单和各渠道的店铺,你肯定需要一个成熟实际而 ...
JAVA电子产品专卖电商系统计算机毕业设计Mybatis+系统+数据库+调试部署
JAVA电子产品专卖电商系统计算机毕业设计Mybatis+系统+数据库+调试部署 JAVA电子产品专卖电商系统计算机毕业设计Mybatis+系统+数据库+调试部署本源码技术栈: 项目架构:B/S架构 ...

电商系统常用的产品颜色，尺码选择JS程序实现

电商系统常用的产品颜色，尺码选择JS程序实现相关推荐

最新文章

热门文章