Home > Developer > JavaScript

Use JQuery to implement a shopping cart similar to a shopping mall

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

 

Use the JQuery Clone template to display product information. You can modify the td in the template to determine how many items are displayed in each row.

Product Information is simulated using JSON data

If you click the same product multiple times, you will not add it again. Instead, the number of existing products is + 1,

You can also manually enter the number of items. If you enter 0, the item will be automatically deleted from the shopping cart (when you click the minus sign to less than 1, the system will also prompt whether to delete the item information from the shopping cart)

The price and total price of each product are calculated dynamically based on the addition and deletion operations.

Download link: http://www.bkjia.com/uploadfile/2011/1207/20111207052620634.rar

Basic functions have been implemented. We recommend that you use IE6, and the browser run. Other Browsers Do not test the function.

 

 

HTML code:

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>

<Title> untitled document </title>

</Head>

<Body>

<H2 style = "text-align: left"> item list

<Table width = "800" border = "0" id = "tblProduct" cellpadding = "1" cellspacing = "1" bgcolor = "black">

<Tr id = "trMaster" bgcolor = "white" style = "display: none">

<Td>

ID: <span> 000001 </span> <br/>

Name: <span> aa </span> <br/>

Price: <span> 2.5 </span> <br/>

Description: <span> aaaaa </span> <br/>

<Div style = "text-align: right"> <input type = "button" name = "btnBuy" value = "buy"/> </div>

</Td>

<Td>

ID: <span> 000001 </span> <br/>

Name: <span> aa </span> <br/>

Price: <span> 2.5 </span> <br/>

Description: <span> aaaaa </span> <br/>

<Div style = "text-align: right"> <input type = "button" name = "btnBuy" value = "buy"/> </div>

</Td>

<Td>

ID: <span> 000001 </span> <br/>

Name: <span> aa </span> <br/>

Price: <span> 2.5 </span> <br/>

Description: <span> aaaaa </span> <br/>

<Div style = "text-align: right"> <input type = "button" name = "btnBuy" value = "buy"/> </div>

</Td>

<Td>

ID: <span> 000001 </span> <br/>

Name: <span> aa </span> <br/>

Price: <span> 2.5 </span> <br/>

Description: <span> aaaaa </span> <br/>

<Div style = "text-align: right"> <input type = "button" name = "btnBuy" value = "buy"/> </div>

</Td>

</Tr>

</Table>

<H2 style = "text-align: left"> shopping cart

<Table width = "800" border = "0" id = "tblOrder" cellpadding = "1" cellspacing = "1" bgcolor = "black">

<Tr bgcolor = "white"> <td> NO. </td> <td> NO. </td> <td> name </td> <td> description </td> <td> quantity </td> <td> unit price </td> <td> total price </td> <td> Delete </td> </tr>

<Tr id = "orderMarter" bgcolor = "white" style = "display: none">

<Td style = "width: 5%"> 1 </td>

<Td style = "width: 10%"> 000001 </td>

<Td style = "width: 10%"> aa </td>

<Td> aaaaa </td>

<Td style = "width: 15%">

<Input type = "text" name = "txtNum" style = "width: 50px;" value = "0" onkeyup = "this. value = this. value. replace (/\ D/g, '')" onafterpaste = "this. value = this. value. replace (/\ D/g, '')"/>

<Input type = "button" name = 'btnadd' style = "width: 15px; text-align: center" value = "+"/>

<Input type = "button" name = 'btncut 'style = "width: 15px; text-align: center" value = "-"/>

</Td>

<Td style = "width: 10%"> 0 </td>

<Td style = "width: 10%"> <font color = "red"> 0 </font> </td>

<Td style = "width: 5%; text-align: center"> <input type = "button" name = 'btndelete' style = "width: 30px; text-align: center "value =" X "/> </td>

</Tr>

</Table>

<Table width = "800" border = "0" id = "tblTotal" cellpadding = "1" cellspacing = "1" bgcolor = "black">

<Tr bgcolor = "white" align = "right">

<Td> total price </td>

<Td id = "tdTotal"> <font color = "# FF0000" size = "+ 1" face = "Arial, Helvetica, sans-serif "> 0.0 </font> </td>

</Tr>

</Table>

 

</Body>

JS Code

View Code

<Script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>

<Script type = "text/javascript">

/*

@@

@@

@@

*/

Var product = [

{ProdId: "000001", prodName: "aa", price: 2.5, description: "aaaaa "},

{ProdId: "000002", prodName: "bb", price: 2.4, description: "bbbbb "},

{ProdId: "000003", prodName: "cc", price: 2.3, description: "ccccc "},

{ProdId: "000004", prodName: "dd", price: 2.2, description: "ddddd "},

{ProdId: "000005", prodName: "ee", price: 2.1, description: "eeeee "},

{ProdId: "000006", prodName: "ff", price: 2.0, description: "fffff "},

{ProdId: "000007", prodName: "gg", price: 1.9, description: "ggggg "},

{ProdId: "000008", prodName: "hh", price: 1.8, description: "hhhhh "},

{ProdId: "000009", prodName: "ii", price: 1.7, description: "iiiii "}

];

</Script>

 

 

<Script type = "text/javascript">

Var j = 0, I =-1, k =-1, len = $ ("# trMaster td "). size (); // The data and the template's td can be customized, and the format is correct.

$. Each (product, function (index, prod ){

I ++;

K ++;

If (I % len = 0 ){

J ++;

CloneTR (j); // clone rows based on the template

}

If (k = len)

K = 0;

SetTD (j, k, prod. prodId, prod. prodName, prod. price, prod. description); // assign a value to the td of the cloned row

});

// Clone rows based on the template

Function CloneTR (id ){

$ ("# TrMaster" ).clone(true).css ("display", "block"). attr ("id", "tr" + id). appendTo ("# tblProduct ");

$ ("# Tr" + id + "td span"). empty ();

}

// Assign a value to the td of the cloned row

Function setTD (trId, index, prodId, prodName, price, description ){

Var tr = $ ("# tr" + trId );

$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (0)" pai.html (prodId );

$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (1)" ).html (prodName );

$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (2)" pai.html (price );

$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (3)" ).html (description );

}

Var tempId = "";

Var num = 0;

// Click buy

$ ("Input [name = 'btnbuy']"). click (function (){

Var elem = $ (this). parent (). parent (); // get the td of the clicked button

Var prodId = $ (elem). find ("span: eq (0)" pai.html ();

Var prodName = $ (elem). find ("span: eq (1)" pai.html ();

Var price = $ (elem). find ("span: eq (2)" pai.html ();

Var description = $ (elem). find ("span: eq (3)" pai.html ();

If (prodId = "" | prodId = null | prodId = undefined ){

Alert ("click another product ");

} Else {

If (tempId. indexOf (prodId )! =-1 ){

If (confirm ('already exists, are you sure the number is + 1? ')){

$ ("# TblOrder tr: gt (1)"). each (function (){

If ($ (this). find ("td: eq (1)" example .html () = prodId ){

Var num = $ (this ). find ("td: eq (4 )"). find ("input [name = 'txtnum']"). attr ("value ");

$ (This ). find ("td: eq (4 )"). find ("input [name = 'txtnum']"). attr ("value", + num + 1); // equivalent to parseInt (num) + 1;

}

});

}

} Else {

Num ++;

CloneOrder (num, prodId, prodName, price, description );

}

TempId + = prodId + ",";

$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");

}

});

// Clone the order according to the order template

Function CloneOrder (id, prodId, prodName, price, description ){

$ ("# OrderMarter" ).clone(true).css ("display", "block"). attr ("id", "tro" + id). appendTo ("# tblOrder ");

Var tr = $ ("# tro" + id );

$ (Tr). find ("td: eq (0)" 2.16.html (num );

$ (Tr). find ("td: eq (1)" pai.html (prodId );

$ (Tr). find ("td: eq (2)" ).html (prodName );

$ (Tr). find ("td: eq (3)" pai.html (description );

$ (Tr ). find ("td: eq (4 )"). find ("input [name = 'txtnum']"). attr ("value", "1 ");

$ (Tr). find ("td: eq (5)" pai.html (price );

$ (Tr). find ("td: eq (6)" 2.16.html ("<font color = 'red'>" + price + "</font> ");

}

// Get the total price

Function GetTotalPrice (){

Var totalNum = 0;

$ ("# TblOrder tr: gt (1)"). each (function (){

Var value = parseFloat ($ (this). find ("td: eq (6)"). text ());

TotalNum + = value;

});

Return totalNum;

}

$ (Function (){

$ ("# TblOrder input [name = 'txtnum']"). bind ("propertychange change blur", function (){

Var value = $ (this). val ();

Var tr = $ (this). parent (). parent ();

If (value = 0 ){

If (confirm ('Are you sure you want to delete this item? ')){

Var prodId = $ (tr). find ("td: eq (1)" pai.html ();

TempId = tempId. replace (prodId + ",","");

$ (Tr). remove ();

}

} Else {

Var price = $ (tr). find ("td: eq (5)" pai.html ();

Var total = value * price;

$ (Tr ). find ("td: eq (6)" 2.16.html ("<font color = 'red'>" + total. toFixed (2) + "</font> ");

$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");

}

});

// Add 1

$ ("# TblOrder input [name = 'btnadd']"). click (function (){

Var txtBox = $ (this ). parent (). parent (). find ("td: eq (4 )"). find ("input [name = 'txtnum']");

Var value = $ (txtBox). attr ("value ");

Value = + value + 1;

$ (TxtBox). attr ("value", value)

});

// Minus 1

$ ("# TblOrder input [name = 'btncut ']"). click (function (){

Var txtBox = $ (this ). parent (). parent (). find ("td: eq (4 )"). find ("input [name = 'txtnum']");

Var tr = $ (this). parent (). parent ();

Var value = $ (txtBox). attr ("value ");

If (value> 1 ){

Value = + value-1;

$ (TxtBox). attr ("value", value)

} Else {

If (confirm ('Are you sure you want to delete this item? ')){

Var prodId = $ (tr). find ("td: eq (1)" pai.html ();

TempId = tempId. replace (prodId + ",","");

$ (Tr). remove ();

$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");

}

}

});

// Delete btnRemove

$ ("# TblOrder input [name = 'btndelete']"). click (function (){

Var tr = $ (this). parent (). parent ();

If (confirm ('Are you sure you want to delete this item? ')){

Var prodId = $ (tr). find ("td: eq (1)" pai.html ();

TempId = tempId. replace (prodId + ",","");

$ (Tr). remove ();

$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");

}

});

});

 

</Script>

 

From Xiaofeng fuyue

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
c a clothing online shopping add shopping cart to existing website how to create shopping cart in javascript how to make shopping cart in python how to integrate shopping cart into website b g shopping mall cube cart shopping cart

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More