Shopping Cart and shopping cart Functions

Source: Internet
Author: User

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 ;}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.