购物车全家桶，从商品列表到购物车到订单确认到支付成功失败订单还原

发布日期： 2024-07-03 17:40 阅读量： 83 来源： 互联网
借用网上一位老兄的代码改的，加入了jquery的cookie存储订单信息，成功或者失败后还原
用的上的兄弟直接拿
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>KEDYPACK Paygate demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=yes"/>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
        }

        li {
            display: inline;
            text-align: center
        }

        a:link, a:visited {
            color: blue;
            padding: 14px 25px;
            text-decoration: none;
            display: inline-block;
        }

        td {
            word-wrap: break-word;
            max-width: 800px;
            vertical-align: top;
            padding: 5px;
            height: 30px;
        }

        .title {
            text-decoration: underline;
        }

        * {
            margin: 0;
            padding: 0;
        }
        div.content {
            /*      width: 1000px;
                  height: 350px;
                  border: 3px solid #ccc;*/
            max-width: 900px;
            margin: 5px auto;
            overflow: auto;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        #goodsStore td,#goodsPay td,.newcat td {
            border: 1px solid black;
            text-align: center;
            height: 30px;
        }
        caption {
            font-size: 28px;
            font-weight: bold;
        }
        #gwc input[type="text"] {
            width: 30px;
            margin-left: 4px;
            margin-right: 4px;
        }
        #gwc input[type="button"] {
            width: 20px;
        }
        .button{
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow:1px 1px 1px #333;
            border-radius: 5px;
            margin:0 20px 20px 0;
            position: relative;
            overflow: hidden;
        }
        .button:nth-child(6n){
            margin-right: 0;
        }
        .button.gray{
            color: #8c96a0;
            text-shadow:1px 1px 1px #fff;
            border:1px solid #dce1e6;
            box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
            background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
            background: linear-gradient(top,#f2f3f7,#e4e8ec);
        }
        .button.black{
            border:1px solid #333;
            box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
            background: -webkit-linear-gradient(top,#656565,#4c4c4c);
            background: -moz-linear-gradient(top,#656565,#4a4a4a);
            background: linear-gradient(top,#656565,#4a4a4a);
        }
        .button.red{
            border:1px solid #b42323;
            box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
            background: -webkit-linear-gradient(top,#d53939,#b92929);
            background: -moz-linear-gradient(top,#d53939,#b92929);
            background: linear-gradient(top,#d53939,#b92929);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="."><img src="log.png"></a></li>
            </ul>
        </nav>
    </header>
    <section>
        <div id="goodsStore">
            <table>
                <caption>储 物 仓</caption>
                <thead>
                    <tr>
                        <td>商品编号</td>
                        <td>商品名称</td>
                        <td>商品单价</td>
                        <td>商品颜色</td>
                        <td>商品库存</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2018090201</td>
                        <td>鼠标</td>
                        <td>78</td>
                        <td>黑色</td>
                        <td>500</td>
                        <td>
                            <input type="button" value="加入购物车" onclick="addGoods(this);" />
                        </td>
                    </tr>
                    <tr>
                        <td>2018090202</td>
                        <td>键盘</td>
                        <td>45</td>
                        <td>白色</td>
                        <td>300</td>
                        <td>
                            <input type="button" value="加入购物车" onclick="addGoods(this);" />
                        </td>
                    </tr>
                    <tr>
                        <td>2018090203</td>
                        <td>显示器</td>
                        <td>880</td>
                        <td>黑色</td>
                        <td>200</td>
                        <td>
                            <input type="button" value="加入购物车" onclick="addGoods(this);" />
                        </td>
                    </tr>
                    <tr>
                        <td>2018090204</td>
                        <td>主机</td>
                        <td>2332</td>
                        <td>蓝色</td>
                        <td>350</td>
                        <td>
                            <input type="button" value="加入购物车" onclick="addGoods(this);" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="goodsPay" class="content">
            <table>
                <caption>PANIER</caption>
                <thead>
                    <tr>
                        <td>Référence</td>
                        <td>Désignation</td>
                        <td>Prix Unit.</td>
                        <td>Couleur</td>
                        <td>Quantité</td>
                        <td>Prix Total</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody id="gwc">
                    <tr><td>2024070201</td><td>BOL RONDE RIGIDE EN PLASTIQUE PP</td><td>8</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>8</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
                    <tr><td>2024070202</td><td>BOL BLANC ET COUVERCLE ANTI-BUÉE</td><td>66</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>66</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
                    <tr><td>2024070203</td><td>BOÎTE RECTANGULAIRE, COUVERCLE PET</td><td>4</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>4</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
                    <tr><td>2024070204</td><td>BOL ROND CARTON NOIR, COUVERCLE CARTON</td><td>162</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>162</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">Total (HT)</td>
                        <td colspan="2" id="sum">240</td>
                    </tr>
                </tfoot>
            </table>
            <div style="text-align: center; padding: 15px"><input type=submit id="btn_good" name="ac" value="Commande" class="button red"></div>

        </div>
        <br><br>
        <div id="conmmande" class="content">
            <form method="post" action="#" id="form">
                <table>
                    <caption>COMMANDE</caption>
                    <tr>
                        <td colspan="2"><div><table class="newcat"></table></div></td>
                    </tr>
                    <tr>
                        <td align="right"><label for="TransID">TransID</label></td>
                        <td><input type=text id="TransID" name=TransID value="<?php echo $sTransID; ?>" size=30 required="">*</td>
                    </tr>
                    <tr>
                        <td align="right"><label for="Amount">Amount</td>
                        <td><input type=text id="Amount" name=Amount value="<?php echo $iAmount; ?>" size=10 required="">*</td>
                    </tr>
                    <tr>
                        <td align="right"><label for="Currency">Currency</td>
                        <td><input type=text id="Currency" name=Currency value="<?php echo $sCurrency; ?>" size=3 required="">*</td>
                    </tr>
                    <tr style="display: none">
                        <td align="right"><label for="URLSuccess"><?php echo $stdSuccess; ?></td>
                        <td><input type=text id="URLSuccess" name=URLSuccess value="<?php echo $sURLSuccess; ?>" size=50 required="">*</td>
                    </tr>
                    <tr style="display: none">
                        <td align="right"><label for="URLFailure"><?php echo $stdFailure; ?></td>
                        <td><input type=text id="URLFailure" name=URLFailure value="<?php echo $sURLFailure; ?>" size=50 required="">*</td>
                    </tr>
                    <tr style="display: none">
                        <td align="right"><label for="URLNotify"><?php echo $stdNotify; ?></td>
                        <td><input type=text id="URLNotify" name=URLNotify value="<?php echo $sURLNotify; ?>" size=50 required="">*</td>
                    </tr>
                    <tr style="display: none">
                        <td align="right"><label for="OrderDesc"><?php echo $stdOrder; ?></td>
                        <td><input type=text id="OrderDesc" name=OrderDesc value="<?php echo $sOrderDesc; ?>" size=50></td>
                    </tr>
                    <tr style="display: none">
                        <td align="right"><label for="UserData"><?php echo $stdUserdata; ?></td>
                        <td><input type=text id="UserData" name=UserData value="<?php echo $sUserData; ?>" size=50></td>
                    </tr>
                    <tr>
                        <td colspan=2>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp; </td>
                        <td>
                            <input type=button id="btn_back" name="ac" value="retour" class="button gray">
                            <input type=submit id="btn_redirect" name="ac" value="redirect" class="button red"> <!--onclick="redirect()"-->
                            <input type=submit id="btn_iframe" name="ac" value="iframe" class="button red">

                        </td>
                    </tr>
                    <tr>
                        <td align="right"><br>test cards</td><td><br>
                            <table>
                                <tr>
                                    <td>4111.1111.1111.1111</td><td>Visa</td><td>success</td><td>0000</td><td></td>
                                </tr>
                                <tr>
                                    <td>5555.5555.5555.4444</td><td>Mastercard</td><td>success</td><td>0000</td><td></td>
                                </tr>
                                <tr>    
                                    <td>3750.0000.0000.007</td><td>AMEX</td><td>success</td><td>0000</td><td></td>
                                </tr>
                                <tr>
                                    <td>4012.8888.8888.1881</td><td>Visa</td><td>failed</td><td>0100</td><td>DECLINED</td>
                                </tr>
                                <tr>
                                    <td>5105.1051.0510.5100</td><td>Mastercard</td><td>failed</td><td>0100</td><td>DECLINED</td>
                                </tr>
                                <tr>
                                    <td>3714.4963.5398.431</td><td>AMEX</td><td>failed</td><td>0100</td><td>DECLINED</td>
                                </tr>
                                <tr>
                                    <td>4012.8888.8888.1881</td><td>Visa</td><td>failed</td><td>0305</td><td>DECLINED</td>
                                </tr>
                                <tr>
                                    <td>5200.0000.0000.0007</td><td>Mastercard</td><td>failed</td><td>0305</td><td>DECLINED</td>
                                </tr>
                                <tr>
                                    <td>3782.8224.6310.005</td><td>AMEX</td><td>failed</td><td>0305</td><td>DECLINED</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </section>

    <ul>
        <li><img src="foot.png"></li>
    </ul>
    <script src="jquery-3.7.1.min.js"></script>
    <script src="jquery.cookie.min.js"></script>
    <script>
                        var sum; //定义全局变量：购物车商品总计
                        $(function () {
                            //页面加载完成后给全局变量赋值
    //                        $("#conmmande").hide();
                            sum = $("#sum");
                            $("#btn_good").on("click", function () {
    //                            $("#goodsPay").hide();
                                $("#conmmande").show();
                                store();
                            })
                            $("#btn_back").on("click", function () {
                                $("#goodsPay").show();
    //                            $("#conmmande").hide();
                            })
                        })
                        function addGoods(btn) {
                            var td = $(btn).parent();
                            var tr = $(td).parent();
                            var tds = $(tr).children();
                            //创建一个行节点
                            var newTr = $("<tr></tr>");
                            //给行节点赋值
                            newTr.html(
                                    '<td>' + tds[0].innerHTML + '</td>' +
                                    '<td>' + tds[1].innerHTML + '</td>' +
                                    '<td>' + tds[2].innerHTML + '</td>' +
                                    '<td>' + tds[3].innerHTML + '</td>' +
                                    '<td>' +
                                    '<input type="button" value="-" onclick="reduce(this)" />' +
                                    '<input type="text" value="1" class="num" readonly />' +
                                    '<input type="button" value="+" onclick="add(this)" />' +
                                    '</td>' +
                                    '<td>' +
                                    tds[2].innerHTML +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="button" value="X" onclick="deleteGoods(this);" />' +
                                    '</td>'
                                    );
                            //追加新节点
                            $("#gwc").append(newTr);
                            //更新总计
                            var s = parseFloat(sum.html());
                            sum.html(s + parseFloat(tds[2].innerHTML));
                            $("#Amount").val(sum.html());
                            store();
                        }
                        function add(btn) {
                            //获取按钮的上一个兄弟
                            var txt = $(btn).prev();
                            txt.val(parseFloat(txt.val()) + 1);
                            //获取该商品的单价
                            var price = $(btn).parent().prev().prev();
                            //更新总计
                            var s = parseFloat(sum.html());
                            sum.html(s + parseFloat(price.html()));
                            $("#Amount").val(s + parseFloat(price.html()));
                            store();
                        }
                        function reduce(btn) {
                            //获取按钮的下一个兄弟
                            var txt = $(btn).next();
                            if (parseFloat(txt.val()) == 1) {
                                return;
                            }
                            txt.val(parseFloat(txt.val()) - 1);
                            //获取该商品的单价
                            var price = $(btn).parent().prev().prev();
                            //更新总计
                            var s = parseFloat(sum.html());
                            sum.html(s - parseFloat(price.html()));
                            $("#Amount").val(s - parseFloat(price.html()));
                            store();
                        }
                        function deleteGoods(btn) {
                            //获取当前行
                            var tr = $(btn).parent().parent();
                            //删除当前行
                            tr.remove();
                            //获取该商品的单价
                            var price = $(btn).parent().siblings().eq(2);
                            //更新总计
                            var s = parseFloat(sum.html());
                            sum.html(s - parseFloat(price.html()));
                            $("#Amount").val(s - parseFloat(price.html()));
                            store();
                        }
                        function store() {
                            var cat = [];
                            var trs = $("#gwc").children();

                            trs.each(function (index, value) {//循环遍历这个数组寻找与新数据匹配的元素
                                console.log($("#gwc tr:eq(" + index + ") td:eq(0)").html());
                                cat[index] = [];
                                cat[index][0] = $("#gwc tr:eq(" + index + ") td:eq(0)").html();
                                cat[index][1] = $("#gwc tr:eq(" + index + ") td:eq(1)").html();
                                cat[index][2] = $("#gwc tr:eq(" + index + ") td:eq(2)").html();
                                cat[index][3] = $("#gwc tr:eq(" + index + ") td:eq(3)").html();
                                cat[index][4] = $("#gwc tr:eq(" + index + ") td:eq(4) .num").val();
                                cat[index][5] = $("#gwc tr:eq(" + index + ") td:eq(5)").html();
                            })
                            cat.push(['total', $("#Amount").val()]);
                            console.log(cat);
                            $.cookie("cat", JSON.stringify(cat));

                            showcat();
                        }
                        function showcat() {
                            $(".newcat").html("");
                            var cat = JSON.parse($.cookie("cat"));
                            console.log(cat);
    //                        $(".newcat").append("<caption>PANIER</caption>");
                            var newTr = $("<tr></tr>");
                            newTr.html(
                                    '<td>Référence</td>' +
                                    '<td>Désignation</td>' +
                                    '<td>Prix Unit.</td>' +
                                    '<td>Couleur</td>' +
                                    '<td>Quantité</td>' +
                                    '<td>Prix Total</td>'
                                    );
                            //追加新节点
                            $(".newcat").append(newTr);
                            cat.forEach(function (index, value) {//循环遍历这个数组寻找与新数据匹配的元素
                                newTr = $("<tr></tr>");
                                console.log(value);
                                if (index[0] != "total") {
                                    //给行节点赋值
                                    newTr.html(
                                            '<td>' + index[0] + '</td>' +
                                            '<td>' + index[1] + '</td>' +
                                            '<td>' + index[2] + '</td>' +
                                            '<td>' + index[3] + '</td>' +
                                            '<td>' + index[4] + '</td>' +
                                            '<td>' + index[5] + '</td>'
                                            );
                                    //追加新节点
                                    $(".newcat").append(newTr);
                                } else {
                                    newTr.html(
                                            '<td colspan="5">Total (HT)</td>' +
                                            '<td>' + index[1] + '</td>'
                                            );
                                    $(".newcat").append(newTr);
                                }
                            })
                        }
                        function redirect() {
                            $("#URLSuccess").val($("#URLSuccess").val() + "?ac=r")
                            $("#URLFailure").val($("#URLFailure").val() + "?ac=r")
                            $("#URLNotify").val($("#URLNotify").val() + "?ac=r")
                            $("#form").submit();
                        }

    </script>
</body>
</html>
上一篇：: Axepta BNP需要一个购物车demo，今天找了一个确实写的不错，拿来用一下
下一篇：: 购物车第二版，添加显示计算金额与实际支付金额（手工改的金额）
购物车全家桶，从商品列表到购物车到订单确认到支付成功失败订单还原

随便看看
