Shopping Cart and shopping cart Functions

Shopping Cart and shopping cart Functions

Js Section

/* Add to shopping cart */
Function loadCar (){
Var carData = JSON. parse (getCar ());
If (carData ){
Var carUl = document. getElementById ("carUl ");
For (var I = 0; I <carData. length; I ++ ){
/* Add li */
Var li = document. createElement ("li ");
Li. setAttribute ("data-id", carData [I]. id)

CarUl. appendChild (li );
/* List_left */
/* Add a div */
Var divLeft = document. createElement ("div ");
DivLeft. setAttribute ("class", "list_left ")
Li. appendChild (divLeft );
/* Check box */
Var inputDiv = document. createElement ("div ");
InputDiv. setAttribute ("id", ("input _") + carData [I]. id );
InputDiv. setAttribute ("onclick", "checkboxImg (this )");
Var inputImg = document. createElement ("img ");
InputImg. setAttribute ("alt", "0 ");
InputImg. src = "./images/checkbox0.png ";
InputDiv. appendChild (inputImg );
DivLeft. appendChild (inputDiv );
/* Product image */
Var img = document. createElement ("img ");
Img. setAttribute ("onclick", "clickImg (this )");
Img. src = carData [I]. imgSrc;
DivLeft. appendChild (img );
/* Product name */
Var h6 = document. createElement ("h6 ");
Var productTitle = document. createTextNode (carData [I]. product_title );
H6.appendChild (productTitle );
DivLeft. appendChild (h6 );
/* Product Introduction */
Var strong = document. createElement ("strong ");
Var strongText = document. createTextNode (carData [I]. productExplain)
Strong. appendChild (strongText );
DivLeft. appendChild (strong );
/* Add p1 */
Var p1 = document. createElement ("p ");
Var p1Title = document. createTextNode ("function :")
P1.appendChild (p1Title );
DivLeft. appendChild (p1 );
/* Product efficacy */
Var span1 = document. createElement ("span ");
Var spanText = document. createTextNode (carData [I]. productEffect)
Span1.appendChild (spanText)
P1.appendChild (span1 );
/* Product color */
Var p2 = document. createElement ("p ");
Var p2Title = document. createTextNode ("color :")
P2.appendChild (p2Title );
DivLeft. appendChild (p2 );
/* Product color */
Var span2 = document. createElement ("span ");
Var span2Text = document. createTextNode (carData [I]. productColor)
Span2.appendChild (span2Text)
P2.appendChild (span2 );
/* Div: lest_right */
/* Add a div */
Var divRight = document. createElement ("div ");
DivRight. setAttribute ("class", "list_right ");
Li. appendChild (divRight );
/* Increase the I unit price */
Var tageI = document. createElement ("I ");
Var iTitle = document. createTextNode ("$ ")
TageI. appendChild (iTitle );
Var pro_price = document. createTextNode (carData [I]. price. toFixed (2 ))
TageI. appendChild (pro_price );
DivRight. appendChild (tageI );
/* Add a div */
Var tageDiv = document. createElement ("div ");
TageDiv. setAttribute ("class", "pro_number_btn ");
DivRight. appendChild (tageDiv );
/* Minus button */
Var buttonAdd = document. createElement ("button ");
Var buttonText = document. createTextNode ("-");
ButtonAdd. setAttribute ("onclick", "reduce (this )");
ButtonAdd. appendChild (buttonText );
TageDiv. appendChild (buttonAdd );
/* Quantity prompt */
Var inputInfo = document. createElement ("input ");
InputInfo. setAttribute ("type", "text ");
InputInfo. setAttribute ("onchange", "numChange (this )");
InputInfo. setAttribute ("value", carData [I]. num );
TageDiv. appendChild (inputInfo );
/* Add button */
Var buttonPre = document. createElement ("button ");
Var buttonText2 = document. createTextNode ("+ ");
ButtonPre. setAttribute ("onclick", "add (this )");
ButtonPre. appendChild (buttonText2 );
TageDiv. appendChild (buttonPre );
/* Increase the subtotal of item B */
Var tageb = document. createElement ("B ");
Tageb. setAttribute ("data-id", carData [I]. id)
Tageb. setAttribute ("id", "totalPrice ");
Var iTitle1 = document. createTextNode ("$ ")
Tageb. appendChild (iTitle1 );
Var total = document. createTextNode (carData [I]. totalPrice );
Tageb. appendChild (total );
DivRight. appendChild (tageb );
/* Add div: cart_btn */
Var tageDivBtn = document. createElement ("div ");
TageDivBtn. setAttribute ("class", "cart_btn ");
DivRight. appendChild (tageDivBtn );
/* Delete the product */
Var buttonDel = document. createElement ("button ");
Var buttonDelText = document. createTextNode ("delete ");
ButtonDel. setAttribute ("onclick", "deletePro (this )")
ButtonDel. appendChild (buttonDelText );
TageDivBtn. appendChild (buttonDel );
/* Product favorites button */
Var buttonGood = document. createElement ("button ");
Var buttonGoodText = document. createTextNode ("move to my favorites ");
ButtonGood. appendChild (buttonGoodText );
TageDivBtn. appendChild (buttonGood );

/* Add and clear the floating div */
Var divClear = document. createElement ("div ");
DivClear. setAttribute ("class", "clear ");
Li. appendChild (divClear );
}
}
}
// Delete the corresponding item
Function deletePro (obj ){
Var li = obj. parentNode;
Var id = li. getAttribute ("data-id ");
DelProduct (id );
Li. remove ();
}
// Add product quantity
Function add (obj ){
Var prd_num = obj. previussibling;
Var id = obj. parentNode. getAttribute ("data-id ");
Var bNode = obj. parentNode. nextSibling;
Var num = prd_num.value;
If (isNaN (num )){
Num = 1;
} Else {
Num = parseInt (num );
}

Num + = 1;
Prd_num.value = num;
ChangeCarNum (id, num, bNode );
}
// Operation for changing the commodity quantity
Function numChange (obj ){
Var num = obj. value;
Var id = obj. parentNode. getAttribute ("data-id ");
Var bNode = obj. parentNode. nextSibling;
Console. log (id)


If (isNaN (num )){
Num = 1;
}
Num = parseInt (num );
Obj. value = num;
ChangeCarNum (id, num, bNode)
Console. log (num)


}
// Reduce the number of items
Function reduce (obj ){
Var prd_num = obj. nextSibling;
Var id = obj. parentNode. getAttribute ("data-id ");
Var bNode = obj. parentNode. nextSibling;
Var num = prd_num.value;
If (isNaN (num )){
Num = 1;
} Else {
Num = parseInt (num );
}
Num-= 1;
If (num <1 ){
Num = 1;
}
Prd_num.value = num;
ChangeCarNum (id, num, bNode );
}
// Change the number of local data
Function changeCarNum (id, num, bNode ){
Var carData = JSON. parse (getCar ());
Console. log (bNode );
For (var I = 0; I <carData. length; I ++ ){
If (carData [I]. id = id ){
CarData [I]. num = num;
CarData [I]. totalPrice = (carData [I]. price * num). toFixed (2 );
BNode. innerText = ("￥" + carData [I]. totalPrice)
Console. log (bNode. innerText)
Console. log (carData [I]. totalPrice)
Break;
}
}
AddCar (carData );
}
/* Select to hook */
Var checkboxImg = function (clickObj ){
Var carData = JSON. parse (getCar ());
If (carData ){
Var img = clickObj. firstChild;
Var imgNum = img. alt;
Show (imgNum, img)
}
}
/* Determine whether the img alt value imgNum is the image alt value, and the img is the image object */
Function show (imgNum, img ){
If (imgNum = "1 "){
Img. src = "./images/checkbox0.png ";
Img. setAttribute ("alt", "0 ");
} Else {
Img. src = "./images/checkbox.png ";
Img. setAttribute ("alt", "1 ");
}
}
/* Click the image check box to select */
Function clickImg (imgObj ){
Var carData = JSON. parse (getCar ());
Var id = imgObj. parentNode. parentNode. getAttribute ("data-id ");
If (carData ){
Var inputImg = imgObj. previussibling. firstChild
Var imgNum = inputImg. alt;
Show (imgNum, inputImg)
}
}

Which of the following statements are deleted?

 

Below is the local storage

Var keyName = "shopCar"
// Add the item to the shopping cart
Function addShopCar (product ){
Var productData = getCar ();
If (! ProductData ){
Var proData = [
Product
]
AddCar (proData)
} Else {
Var carData = JSON. parse (productData );
Var bool = true;
For (var I = 0; I <carData. length; I ++ ){
If (carData [I]. id = product. id ){
CarData [I]. num = parseInt (carData [I]. num) + parseInt (product. num );
CarData [I]. totalPrice = (parseFloat (carData [I]. totalPrice) + parseFloat (product. totalPrice). toFixed (2 );
Bool = false;
Break;
}
}
If (bool ){
CarData. push (product)
}
AddCar (carData );
}
}
Function getCar (){
Return localStorage. getItem (keyName );
}
Function addCar (productData ){
LocalStorage. setItem (keyName, JSON. stringify (productData ));
}
// Delete the corresponding item with the specified id
Function delProduct (id ){
Var carData = JSON. parse (getCar ());
Var arrData = [];
For (var I = 0; I <carData. length; I ++ ){
If (carData [I]. id = id ){
Continue;
} Else {
ArrData. push (carData [I])
}
}
AddCar (arrData );
}
// Clear the shopping cart
Function clearCar (){
LocalStorage. removeItem (keyName );
}

Function clearProAll (){
ClearCar ();
Var ul = document. getElementById ("carUl ");
Console. log (ul)
If (ul ){
Var li = ul. getElementsByTagName ("li ");
Var length = li. length;
For (var I = 0; I <length; I ++ ){
Ul. remove (I );
}
}
}

 

 

Html section

 

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> shopping cart center </title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<Link rel = "stylesheet" href = "css/bootstrap.css"/>
<Link rel = "stylesheet" href = "css/common.css"/>
<Link rel = "stylesheet" href = "css/page_common.css"/>
<Link rel = "stylesheet" href = "css/shop_cart.css"/>
<Script type = "text/javascript" src = "js/jquery-1.11.0.js"> </script>
<Script type = "text/javascript" src = "js/bootstrap. js"> </script>
<Script src = "js/shopCar. js"> </script>

<Style>
Body {width: pixel PX; margin: 0 auto ;}
</Style>

</Head>
<Body onload = "loadCar ()">
<Div> <a href = "javascript: clearProAll ();"> clear the shopping cart </a> </div>
<Div class = "shop_cart_head">
<H4> all products <Div class = "right">
Delivery: <select name = "" id = "">
<Option value = ""> Tianhe District, Guangzhou </option>
<Option value = ""> Guangzhou Baiyun district </option>
<Option value = ""> Yuexiu District, Guangzhou </option>
<Option value = ""> Panyu district, Guangzhou </option>
<Option value = ""> Longgang District, Shenzhen </option>
</Select>
</Div> <! -- Right -->
</Div> <! -- Shop_cart_head -->
<Div class = "shop_cart clear">
<Div class = "shop_cart_top">
<Div> </div>
<H5> select all
<H6> Product Information <Ol>
<Li> unit price </li>
<Li> quantity </li>
<Li> amount </li>
<Li> operation </li>
</Ol>

</Div> <! -- Shop_cart_top -->
<Div class = "shop_cart_list">
<Ul id = "carUl">
<! -- <Li>
<Div class = "list_left">

<Div id = "input" onclick = "checkboxImg (this)"> </div>

<H6> Estee Lauder lipsticks female ripple lipsticks Hyun MOOC series <Strong> genuine moisturizing lasting </strong>
<P>
Efficacy: <span> easy-to-color, moisturizing </span>
</P>
<P>
Color: <span> Rose Red </span>
</P>
</Div>
<Div class = "list_right">
<I> ￥299.00 </I>
<Div class = "pro_number_btn">
<Button>-</button>
<Input type = "text" value = "1">
<Button> + </button>
</Div>
<B> ￥299.00 </B>
<Div class = "cart_btn">
<Button> Delete </button>
<Button> move to my favorites </button>
</Div>
</Div>
<Div class = "clear"> </div>
</Li> -->
</Ul>
</Div> <! -- Shop_cart_list -->
</Div> <! -- Shop_cart -->
<Div class = "amount">

 

<Script>

</Script>
<Div class = "left">
<Div> </div>
<I> invert selection </I>
<A href = "#"> delete a selected product </a>
<A href = "#"> move to my attention </a>
<A href = "#"> share </a>
</Div> <! -- Left -->
<Div class = "right">
<P> Select & nbsp; <span> 0 </span> & nbsp; Products </p>
<P> total price: <I> ￥0.00 </I> </p>
<Button> checkout </button>
</Div> <! -- Right -->
<Div class = "clear"> </div>
</Div> <! -- Amount -->
<Div onclick = "checkboxAll ()"> rtgr </div>

</Body>
</Html>

Css

 

 

. Shop_cart_head> h4 {font-size: 14px; float: left; margin-top: 20px ;}
. Shop_cart_head>. right {float: right; margin-top: 20px; margin-bottom: 20px ;}
. Shop_cart_head>. right> select {border: 1px solid # ccc; background-color: # fff ;}
. Shop_cart {border: 1px solid # ccc ;}
. Shop_cart>. shop_cart_top {background-color: # e2e2e2; padding: 10px 20px 4px 20px; border-bottom: 1px solid # ccc; height: 60px ;}

. Shop_cart>. shop_cart_top> div {float: left; height: 13px; width: 13px; border: 1px solid # ccc; position: relative; margin-top: 12px ;}
. Shop_cart>. shop_cart_top> div> img {position: absolute; left:-2px; top:-4px ;}
. Shop_cart>. shop_cart_top> h5 {float: left; margin-left: 10px; margin-top: 12px ;}
. Shop_cart>. shop_cart_top> h6 {float: left; margin-left: 156px; margin-top: 12px ;}
. Shop_cart>. shop_cart_top> ol {float: right; margin-right: 60px; margin-top: 10px ;}
. Shop_cart>. shop_cart_top> ol> li {display: inline-block; margin-left: 90px ;}
/* Shopping cart list */
/* Left part */
. Shop_cart_list> ul {padding: 0px 20px; margin-bottom: 0px ;}
. Shop_cart_list> ul> li {border-bottom: 1px solid # ccc ;}
. Shop_cart_list> ul> li: last-child {border-bottom: 0px ;}
. Shop_cart_list> ul> li>. list_left {float: left ;}
. Shop_cart_list> ul> li>. list_left> div {float: left; margin-top: 72px; height: 13px; width: 13px; border: 1px solid # ccc; position: relative ;}
. Shop_cart_list> ul> li>. list_left> div> img {position: absolute; left:-2px; top:-4px ;}
. Shop_cart_list> ul> li>. list_left> img {float: left; width: 120px; height: 120px; margin: 20px 10px ;}
. Shop_cart_list> ul> li>. list_left> h6 {display: inline-block; color: #666; margin-top: 30px; margin-bottom: 6px ;}
. Shop_cart_list> ul> li>. list_left> strong {color: #666; display: block ;}
. Shop_cart_list> ul> li>. list_left> p {color: #999; margin-top: 6px; margin-bottom: 4px ;}
/* Right part */
. Shop_cart_list> ul> li>. list_right {float: right; padding: 60px 20px 40px 0px ;}
. Shop_cart_list> ul> li>. list_right> I {font-style: normal; margin-right: 64px; float: left; display: block; margin-top: 22px ;}
. Shop_cart_list> ul> li>. list_right>. pro_number_btn {margin-right: 47px; display: inline-block; border: 1px solid # d3d3d3; color: #999; float: left; display: block; margin-top: 19px ;}
. Shop_cart_list> ul> li>. list_right>. pro_number_btn> button {background-color: # f0f0f0; width: 20px; height: 20px; border-left: 1px solid # d3d3d3 ;}
. Shop_cart_list> ul> li>. list_right>. pro_number_btn> button: first-child {background-color: # e2e2e2; border-left: 0px; border-right: 1px solid # d3d3d3 ;}
. Shop_cart_list> ul> li>. list_right>. pro_number_btn> input {text-align: center; background-color: # f0f0f0; width: 40px; border: 0px ;}
. Shop_cart_list> ul> li>. list_right> B {font-weight: normal; margin-right: 50px; float: left; display: block; width: 70px; text-align: center; margin-top: 20px ;}
. Shop_cart_list> ul> li>. list_right>. cart_btn {display: inline-block; float: left; display: block; margin-top: 6px ;}
. Shop_cart_list> ul> li>. list_right>. cart_btn> button {display: block; background-color: # f0f0f0; margin-bottom: 10px ;}
/* Checkout part */
. Amount {color: #666; background-color: # dedede; margin-top: 20px; margin-bottom: 30px; padding-left: 20px; border: 1px solid # ccc ;}
. Amount>. left {float: left; margin-top: 14px ;}
. Amount>. left> div {float: left; height: 13px; width: 13px; border: 1px solid # ccc; position: relative; margin-top: 4px ;}
. Amount>. left> div> img {position: absolute; left:-2px; top:-4px ;}
. Amount>. left> I {display: block; float: left; font-style: normal; font-size: 14px; margin-left: 10px ;}
. Amount>. left> a {display: block; float: left; color: #666; font-size: 14px; margin-left: 20px ;}
. Amount>. right {float: right ;}
. Amount>. right> p {display: inline-block; font-size: 14px; margin-right: 20px ;}
. Amount>. right> p> I {font-style: normal; color: # cc0000; font-size: 18px ;}
. Amount>. right> button {background-color: # cc0000; font-size: 18px; height: 50px; line-height: 50px; padding: 0px 28px; color: # fff ;}
. Page_btn {padding-bottom: 30px ;}

/* Search box */
Header. header_cont. input_search {margin-left: 456px ;}