请教大牛：用JavaScript实现购物车问题

phoenix-sky 社区高级成员 T9 2014-01-27 04:08:29
想实现一个购物车，主要功能如下。
1 采用JavaScript编写，数据通过Ajax从后台提取，用HTML5的 localStorage / sessionStorage 做数据储存；
2 每件商品可购买多次，比如点击 iPhone两次，价格就是560*2=1120了；
3 如果商品有配件，就显示配件区域；
4 可能这样购买商品：先买一件标准价格的商品，然后买一件标准价格+多个配件的同样商品；
5 如果购买配件，那么配件价格和相关商品价格统一计算；
6 最下面的商品件数（不包括配件）和总价格是实时更新的。

看了网上几个购物车，虽然知道需要大量操作数组和对象及处理JSON数据，但还是完全没思路，在此请教这里的大牛，非常感谢！
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>shopCart</title>

<style>

*{ margin:0; padding:0; border:0; list-style:none; font-style:normal; font-weight:100; }

body{ padding:20px; font:normal normal 100 14px/1.6 arial; color:#888; text-transform:capitalize; background:#fff; }

a,

a:hover{ text-decoration:none; }

/*=shop cart*/

.shopcart{ margin:0 auto; width:500px; padding:10px; border:1px solid #ccc; }

.list{ text-transform:none; }

.list li{ padding:0 6px; border-bottom:1px solid #eee; overflow:hidden; }

.list li:hover{ background:#fafafa; }

.list_i{ display:block; height:30px; line-height:30px; overflow:hidden; }

.list_i:hover{ background:#fafafa; }

.list_itit,

.list_inum,

.list_iprice{ display:block; width:380px; height:30px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; float:left; }

.list_itit{ color:#00c; }

.list_inum{ width:38px; height:14px; line-height:14px; padding:4px; border:1px solid #ddd; margin:3px 0; }

.list_iprice{ width:60px; text-align:right; color:#f60; }

/****************/

.list_sub{ padding:4px 0; border-top:1px solid #eee; }

.list_isub{ line-height:22px; overflow:hidden; }

.list_istit{ width:400px; float:left; }

.list_istit input{ vertical-align:middle; }

.list_istit span{ padding:0 0 0 4px; }

.list_isprice{ width:88px; float:left; text-align:right; color:#f60; }

/****************/

.total_msg{ padding:10px 10px 0; text-align:right; }

.total_msg strong{ padding:0 2px; color:#222; }

.total_msg .totalprice{ color:#f60; font-size:18px; }

</style>

</head>

<body>

<div class="shopcart">

    <ul class="list">

        <li>

        <p class="list_i"><span class="list_itit">iPhone</span><input type="number" value="0" min="1" class="list_inum"><span class="list_iprice">560</span></p>

            <div class="list_sub">

                <p class="list_isub"><label class="list_istit"><input type="checkbox" name="list_fitting"><span>Fitting 01</span></label><span class="list_isprice">5</span></p>

                <p class="list_isub"><label class="list_istit"><input type="checkbox" name="list_fitting"><span>Fitting 02</span></label><span class="list_isprice">2</span></p>

                <p class="list_isub"><label class="list_istit"><input type="checkbox" name="list_fitting"><span>Fitting 03</span></label><span class="list_isprice">8</span></p>

                <p class="list_isub"><label class="list_istit"><input type="radio" name="list_fitting"><span>Fitting 04</span></label><span class="list_isprice">9</span></p>

                <p class="list_isub"><label class="list_istit"><input type="radio" name="list_fitting"><span>Fitting 05</span></label><span class="list_isprice">12</span></p>

            </div>

        </li>

        <li>

            <p class="list_i"><span class="list_itit">iMac</span><input type="number" value="0" min="1" class="list_inum"><span class="list_iprice">3800</span></p>

        </li>

        <li>

            <p class="list_i"><span class="list_itit">Macbook Pro</span><input type="number" value="0" min="1" class="list_inum"><span class="list_iprice">2900</span></p>

        </li>

    </ul>

    <div class="total_msg">

        <p>count:<strong class="totalnum">0</strong></p>

        <p>total price:<strong class="totalprice">0</strong>$</p>

    </div>

</div>

<script>

/*=shop cart*/

/*=data:json*/

</script>

</body>

</html>
...全文
1095 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
巴山虎 2014-02-07
  • 打赏
  • 举报
 回复
1 采用JavaScript编写，数据通过Ajax从后台提取，用HTML5的 localStorage / sessionStorage 做数据储存； //使用session记录更好，更安全，不易出错。数据库设置购买状态，进入购物车（付款前）为0，这样就很方便根据用户名提取购物车信息，期间通过ajax存取。 2 每件商品可购买多次，比如点击 iPhone两次，价格就是560*2=1120了； //不能这么做，应该增加一个select，可以选择买2台3台4台…… 3 如果商品有配件，就显示配件区域； //这是后台数据表设置问题，存取和主件关联的配件。 4 可能这样购买商品：先买一件标准价格的商品，然后买一件标准价格+多个配件的同样商品； //设置套餐数据表，套餐12345……，这样数据结构就变成了：套餐---主件及各类配件，当然配件也可以自己做成另外一个表。 5 如果购买配件，那么配件价格和相关商品价格统一计算； //价格设置简单问题，状态01即可解决.................... 6 最下面的商品件数（不包括配件）和总价格是实时更新的。 //完全不需要，实时更新耗费资源，拖慢速度。卖个东西用不着实时更新。后台解决一个订单，更新下信息，一般会在下一个用户来访时更新。因为你的浏览者不会达到毫秒数级别。
Go 旅城通票 2014-02-07
  • 打赏
  • 举报
 回复
引用 10 楼 mycggo 的回复:
[quote=引用 8 楼 showbo 的回复:] 建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了 给个模型给你，其他需求自己扩展下就好了 
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }

    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存
Showbo，非常感谢你的耐心回复和代码，我好好研究研究，因为主要是做移动端，localStorage/sessionStorage/JSON应该不成问题。 另外想请教下：“//通过你上面的DOM对象初始化cart对象”， 这个是什么意思，DOM对象初始化Cart对象，不是太理解这个概念，能否解释一下，非常感谢！[/quote] 要用localstorage存储的话完全不需要和服务器交互（除非需要登录的用户离开你的站点，你需要下次他登陆的时候显示上一次的购物车信息的时候才需要和客户端交互，为了访问者防止清空本地存储），只有购买的时候将存储的数据发送到服务器就行了，然后清空下localstorage。 
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }
 
        if (!this.prodocuts) this.products = [];
    }
生成购物车的实例的时候已经从localstorage初始化过了，如果有其他的才需要后续的步骤，就是“//通过你上面的DOM对象初始化cart对象”， 这个是什么意思，DOM对象初始化Cart对象”，有可能你进入的页面有localstorage未存储的其他物品
blackchef 2014-02-06
  • 打赏
  • 举报
 回复
你需要用个mv*的框架，帮你实现数据双向绑定。把购物车的各种交互抽象成对数据的操作。
phoenix-sky 社区高级成员 T9 2014-01-28
  • 打赏
  • 举报
 回复
引用 6 楼 zy205817 的回复:
是否可以将购物车数据通过json存储，显示通过保存的json文件提取？
购物车相关数据计划用JSON储存，考虑到用户可能会跳转页面，就需要localStorage /sessionStorage功能。 看了几个购物车，都是对象数组的操作（添加+删除+更新，是否满足最低消费，是否有折扣）等，我很好奇如何把html内的部分内容如何添加到购物车内。
码无边 2014-01-28
  • 打赏
  • 举报
 回复
是否可以将购物车数据通过json存储，显示通过保存的json文件提取？
phoenix-sky 社区高级成员 T9 2014-01-28
  • 打赏
  • 举报
 回复
引用 4 楼 zy205817 的回复:
你的思路不是很清晰吗？自己实现找下相对应的处理方法。
不是，是完全没思路。
码无边 2014-01-28
  • 打赏
  • 举报
 回复
你的思路不是很清晰吗？自己实现找下相对应的处理方法。
phoenix-sky 社区高级成员 T9 2014-01-28
  • 打赏
  • 举报
 回复
引用 2 楼 rui888 的回复:
js 面向对象。
看了几个购物车，都是采用对象方法，还是完全没有思路，也不太明白如何把html部分代码作为“对象”插入到购物车方法中（比如shopCart.addItem(item)）。
phoenix-sky 社区高级成员 T9 2014-01-28
  • 打赏
  • 举报
 回复
引用 8 楼 showbo 的回复:
建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了 给个模型给你，其他需求自己扩展下就好了 
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }

    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存
引用 8 楼 showbo 的回复:
建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了 给个模型给你，其他需求自己扩展下就好了 
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }

    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存
引用 8 楼 showbo 的回复:
建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了 给个模型给你，其他需求自己扩展下就好了 
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }

    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存
Showbo，非常感谢你的耐心回复和代码，我好好研究研究，因为主要是做移动端，localStorage/sessionStorage/JSON应该不成问题。 另外想请教下：“//通过你上面的DOM对象初始化cart对象”， 这个是什么意思，DOM对象初始化Cart对象，不是太理解这个概念，能否解释一下，非常感谢！
tony4geek 2014-01-28
  • 打赏
  • 举报
 回复
js 面向对象。
Go 旅城通票 2014-01-28
  • 打赏
  • 举报
 回复
localStorage ie8-不支持，需要用userData Behavior，可以参考这个：JavaScript本地存储(DOM Storage,Local Storage) IE7-不支持JSON对象，你需要导入json2.js这个文件
Go 旅城通票 2014-01-28
  • 打赏
  • 举报
 回复
建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了 给个模型给你，其他需求自己扩展下就好了 
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }

    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存
phoenix-sky 社区高级成员 T9 2014-01-27
  • 打赏
  • 举报
 回复
哪位大牛写过类似的功能？
Web前端开发第4季：JavaScript基础入门
JavaScript是一种网页交互语言，为网页增添了巨大的表现力和交互能力，极大提高了用户体验，如今很难在找到不使用JavaScript的网站了。本课程主要是为刚刚接触JavaScript的朋友准备，详细的讲解了JavaScript的基本语法，以及事件的处理操作。本季课程为JavaScript基础语法篇，着重介绍了JavaScript脚本语言的基础语法部分内容包含：◆ 认识JavaScript脚本语言、发展史、编译工具◆ JavaScript中的变量、数据类型、类型转换◆ 条件选择（if--else, if--else if ,switch--case）◆ 循环（while循环, do--while循环, for循环，循环嵌套 ）◆ 集合（Array基础常见操作、案例演示）◆ set集合、map集合（集合的遍历、集合常用的方法）◆ 课后习题在本季课程的讲解部分结合了大量的案例演示，通过案例演示可以清楚的加深对JavaScript基本语言的理解； 建议在学习的过程中，一定要动手实战，这样才能真正的领悟到JavaScript的语法细节。课程案例展示： 案例01:计算器 案例02:生成学生成绩 案例03:下拉菜单的联动案例04:首页大图轮番
HTML5 Table 布局实现 商品列表
 运行结果如上。。。。 下面说说设计过程： 一开始试探的做的时候，是建立了一个table，这个table里面放一本图书的信息。然后建立了一个列，然后建立了个td，td里面放图片，td那个表格多占几列，然后再建一个tr放图书信息，这样做了之后发现，tr那一列直接放到图书下面去了，然后很懵逼，然后调整表格的宽度，高度，表格的占列数啥的，然后发现还是不行，然后问了问小组长，发现表格中嵌入图片之后...
使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？ 那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对...
前端面试录音整理（私人版）
一、恒天财富 自我介绍顺序：姓名，年龄，来自哪里，工作年限，供职了几家公司，分别供职时长，任职期间做过的项目，用到的技术栈，工作方式，学习方式，性格等。 自我介绍： 小明 25 北京 工作了三年 供职于两家公司 ：河南的慧谷科技有限公司，北京汇店通科技有限公司工作过 供职时长：无 做过的项目比较多：因为是两家都是外包公司，做过电商类，旅游类，教育类 用到的技术栈：vue全家桶，es6，JavaScript，bootstrap，还有element等一些组件的快速开发，比较...
web开发软件，jquery模态窗口
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取。
JavaScript

87,916

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章