技术相关
联系我们
购物车全家桶,从商品列表到购物车到订单确认到支付成功失败订单还原
时间:2024-07-03 17:40
阅读:24
来源:互联网
购物车全家桶,从商品列表到购物车到订单确认到支付成功失败订单还原
借用网上一位老兄的代码改的,加入了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> </td> </tr> <tr> <td> </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>