Home > Developer > Web Develop
Front-end development of shopping cart and Development of shopping cart
As a software engineer not working in a software company, not only must I write background code (PHP/JAVA/SQL ...), still take into account the work of front-end engineers (html/javascript/css ...). Next we will share a front-end development of the shopping cart used in the actual work project.
Here we only share the operations for the shopping cart (the number of products increases and decreases, and the items in the shopping cart are deleted). Suppose there are already several products in the shopping cart. Let's talk less about it. Let's take the first two screenshots.
The HTML code is as follows: JQuery1.11 and bootstrap3 are used here.
<! DOCTYPE html> <HEADER> <meta charset = "UTF-8"> <title> Shopping Cart </title> <script type = "text/javascript" src = "jquery-1.11.min.js"> </script> <script type = "text/javascript" src = "demo. js "> </script> <link href =" bootstrap.min.css "media =" screen "rel =" stylesheet "type =" text/css "/> </HEADER> <body class = "container"> <table id = "cartTable" class = "cart table-condensed"> <thead> <tr> <th style = "width: 60px; "> <label> <input class =" check-all check "type =" checkbox "/> select all </label> </th> <label> Product Model </label> </th> <th style = "width: 100px; "> <label> unit price </label> </th> <th style =" width: 120px; "> <label> quantity </label> </th> <th style =" width: 100px; "> <label> subtotal </label> </th> <th style =" width: 40px; "> <label> operation </label> </th> </tr> </thead> <tbody> <tr> <td> <input class =" check-one check "type =" checkbox "/> </td> <td class =" goods "> <label> Item 1 </label> </td> <td class =" number small -bold-red "> <span> 76.55 </span> </td> <td class =" input-group "> <span class =" input-group-addon minus" >-</span> <input type = "text" class = "number form-control input-sm" value = "10"/> <span class = "input-group- addon plus "> + </span> </td> <td class =" subtotal number small-bold-red "> 101 </td> <td class =" operation "> <span class = "delete btn-xs btn-primary"> delete </span> </td> </tr> <td> <input class = "check -one check "type =" checkbox "/> </td> <td class =" goods "> <label> Item 2 </label> </td> <td class = "number small-bold-red"> <span> 1100 </span> </td> <td class = "input-group"> <span class = "input-group- addon minus ">-</span> <input type =" text "class =" number form-control input-sm "value =" 1 "/> <span class =" input -group-addon plus "> + </span> </td> <td class =" subtotal number small-bold-red "> 352 </td> <td class =" operation "> <span class =" delete btn-xs btn-primary "> delete </span> </td> </tr> <td> <input class = "check-one check" type = "checkbox"/> </td> <td class = "goods"> <label> Item 3 </label> </td> <td class = "number small-bold-red"> <span> 1200 </span> </td> <td class = "input-group"> <span class = "input -group-addon minus ">-</span> <input type =" text "class =" number form-control input-sm "value =" 1 "/> <span class = "input-group-addon plus"> + </span> </td> <td class = "subtotal number small-bold-red"> 9876.55 </td> <td class = "operation"> <span class = "delete btn-xs btn-primary"> delete </span> </td> </tr> <td> <input class = "check-one check" type = "checkbox"/> </td> <td class = "goods"> <label> Item 4 </label> </ td> <td class = "number small-bold-red"> <span> 1400 </span> </td> <td class = "input-group"> <span class = "input-group-addon minus">-</span> <input type = "text" class = "number form-control input-sm" value = "1"/> <span class = "input-group-addon plus"> + </span> </td> <td class = "subtotal number small-bold-red"> 9876.55 </td> <td class = "operation"> <span class = "delete btn-xs btn-primary"> delete </span> </td> </tr> </tbody> </table> <div class = "row"> <div class = "col-md-12 col-lg-12 col-sm-12"> <div style = "border-top: 1px solid gray; padding: 4px 10px; "> <div style =" margin-left: 20px; "class =" pull-right total "> <label> total amount: <span class = "currency" >￥ </span> <span id = "priceTotal" class = "large-bold-red"> 0.00 </span> </label> </div> <div class = "pull-right"> <label> you have selected <span id = "itemCount" class = "large-bold-red" style = "margin: 0 4px; "> </span> product models, total <span id =" qtyCount "class =" large-bold-red "style =" margin: 0 4px; "> </span> </label> </div> <div class =" pull-right selected "id =" selected "> <span id =" selectedTotal "> </span> </div> </body>
The HTML code is mainly divided into two parts. The TABLE part is used to display the product details in the shopping cart, and a DIV is used to display the summary information. Here we use a technique that requires special explanation:1. specify some false class names for the elements (style names that do not exist in the style sheet) to facilitate the use of JQuery filters to find specific elements. For example, the style check-all/check-one/cart/subtotal in the above Code
Javascript code needs to implement the following functions:
1. Select all products
2. Calculate the product subtotal (that is, the product unit price * quantity purchased)
3. if you select a product model in the shopping cart, you need to recalculate the summary information at the bottom of the page, including the selected product model type, product quantity subtotal, and amount subtotal.
4. When you delete a product model in the shopping cart or modify the purchased quantity, You need to recalculate the summary information at the bottom of the page.
The above functions are described below:
1. Select all products
$ (CartTable ). find (": checkbox "). click (function () {// select all box and click if ($ (this ). hasClass ("check-all") {var checked = $ (this ). prop ("checked"); $ (cartTable ). find (". check-one "). prop ("checked", checked);} // If you manually select all the check boxes one by one, you must automatically check all or cancel var items = cartTable. find ("tr: gt (0)"); $ (cartTable ). find (". check-all "). prop ("checked", items. find (": checkbox: checked "). length = items. length); getTotal ();});Bind a click event for each option box in the shopping cart table. In this event, you need to determine whether the user clicks the "select all" option box or the selection box of each product. Here, the above-mentioned false style is used again. Here, it is worth noting that the attribute of the element read by JQuery is usually the attr () method, but for checkbox, the checked attribute value cannot be correctly read using attr. The correct usage is to use the prop () method for reading.If you click "select all", all the selection boxes should be selected, which is easy to consider. However, when you manually select all products one by one, the program should also set the "select all" box to the selected status or in the selected status, if the user manually cancels the selected status of a product, the program should also set the "select all" box to the unselected status.
The last line of code is to recalculate the summary information of the shopping cart after the user selects it.
2. Product subtotal function code:
/** Calculate the amount of each product row in the shopping cart subtotal ** parameter: row in the shopping cart table row Element tr **/function getSubTotal (row) {var price = parseFloat ($ (row ). find ("span: first "). text (); // get the unit price var qty = parseInt ($ (row ). find (": text "). val (); // obtain the quantity var result = price * qty; // calculate the amount Subtotal $ (row ). find (". subtotal "). text (result. toFixed (2); // write the calculated amount subtotal to the "subtotal" field };This function requires the input of a parameter, that is, the tr element used to display the content of the shopping cart.
In the table showing the content of the shopping cart, the unit price of each product is enclosed by a span element, which is the first span element in the row. The JQuery filter is used.$(row).find("span:first")You can locate the product unit price, use its text function to read the content, and use parseFloat to convert the string to a floating point number.The number of purchases, which may be changed by the user, is displayed using input. Colleague, use the following filter to locate the quantity
$(row).find(":text")And convert it to an integer using parseInt. After calculating the subtotal for a single product, you need to write it into the "subtotal" column and use the toFixed method to format the number into a decimal style with two digits.
3. Shopping Cart amount Summary
/** Calculate the cumulative amount of products in the shopping cart **/function getTotal () {var qtyTotal = 0; var itemCount = 0; var priceTotal = 0; $ (cartTable ). find ("tr: gt (0 )"). each (function () {if ($ (this ). find (": checkbox "). prop ("checked") = true) {// If itemCount ++ is selected; // accumulate the number of product varieties qtyTotal + = parseInt ($ (this ). find (": text "). val (); // cumulative product purchase quantity priceTotal + = parseFloat ($ (this ). find (". subtotal "). text (); // accumulated product amount }});$("#itemCount").text(itemCount); $("#qtyCount").text(qtyTotal);$("#priceTotal").text(priceTotal.toFixed(2)); };
When calculating the shopping cart summary information, you should traverse all the rows in the shopping cart and accumulate the subtotal and quantity of each row. Here we use a technique to retrieve all rows in the shopping cart table.$(cartTable).find("tr:gt(0)")The tr: gt (0) used here indicates Selecting All tr elements in the table and the index is greater than 0 (that is, removing the first tr element). Why? Looking back at the HTML code, it is not difficult to find that the first tr element is the table title header and does not contain any business data. Therefore, this tr element should be removed during the traversal.
4. the user deletes the product or recalculates the product subtotal and summary information when modifying the purchased quantity.
// Provide a click event for the +-number of the quantity adjustment, and recalculate the product subtotal/** bind a click event for each row in the shopping cart, and bind the keyboard event in the input box of each line * perform different actions based on the element of the trigger event * increase the number * decrease the number * Delete the product **/$ (cartTable ). find ("tr: gt (0 )"). each (function () {var input = $ (this ). find (": text"); // Add an event for the quantity input box, calculate the amount subtotal, and update the total $ (input ). keyup (function () {var val = parseInt ($ (this ). val (); if (isNaN (val) | (val <1) {$ (this ). val ("1");} getSubTotal ($ (this ). parent (). parent (); // tr element getTotal () ;}); // call the number The entire button, delete add and click events, calculate the amount subtotal, and update the total $ (this ). click (function () {var val = parseInt ($ (input ). val (); if (isNaN (val) | (val <1) {val = 1;} if ($ (window. event. srcElement ). hasClass ("minus") {if (val> 1) val --; input. val (val); getSubTotal (this);} else if ($ (window. event. srcElement ). hasClass ("plus") {if (val <9999) val ++; input. val (val); getSubTotal (this);} else if ($ (window. event. srcElement ). hasClass ("del Ete ") {if (confirm (" are you sure you want to delete this product from the cart? ") {$ (This). remove () ;}} getTotal ();});
Here, I do not bind the "add", "delete", and "delete" Buttons one by one, but bind the click event to the TR row in a unified manner, then, determine the elements that trigger the click event to determine the operation to perform.When you click "+" or "-", the program will increase or decrease the number by one, and re-calculate the product subtotal and summary information.
In addition, a keyboard event is bound to the quantity input box. This event is triggered every time you press the keyboard in the input box, and the product subtotal and summary information are recalculated.
So far, the front-end development of the shopping cart has come to an end.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
