商城下单 js 加入购物车

最新推荐文章于 2024-07-21 17:46:31 发布
最新推荐文章于 2024-07-21 17:46:31 发布
阅读量3.9k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a12345_asdfg/article/details/21528341
版权

//购物车  (数组版本)
(function ($) {
    $.fn.TaShopCartArray = function (setting) {
        //初始化配置
        var opts = $.extend({}, $.fn.TaShopCartArray.defaults, setting);
        //读取cookeie信息
        var _initdata = [];
     
        if (opts.savecookie && $.cookie(opts.cookiename) != null && $.cookie(opts.cookiename) != '') {
            _initdata = eval('(' + $.cookie(opts.cookiename) + ')');
        }
        //初始化
        $(opts.Divcart).data(opts.staticname, _initdata);
        var cctv = {
            //计算单项金额
            singlemoney: function (price, count) {
                return (price * 10000 * count / 10000).toFixed(2);
            },
            addnew: function () {
                var datejsorder = $(opts.Divcart).data(opts.staticname);
                var sname = $(opts.shopNameHidden).text();
                var sid = $(this).attr("sFID"); //店铺id
                var mid = $(this).attr("mFID");  //菜id
                var mname = $(this).attr("mName"); //菜名
                var mPrice = $(this).attr("mPrice"); //菜单价
                var mStatus = $(this).attr("mStatus"); //菜品状态
                //构造并赋值

                var _flag = false;
                for (var tt in datejsorder) {
                 
                    if (datejsorder[tt].sid != sid && datejsorder[tt]["count"] > 0) {
                        $.fn.RFAlert({ Alertcontent: "存在其它店铺的餐品!" });
                        return;
                    }
                    if (datejsorder[tt].mid == mid) {
                        _flag = true;
                    }
                }

                if (!_flag) {
                    var _price = cctv.singlemoney(mPrice, 1);
                    var g = { sid: sid, mid: mid, count: 1, singleprice: mPrice, price: _price, menuname: mname, status: mStatus };
                    datejsorder.push(g);
                    var _tr = $('<tr id=' + opts.Trorderpre + mid + '><td class="tb-name">' + mname + '</td><td class="tb-num"><div><a class="down"><img src="../../images/numbtn_03.jpg" alt="减少" />' +
                         '</a><label>1</label><a  class="up"><img src="../../images/numbtn_05.gif" alt="增加" /></a></div></td> ' +
                         ' <td class="tb-pric">' + opts.moneypre + _price + '</td>  ' +
                         '<td class="tb-cancel"><a>X</a></td></tr>');
                    var _strtotalPrice = "<li><font class=\"cart-ftcor\">合计</font><label id=\"TacartTotalPrice\">0.00</label></li>";
                    $(opts.DivcartTbody).append(_tr);
                    $(".cart-total").empty();
                    $(".cart-total").append(_strtotalPrice);

                    var _$tr = $("#" + opts.Trorderpre + mid);
                    _$tr.find(".tb-num a.down").click(function () {
                        //减号
                        cctv.downnum(mid, mPrice);
                    });
                    _$tr.find(".tb-num a.up").click(function () {
                        //加号
                        cctv.upnum(mid, mPrice);
                    });
                    _$tr.find(".tb-cancel a").click(function () {
                        cctv.delorder(mid);
                    });
                }
                else {//已存在
                    for (var tt in datejsorder) {
                        if (datejsorder[tt].mid == mid) {
                            datejsorder[tt].count = parseInt(datejsorder[tt].count) + parseInt(1);
                            datejsorder[tt].price = cctv.singlemoney(mPrice, datejsorder[tt].count);
                            var _$tr = $("#" + opts.Trorderpre + mid);
                            _$tr.find(".tb-num label").html(datejsorder[tt].count);
                            _$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
                        }
                    }

                }
                //菜品图片飘过~
                var _img = $(this).attr("imgsrc") == "" ? "/images/noTaMenuimg.jpg" : $(this).attr("imgsrc");
                var thisTop = $(this).offset().top; //菜品所在位置的高度
                var thisLeft = $(this).offset().left; //菜品所在位置的宽度
                animatenToShopCart(thisTop, thisLeft, _img);

                $(opts.Divcart).data(opts.staticname, datejsorder);
                cctv.reflash();
            },
            //增加一个订单项数量
            upnum: function (mid, mprice) {
                var datejsorder = $(opts.Divcart).data(opts.staticname);
                for (var tt in datejsorder) {
                    if (datejsorder[tt].mid == mid) {
                        datejsorder[tt].count = parseInt(datejsorder[tt].count) + parseInt(1);
                        datejsorder[tt].price = cctv.singlemoney(mprice, datejsorder[tt].count);
                        var _$tr = $("#" + opts.Trorderpre + mid);
                        _$tr.find(".tb-num label").html(datejsorder[tt].count);
                        _$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
                    }
                }

                cctv.reflash();
                //return false;

            },
            //减少一个订单项数量
            downnum: function (mid, mprice) {
                var datejsorder = $(opts.Divcart).data(opts.staticname);
                for (var tt in datejsorder) {
                    if (datejsorder[tt].mid == mid) {
                        datejsorder[tt].count = parseInt(datejsorder[tt].count) - parseInt(1);
                        if (datejsorder[tt].count > 0) {
                            datejsorder[tt].price = cctv.singlemoney(mprice, datejsorder[tt].count);
                            var _$tr = $("#" + opts.Trorderpre + mid);
                            _$tr.find(".tb-num label").html(datejsorder[tt].count);
                            _$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
                        } else {
                            $("#" + opts.Trorderpre + mid).remove();
                            datejsorder[tt].mid = "";
                        }
                    }
                }
                cctv.reflash();
            },
            //删除一个订单项
            delorder: function (mid) {
                var datejsorder = $(opts.Divcart).data(opts.staticname);
                for (var tt in datejsorder) {
                    if (datejsorder[tt].mid == mid) {
                        datejsorder[tt].count = 0;
                        datejsorder[tt].price = 0;
                        $("#" + opts.Trorderpre + mid).remove();
                        datejsorder[tt].mid = "";
                    }
                }
                cctv.reflash();
            },
            //刷新购物车
            reflash: function () {

                var data = $(opts.Divcart).data(opts.staticname);

                var size = 0;
                var _totalMoney = 0.00;
                for (var i in data) {

                    if (data[i].count > 0) {
                        size++;
                        _totalMoney += parseFloat(data[i].price);

                    }
                }
                var _TaServiceFare = parseFloat($(opts.TaServiceFare).text() != "" ? $(opts.TaServiceFare).text() : 0).toFixed(2);  //外送服务费
                var _allShouldPayMoney = (parseFloat(_totalMoney) + parseFloat(_TaServiceFare)).toFixed(2);
                $(opts.cartTotalPrice).text(opts.moneypre + _allShouldPayMoney);
                if (size > 0) {
                    $(opts.Divcart).find("div.cart-sum ul.tacartalert").remove();
                    var _startFare = parseFloat($(opts.startingFare).val()).toFixed(2);  //起步价
                    //    $(opts.Checkbuttom).html("去结算");
                    $(opts.Checkbuttom).attr("flagcheck", ""); //清空结算按钮属性
                    //如果总价不起过起送费用,则提示   to do 比如不允许点击结算
                    if (parseFloat(_allShouldPayMoney) < (parseFloat(_startFare))) {
                        var _ul = $("<ul class=\"send-cost tacartalert fn-clear\"><li><font class=\"cart-ftcor\">未达到本店起送价(" + opts.moneypre + _startFare + ")</font></li></ul>");
                        $(opts.Divcart).find("div.cart-sum ul").eq(0).after(_ul);
                        //   $(opts.Checkbuttom).html("无法结算");
                        $(opts.Checkbuttom).attr("flagcheck", "no"); //添加结算按钮属性
                    }

                } else {
                    //清空tr
                    $(opts.DivcartTbody).empty();
                }
                var _arr = new Array();
                for (var k in data) {
                    //   alert(data[k]['sid']);
                    if (data[k]["mid"] != "")
                        _arr.push(data[k]);
                }

                //保存cookie
                if (opts.savecookie) {
                    var date = new Date(); date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));  //一天
                    $.cookie(opts.cookiename, JSON.stringify(_arr), { path: '/', expires: date });
                }

                $(opts.Divcart).data(opts.staticname, _arr);

                //以下操作数据库
                if ($.cookie("hahahaRFUserID") != undefined && $.cookie("hahahaRFMemberName") != undefined) {
                    $.post("/Takeaway/Takeaway/addCartCookie", { rnd: Math.random }, function () {
                    });
                }

            },
            //结算
            ToCheck: function () {
                var _shopKey = $(opts.TaShopKey).val();
                if (_shopKey != undefined && _shopKey != "") {
                    var data = $(opts.Divcart).data(opts.staticname);

                    var _arr = new Array();
                    for (var k in data) {
                        _arr.push(data[k]["mid"]);

                        if (data[k]["sid"] != _shopKey) {
                            $.fn.RFAlert({ Alertcontent: "购物车里的餐品不是在本店订购的，可以先清空此前所选餐品!" });
                            return false;
                        }
                    }

                }


                var size = $(opts.DivcartTbody).find("tr").size();
                if (size > 0) {
                    var _flag = $(opts.Checkbuttom).attr("flagcheck");
                    if (_flag && _flag == "no") {
                        $.fn.RFAlert({ Alertcontent: "未达到本店起送价,不送啦!" });
                        return false;
                    }

                    var _menuids = _arr.join(",");
                    $.post("/Takeaway/Takeaway/menuStatus", { menuids: _menuids, rmd: Math.random() }, function (menuStatus) {
                  
                        if (menuStatus != "") {
                            $.fn.RFAlert({ Alertcontent: menuStatus });
                            return;
                        } else {

                            $.get("/Takeaway/Takeaway/CheckShopTime", { shopid: _shopKey }, function (res) {
                                if (res == "false") {
                                    $.fn.RFAlert({ Alertcontent: "该餐厅暂不营业,请在营业时间内订餐!" });
                                    return false;
                                }
                                else {

                                    location.href = "/Takeaway/Takeaway/snackPay";
                                }
                            });
 
                        }
                    },"text");

 


                } else {
                    $.fn.RFAlert({ Alertcontent: "请选择餐品，再进行结算!" });
                    return false;
                }
                // alert(size);
                //   alert(JSON.stringify($(opts.Divcart).data(opts.staticname)));
                //   cctv.clearCart();
            },
            //清空购物车
            clearCart: function () {
                $(opts.Divcart).data(opts.staticname, []);  //清空data
                $(opts.DivcartTbody).find("tr").empty();
                cctv.reflash();
            }
        };
        //初始化购物车
        var data = $(opts.Divcart).data(opts.staticname);
        //重写右侧的车
        for (var tt in data) {
            var count = data[tt].count;
            if (count > 0) {

                var mname = data[tt]['menuname'];
                var mPrice = data[tt]['price'];
                var singleprice = data[tt]['singleprice'];
                var totalPrice = 0;
                var _totalMoney = totalPrice += (mPrice * count);
                var _tr = $('<tr id=' + opts.Trorderpre + data[tt].mid + '><td class="tb-name">' + mname + '</td><td class="tb-num"><div><a class="down"><img src="../../images/numbtn_03.jpg" alt="减少" />' +
                         '</a><label>' + count + '</label><a  class="up"><img src="../../images/numbtn_05.gif" alt="增加" /></a></div></td> ' +
                         ' <td class="tb-pric">' + opts.moneypre + cctv.singlemoney(singleprice, count) + '</td>  ' +
                         '<td class="tb-cancel"><a>X</a></td></tr>');

                var _strtotalPrice = "<li><font class=\"cart-ftcor\">合计</font><label id=\"TacartTotalPrice\">" + _totalMoney + "</label></li>";

                $(opts.DivcartTbody).append(_tr);
                $(".cart-total").empty();
                $(".cart-total").append(_strtotalPrice);

                var _$tr = $("#" + opts.Trorderpre + data[tt].mid);
                _$tr.find(".tb-num a.down").data('cc', data[tt].mid).click(function () {
                    var d = $(this).data('cc');
                    cctv.downnum(d, singleprice); //减号
                });
                _$tr.find(".tb-num a.up").data('cc', data[tt].mid).click(function () {
                    var d = $(this).data('cc');
                    cctv.upnum(d, singleprice);  //加号
                });
                _$tr.find(".tb-cancel a").data('cc', data[tt].mid).click(function () {
                    var d = $(this).data('cc');
                    cctv.delorder(d);
                });
                cctv.reflash();
            }
        }
        //餐品点击
        $(opts.addbuttom).click(cctv.addnew);
        //结算按钮点击
        $(opts.Checkbuttom).click(cctv.ToCheck);
    };
    // 配置
    $.fn.TaShopCartArray.defaults = {
        //全局数据-保存订单信息,就一个名字而已
        staticname: 'RFTaOrder',
        //cookie的名字
        cookiename: 'hahahaTaOrder',
        //默认加入订单的控件选择
        addbuttom: '[hre=addShopCart]',
        //购物车对象,如div
        Divcart: '.bar-cart',
        //购物车对象,tbody
        DivcartTbody: '.bar-cart tbody',
        //店铺名字的隐藏域
        shopNameHidden: '#tashop_name',
        //结算按钮
        Checkbuttom: '.ToCheck',
        //是否保存cookie
        savecookie: true,
        //订单项tr前缀
        Trorderpre: 'trpre_',
        //价格前缀
        moneypre: "￥ ",
        //总价格对象
        cartTotalPrice: '#TacartTotalPrice',
        //起步价对象
        startingFare: '#hdnTastartingFare',
        //外送服务费用
        TaServiceFare: '#TaServiceFare',
        //当前店铺页面主键
        TaShopKey: '#hdnTaShopFid'
    };
})(jQuery);

 

 

 

 

 

 

初始调用js

 

$("#addShopCarID").TaMealShopCarArray();

a12345_asdfg
关注
JS实现加入购物车
01-14
JS实现加入购物车
JS实现购物车的代码和功能介绍以及视频讲解
07-19
资源包含购物车的实现代码、购物车功能介绍、JS部分的详细讲解、视频演示和讲解。 购物车功能介绍：打开购物车的首页有雪花满屏飘落的动态背景和音乐，出现移动文字“欢迎进入购物车”等，点击鼠标后进去购物车界面...
JS实现添加至购物车功能
07-29 1630
效果图展示： 当将书拖拽至购物车一览时： 首先将页面的基本结构写出来： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>加入购物车功能</title&...
如何使用javascript将商品添加到购物车？
最新发布
XHX3413716962的博客
07-21 361
/ 绑定点击事件 addToCartBtn.addEventListener('click', function() { // 获取当前商品信息 var productId = document.getElementById('productId').value;// 将商品添加到购物车 shoppingCart.push(product);// 更新购物车图标或显示购物车中的商品数量的函数 function updateCartIcon() { // 更新购物车图标或显示购物车中的商品数量的逻辑 }
JS&JQ添加购物车功能
qq_50822277的博客
12-30 4010
啥也不说。直接上代码！！！！ 第一步。引入script src=“jquery-3.3.1.min.js” 第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部 下面这些才是函数里面的东西、 添加购物车！！！！ 第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价 //获取购物车标签#goods tr td a $('#go.
Js 基础学习之--模拟加入购物车
freesky的专栏
07-27 920
Js 基础学习之--模拟加入购物车 购物车 *{margin:0; padding: 0; font-size: 14px; font-family: 微软雅黑;} ul li{list-style:none;} .clear{clear: left;} #products{ width: 1100px; margin: 10px auto; }
javascript购物车实现详细代码讲解
热门推荐
小圣贤君的博客
09-27 10万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操
华为商城购物车脚本.js
07-16
华为商城抢手机脚本
基于javaScript+python实现的京东自动下单 (自动登录,指定时间预约商品,商品补货监控,自动加购物车,自动下单)
07-06
基于javaScript+python实现的京东自动下单 (自动登录,指定时间预约商品,商品补货监控,自动加购物车,自动下单)+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上...
PHP单页下单商城源码-茅台酒.zip
10-13
【标题】"PHP单页下单商城源码-茅台酒.zip" 涉及的主要知识点是PHP编程语言在电商领域的应用，以及单页应用程序（Single-Page Application, SPA）的实现。这里的“茅台酒”可能指的是该商城源码是用于销售茅台酒的...
红色商城购物车订单页面
05-18
在实现“红色商城购物车订单页面”时，开发者需要综合运用前端技术（HTML、CSS、JavaScript）、后端技术（如PHP、Python或Java）、数据库知识（如MySQL）以及第三方服务的集成技巧，确保功能完整且用户体验优良。...
商城购物车功能JS插件
09-29
商城购物车基本功能，包括已选商品图层显示
js-实现淘宝加入购物车代码.rar
07-11
用js实现淘宝购物车，以及淘宝加入购物车和删除购物车。
js jquery 加入购物车动画
01-11
jquery 实现加入购物车动画效果，很有用的一个插件。
数据列表+商城购物车纯JS实现
01-04
1.用列表展现数据 2.可增删改查 3.纯JS、JQuery实现 4.购物车技术同理
JS高仿抛物线加入购物车特效实现代码
01-21
1. 简介 要想让你的购物车有种高大上的感觉，加入特效的功能是必不可少的。 2. 实现思路 设置一些简单的样式 模拟把它添加到购物车中，数量增加 从点击的位置开始动画，结束动画 3. 代码实现 CSS代码 咱们给它设置一些简单的样式，让它显得不是那么的太low .flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; margin-left: 50px; z-index: 9
js实现添加购物车功能
素描本里的男子的博客
05-15 8728
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } table { ...
JavaScript网页购物车
weixin_67235801的博客
03-12 3790
网页购物车功能的实现
js购物车
Swilder柠
08-24 1517
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
网上商城系统需求分析与功能详解
通常，一个类似这样的网上商城系统可能会使用Java相关的Web开发框架（如Spring Boot）进行后端开发，配合MySQL等数据库存储数据，前端可能采用HTML、CSS和JavaScript，也可能使用React或Vue.js等现代前端框架来提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值