How to implement floating shopping cart with js cookies_javascript skills

The example in this article describes how to implement a floating shopping cart using js cookies. Share it with everyone for your reference. The specific analysis is as follows:

Create a “no-refresh shopping cart” that combines “floating” and “DataList” on the “product list display page”. You only need to calculate the total price without going to a separate page for settlement. I found some information and modified it, and the examples are as follows:

gwc.js file is as follows:

// JavaScript Document
//计算单个小计
 function EveryCount()
 {
  var index=window.event.srcElement.parentElement.parentElement.rowIndex;
  var a=document.getElementById("test").rows(index).cells(1).innerText;
  var b=document.getElementById("Num"+index).value;
  var c=parseFloat(a)*parseFloat(b);
  document.getElementById("test").rows(index).cells(3).innerText=c;
  TotalCount();
  updateOrderCookie();//修改cookies中保存的数量
 }
//计算总计
function TotalCount()
{
  var rowscount=document.getElementById("test").rows.length;
  var sum=0;
  for(var i=1;i<=(parseInt(rowscount)-1);i++)
  {
    var littecount=document.getElementById("test").rows(i).cells(3).innerText;
    sum=parseFloat(sum)+parseFloat(littecount);
  }
  document.getElementById("total").innerText=sum;
}
//<--Start--将订单数据写入div
function WriteOrderInDiv()
{
 var gwc="<table id='test' style='border:0px;' ><tr><td width='40%'>商品名称</td><td>单价(￥)</td><td>数量</td><td>小计</td></tr>";
 var OrderString=unescape(ReadOrderForm('24_OrderForm'));//获取cookies中的购物车信息
 //document.write(OrderString);
 var strs= new Array(); //定义一个数组，用于存储购物车里的每一条信息
 var OneOrder="";
 //strs=OrderString.split("%7C");//用|分割出购物车中的每个产品
 strs=OrderString.split("|");//用|分割出购物车中的每个产品
 for (i=1;i<strs.length ;i++ )  
 {
 gwc+="<tr>";
 //OneOrder=strs[i].split("%26");
 OneOrder=strs[i].split("&");
 for (a=1;a<OneOrder.length ;a++ )  
 {
  if(a!=3)
  {
  gwc+="<td>";
  gwc+=OneOrder[a];
  gwc+="</td>";
  }
  else
  {
  gwc+="<td id='dd'>";
  gwc+="<input title='填写想购买的数量,请使用合法数字字符' style='width:10px;' id='Num"+i+"' type='text' onkeyup='EveryCount();'value='"+OneOrder[a]+"'>";
  gwc+="</td>";
  }
  //document.getElementById("gwc").innerHTML+=OneOrder[a]+"<br/>";//每个产品的每个属性分割后字符输出
 }
 gwc+="<td>";
  gwc+=OneOrder[2]*OneOrder[3];
  gwc+="</td>";
  gwc+="</tr>";
    //document.getElementById("gwc").innerHTML+=strs[i]+"<br/>";  //每个产品分割后的字符输出
  }
 gwc+="</table>";
 document.getElementById("Cart").innerHTML=gwc;
 TotalCount();
}
//<--End--将订单数据写入div
//--Start--展开/收缩购物车
function show(id)
{
if (document.getElementById(id).style.display=="") 
{
document.getElementById(id).style.display='none';
}
else{document.getElementById(id).style.display='';
}
}
//<--End--展开/收缩购物车
//<--Start--从cookie中读出订单数据的函数
function ReadOrderForm(name)
{
  var cookieString=document.cookie;
  if (cookieString=="")
  {
    return false;
  }
  else
  {
    var firstChar,lastChar;
    firstChar=cookieString.indexOf(name);
    if(firstChar!=-1)
    {
      firstChar+=name.length+1;
      lastChar = cookieString.indexOf(';', firstChar);
      if(lastChar == -1) lastChar=cookieString.length;
      return cookieString.substring(firstChar,lastChar);
    }
    else
    {
      return false;
    }
  }  
}
//-->End
//<--Start--添加商品至购物车的函数,参数(商品编号,商品名称，商品数量，商品单价)
function SetOrderForm(item_no,item_name,item_amount,item_price)
{
  var cookieString=document.cookie;
  if (cookieString.length>=4000)
  {
    alert("您的订单已满\n请结束此次订单操作后添加新订单！");
  }
  else if(item_amount<1||item_amount.indexOf('.')!=-1)
  {
    alert("数量输入错误！");
  }
  else
  {
    var mer_list=ReadOrderForm('24_OrderForm');
    var Then = new Date();
    Then.setTime(Then.getTime()+30*60*1000);
    var item_detail="|"+item_no+"&"+item_name+"&"+item_price+"&"+item_amount;
    if(mer_list==false)
    {
      document.cookie="24_OrderForm="+escape(item_detail)+";expires=" + Then.toGMTString();
      alert("“"+item_name+"”
"+"已经加入您的订单！");
    }
    else
    {
      if (mer_list.indexOf(escape(item_no))!=-1)
      {
        alert('此商品您已添加
请进入订单修改数量！')
      }
      else
      {
        document.cookie="24_OrderForm="+mer_list+escape(item_detail)+";expires=" + Then.toGMTString();
        alert("“"+item_name+"”
"+"已经加入您的订单！");
      }
    }
  }
}
//-->End
//<--Start--修改数量后，更新cookie的函数
function updateOrderCookie()
{
 var rowscount=document.getElementById("test").rows.length;
  var item_detail="";
  for(var i=1;i<=(parseInt(rowscount)-1);i++)
  {
    item_detail+="|"+document.getElementById("test").rows(i).cells(0).innerText+"&"+document.getElementById("test").rows(i).cells(0).innerText+"&"+document.getElementById("test").rows(i).cells(1).innerText+"&"+document.getElementById("Num"+i).value;
   // document.write(document.getElementById("test").rows(i).cells(1).innerText);
  }
 var Then = new Date();
 Then.setTime(Then.getTime()+30*60*1000);
 document.cookie="24_OrderForm="+escape(item_detail)+";expires=" + Then.toGMTString();
}
//<--End--订单更新
//<--清空购物车
function clearOrder() 
{
var Then = new Date();
document.cookie="24_OrderForm='';expires=" + Then.toGMTString();
}
//<--End

gwc.html file is as follows:

<script src="js/gwc.js" type="text/javascript"></script>
<div width="300px">
 <div id="Cart" style="line-height: 24px; font-size: 12px; background-color: #f0f0f0;
 border-top: 1px #ffffff solid；display:none; ">
 </div>
 <div id="Info">
      总计：<strong><span id="total" style="color: #FF0000; font-size: 36px">0</span></strong>元
  <input type="button" value="清空" onclick="clearOrder();WriteOrderInDiv();" />
  <input type="button" value="展开/收缩" onclick="show('Cart')" />
 </div>
 <input type="button" value="加入商品1" onclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();" />
 <input type="button" value="加入商品2" onclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();" />
 <input type="button" value="加入商品3" onclick="SetOrderForm('NO3','商品3','1','10.5');WriteOrderInDiv();" />
 </div>
  <script>
  window.WriteOrderInDiv();
  </script>

The function of the above js is to obtain and output the order information after the page is opened.

The example is written in HTML. In the DataList, you only need to bind the parameters in onclick="SetOrderForm('NO3','Product 3','1','10.5'); of the add product button , just set the outer div to float on the right side of the browser

.

I hope this article will be helpful to everyone’s JavaScript programming design.