IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      如何使用javascript实现电商类项目中的购物车功能?

      • 发布时间:
        2019-10-14
      • 版权所有:
        云和教育
      • 分享:

      在电商类项目中,购物车可以说是基本要求了。购物车的综合功能能以及逻辑功能对学习阶段的人来说都能或多或少的提升js知识,锻炼论及能力。购物车中主要分为全选、店铺、单选、价格几大类。javascript实现购物车功能,每个人的编写逻辑风格不同,在此使用以下布局方式。

      配图1 JS购物车功能的实现.jpg

      其中全选的input放在div.all中单放,使用dl包裹一个店铺中的所有商品,可以都多个dl包裹不同的店铺。在每个dl中用dt包裹店铺信息并放置一个input方便实现选中店铺时勾选该店铺内所有商品。之后用dd包裹当前商铺下对应的商品,此处页面并不完善只是加了价格以及一个选择框来相对应实现单选效果使用。

      关于效果的顺序可以随意,可以从点击全选开始。首先使用jquery选中div.all中的input标签添加一个change或者click事件都可以,也可以通过时间监听on来添加。监听当全选对应的input状态发生更改时,让所有input的状态跟当前input的状态一致。

      配图2 JS购物车功能的实现.jpg

      每次更改状态后都可以直接循环获取所有选中dd中input所对应的商品价格相加。若是设置有商品个数需要用个数乘上相对应的商品价格再相加,设置给dt后对应的价格。在循环得到所有dt的价格相加设置给总价。

      配图3 JS购物车功能的实现.jpg

      如果点击是取消全选,也会同时计算店铺后总价为0,从而计算商品总价为0。当点击店铺中对应的input时,需要设置当前店铺下对应的所有商品状态跟当前input状态一致。想要获取当前店铺对应的商品可以根据this当前标签选择使用jquery筛选中对应的查找api来找到并设置。

      配图4 JS购物车功能的实现.jpg

      设置状态后需要根据当前店铺下所有选择商品的价格和来设置店铺后对应的价格。再从新获取所有店铺后边的价格计算和设置给总价格。此处计算所有店铺对应的价格和这个效果在全选中也有使用可以选择封装调用。

      配图5 JS购物车功能的实现.jpg

      同时会出现一个问题,若是选中所有店铺后,全选的状态并没有改变。所有需要在点击商铺时同时判断一下是否是素有店铺都是选中状态,如果是则需要设置全选input的状态跟随店铺更改。

      配图6 JS购物车功能的实现.jpg

      最后当单点需要设置给每一个商品所对应的input按钮。当点击单选按钮时,需要获取当前商品所对应的价格设置给店铺后对应的那个价格。之前编写的效果中有获取每个店铺下对应所有选中商品价格的和,可以选择封装多次调用。在设置店铺价格更改时需要同时更改总价的值。上方代码也有重复,可以封装成函数多次分别调用。

      配图7 JS购物车功能的实现.jpg

      点击商品后若是使当前店铺下所有商品选中,同时也需要操作店铺后对应的input选中,如果不是所有都选中的话需要设置店铺对应的不选中。

      配图8 JS购物车功能的实现.jpg

      当然在更改了店铺的状态时就需要再此更改一下全选的选中状态,调用一下已经封装好的函数。至此购物车的基本效果已经成型。