jQuery Implements Simple Shopping Cart Pages

Functional description:

When the Select All button is pressed, the small check boxes (and another Select All button) of all the goods are selected in the same state as the Select All button pressed.

When the user selects a commodity, if all the commodities are selected, let the Select All button be selected.

Users can click + - to increase or decrease the quantity of goods, or modify the quantity directly in the text box, the subtotal after the quantity changes accordingly;

Users can delete items, delete individual items, select items, and clean up shopping carts.

The number of items selected below and the total amount will also vary as users operate

Dead work:

First introduce the css style and jq, js files, JQ files on top of js files

<link rel="stylesheet" href="css/car.css">
<script src="js/jquery.min.js"></script>
<script src="js/car.js"></script>

HTML code and CSS style:

 1 <body>
 2     <div class="w">
 3         <div class="cart-warp">
 4             <!-- Header Selection Module -->
 5             <div class="cart-thead">
 6                 <div class="t-checkbox">
 7                     <input type="checkbox" name="" id="" class="checkall"> Select All
 8                 </div>
 9                 <div class="t-goods">commodity</div>
10                 <div class="t-price">Unit Price</div>
11                 <div class="t-num">Number</div>
12                 <div class="t-sum">Subtotal</div>
13                 <div class="t-action">operation</div>
14             </div>
15             <!-- Commodity Detail Module -->
16             <div class="cart-item-list">
17                 <div class="cart-item check-cart-item">
18                     <div class="p-checkbox">
19                         <input type="checkbox" name="" id="" checked class="j-checkbox">
20                     </div>
21                     <div class="p-goods">
22                         <div class="p-img">
23                             <img src="img/p1.jpg" alt="">
24                         </div>
25                         <div class="p-msg">[5 Ben 26.8 Yuan) Outline of Language Teaching for Middle School Students Around the Earth in Eighty Days</div>
26                     </div>
27                     <div class="p-price">¥12.60</div>
28                     <div class="p-num">
29                         <div class="quantity-form">
30                             <a href="javascript:;" class="decrement">-</a>
31                             <input type="text" class="itxt" value="1">
32                             <a href="javascript:;" class="increment">+</a>
33                         </div>
34                     </div>
35                     <div class="p-sum">¥12.60</div>
36                     <div class="p-action"><a href="javascript:;">delete</a></div>
37                 </div>
38                 <div class="cart-item">
39                     <div class="p-checkbox">
40                         <input type="checkbox" name="" id="" class="j-checkbox">
41                     </div>
42                     <div class="p-goods">
43                         <div class="p-img">
44                             <img src="img/p2.jpg" alt="">
45                         </div>
46                         <div class="p-msg">[2000 Sticker Book 3-6 12-year-old sticker children's stickers complete set of 12 sticker children's steam</div>
47                     </div>
48                     <div class="p-price">¥24.80</div>
49                     <div class="p-num">
50                         <div class="quantity-form">
51                             <a href="javascript:;" class="decrement">-</a>
52                             <input type="text" class="itxt" value="1">
53                             <a href="javascript:;" class="increment">+</a>
54                         </div>
55                     </div>
56                     <div class="p-sum">¥24.80</div>
57                     <div class="p-action"><a href="javascript:;">delete</a></div>
58                 </div>
59                 <div class="cart-item">
60                     <div class="p-checkbox">
61                         <input type="checkbox" name="" id="" class="j-checkbox">
62                     </div>
63                     <div class="p-goods">
64                         <div class="p-img">
65                             <img src="img/p3.jpg" alt="">
66                         </div>
67                         <div class="p-msg">Three hundred Tang Poems+Idiom Stories 2 volumes First-grade Extracurricular Books Hard-boxed Annotated Children's Edition Pupils Second and Third-grade Extracurricular Reading Books</div>
68                     </div>
69                     <div class="p-price">¥29.80</div>
70                     <div class="p-num">
71                         <div class="quantity-form">
72                             <a href="javascript:;" class="decrement">-</a>
73                             <input type="text" class="itxt" value="1">
74                             <a href="javascript:;" class="increment">+</a>
75                         </div>
76                     </div>
77                     <div class="p-sum">¥29.80</div>
78                     <div class="p-action"><a href="javascript:;">delete</a></div>
79                 </div>
80             </div>
81             <!-- Settlement module -->
82             <div class="cart-floatbar">
83                 <div class="select-all">
84                     <input type="checkbox" name="" id="" class="checkall">Select All
85                 </div>
86                 <div class="operation">
87                     <a href="javascript:;" class="remove-batch"> Delete the selected item</a>
88                     <a href="javascript:;" class="clear-all">Clean up the shopping cart</a>
89                 </div>
90                 <div class="toolbar-right">
91                     <div class="amount-sum">Selected<em>1</em>Goods</div>
92                     <div class="price-sum">Total price: <em>¥12.60</em></div>
93                     <div class="btn-area">To settle</div>
94                 </div>
95             </div>  <!-- cart-floatbar end -->
96         </div>  <!-- cart-warp end -->
97     </div>  <!-- w end -->
98 </body>
car.html
  1 * {
  2     margin: 0;
  3     padding: 0
  4 }
  5 em,
  6 i {
  7     font-style: normal;
  8 }
  9 li {
 10     list-style: none;
 11 }
 12 a {
 13     color: #666;
 14     text-decoration: none;
 15 }
 16 a:hover {
 17     color: #e33333;
 18 }
 19 body {
 20     font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
 21     color: #666
 22 }
 23 .w {
 24     width: 1200px;
 25     margin: 0 auto;
 26 }
 27 .cart-thead {
 28     height: 32px;
 29     line-height: 32px;
 30     margin: 5px 0 10px;
 31     padding: 5px 0;
 32     background: #f3f3f3;
 33     border: 1px solid #e9e9e9;
 34     border-top: 0;
 35     position: relative;
 36 }
 37 .cart-thead>div,
 38 .cart-item>div {
 39     float: left;
 40 }
 41 .t-checkbox,
 42 .p-checkbox {
 43     height: 18px;
 44     line-height: 18px;
 45     padding-top: 7px;
 46     width: 122px;
 47     padding-left: 11px;
 48 }
 49 .t-goods {
 50     width: 400px;
 51 }
 52 .t-price {
 53     width: 120px;
 54     padding-right: 40px;
 55     text-align: right;
 56 }
 57 .t-num {
 58     width: 150px;
 59     text-align: center;
 60 }
 61 .t-sum {
 62     width: 100px;
 63     text-align: right;
 64 }
 65 .t-action {
 66     width: 130px;
 67     text-align: right;
 68 }
 69 .cart-item {
 70     height: 160px;
 71     border-style: solid;
 72     border-width: 2px 1px 1px;
 73     border-color: #aaa #f1f1f1 #f1f1f1;
 74     background: #fff;
 75     padding-top: 14px;
 76     margin: 15px 0;
 77 }
 78 .check-cart-item {
 79     background: #fff4e8;
 80 }
 81 .p-checkbox {
 82     width: 50px;
 83 }
 84 .p-goods {
 85     margin-top: 8px;
 86     width: 565px;
 87 }
 88 .p-img {
 89     float: left;
 90     border: 1px solid #ccc;
 91     padding: 5px;
 92 }
 93 .p-msg {
 94     float: left;
 95     width: 210px;
 96     margin: 0 10px;
 97 }
 98 .p-price {
 99     width: 110px;
100 }
101 .quantity-form {
102     width: 80px;
103     height: 22px;
104 }
105 .p-num {
106     width: 170px;
107 }
108 .decrement,
109 .increment {
110     float: left;
111     border: 1px solid #cacbcb;
112     height: 18px;
113     line-height: 18px;
114     padding: 1px 0;
115     width: 16px;
116     text-align: center;
117     color: #666;
118     background: #fff;
119     margin-left: -1px;
120 }
121 .itxt {
122     float: left;
123     border: 1px solid #cacbcb;
124     width: 42px;
125     height: 18px;
126     line-height: 18px;
127     text-align: center;
128     padding: 1px;
129     margin-left: -1px;
130     font-size: 12px;
131     font-family: verdana;
132     color: #333;
133     -webkit-appearance: none;
134 }
135 .p-sum {
136     font-weight: 700;
137     width: 145px;
138 }
139 .cart-floatbar {
140     height: 50px;
141     border: 1px solid #f0f0f0;
142     background: #fff;
143     position: relative;
144     margin-bottom: 50px;
145     line-height: 50px;
146 }
147 .select-all {
148     float: left;
149     height: 18px;
150     line-height: 18px;
151     padding: 16px 0 16px 9px;
152     white-space: nowrap;
153 }
154 .select-all input {
155     vertical-align: middle;
156     display: inline-block;
157     margin-right: 5px;
158 }
159 .operation {
160     float: left;
161     width: 200px;
162     margin-left: 40px;
163 }
164 .clear-all {
165     font-weight: 700;
166     margin: 0 20px;
167 }
168 .toolbar-right {
169     float: right;
170 }
171 .amount-sum {
172     float: left;
173 }
174 .amount-sum em {
175     font-weight: 700;
176     color: #E2231A;
177     padding: 0 3px;
178 }
179 .price-sum {
180     float: left;
181     margin: 0 15px;
182 }
183 .price-sum em {
184     font-size: 16px;
185     color: #E2231A;
186     font-weight: 700;
187 }
188 .btn-area {
189     font-weight: 700;
190     width: 94px;
191     height: 52px;
192     line-height: 52px;
193     color: #fff;
194     text-align: center;
195     font-size: 18px;
196     font-family: "Microsoft YaHei";
197     background: #e54346;
198     overflow: hidden;
199 }
car.css

 

Specific function implementation:

1. Make the small check box button the same as the full selection button when the full selection button changes.

When the Select All button is selected, change the background color of all items, otherwise remove the background color. Also change the number and total of items selected

 1 $(".checkall").change(function() {
 2     // Keep the small check box button and the selected button identical when the full selection button changes (implicit iteration, no looping required)
 3     $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
 4     getSum();   // Calculated Total Function
 5     // Add Background
 6     // To determine if it is selected, add if it is check-cart-item Class, remove without
 7     if($(this).prop("checked")) {
 8         $(".cart-item").addClass("check-cart-item");
 9     } else {
10         $(".cart-item").removeClass("check-cart-item");
11     }
12 })

2. When the small check box buttons change, determine if all the small buttons are checked. If yes, make the full check buttons checked, otherwise they are not checked.

Determine if the number of checkboxes selected is equal to the total number of all small checkboxes, and also change the background color and the total module

 1 $(".j-checkbox").change(function() {
 2     if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
 3         $(".checkall").prop("checked", true);
 4     } else {
 5         $(".checkall").prop("checked", false);
 6     }
 7     getSum();
 8     // Change the background color when the small check box is selected (add check-cart-item Class)
 9     if($(this).prop("checked")) {
10         $(this).parents(".cart-item").addClass("check-cart-item");
11     } else {
12         $(this).parents(".cart-item").removeClass("check-cart-item");
13     }
14 })

3. Users can modify the quantity of goods by clicking on the plus or minus sign or by modifying the text box directly. The subtotals at the back also change accordingly.

1 Click + button, text box number plus one, subtotal plus price.

Get the original quantity first, then add it to the text box again and again; get the unit price, multiply the number of text boxes is the subtotal

 1 $(".increment").click(function() {
 2     var n = $(this).siblings(".itxt").val();
 3     n++;
 4     $(this).siblings(".itxt").val(n);
 5     // Subtotal module
 6     // num To get the unit price, use substr()Intercept the string to put the¥Remove
 7     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
 8     // toFixed(2)Keep two decimal places
 9     var price = (num * n).toFixed(2);
10     $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
11     getSum();
12 })

(2) Tap-button, subtract the text box number by one, subtract the price.

The specific method is the same as the above, but one difference is that the quantity of goods cannot be less than 1, so we should make a judgement.

 1 $(".decrement").click(function() {
 2     var n = $(this).siblings(".itxt").val();
 3     n <= 1 ? n : n--;
 4     $(this).siblings(".itxt").val(n);
 5     // Subtotal module
 6     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
 7     // toFixed(2)Keep two decimal places
 8     var price = (num * n).toFixed(2);
 9     $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
10     getSum();
11 })

(3) Number of direct text box changes

1 $(".itxt").change(function() {
2     var n = $(this).val();
3     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
4     // toFixed(2)Keep two decimal places
5     var price = (num * n).toFixed(2);
6     $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
7     getSum();
8 })

4. Calculate the number and total amount of the selected goods.Encapsulate into a function that should be called once the page is loaded to update the data

Declare variables to store the number and total of selected items, and iterate through the selected items with each().

 1 function getSum() {
 2     var count = 0;
 3     var money = 0;
 4     // Traverse only selected items   each Traverse, i For index, ele As an object
 5     $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
 6         count += parseInt($(ele).val());   // There will be a slight error, to rectify
 7     })
 8     $(".amount-sum em").text(count);
 9     $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
10         money += parseFloat($(ele).text().substr(1));
11     })
12     $(".price-sum em").text("¥" + money.toFixed(2));
13 }

5. Delete module

 1 // Delete Individual Goods
 2 $(".p-action a").click(function() {
 3     $(this).parents(".cart-item").remove();
 4     getSum();
 5 })
 6 // Delete selected items
 7 $(".remove-batch").click(function() {
 8     $(".j-checkbox:checked").parents(".cart-item").remove();
 9     getSum();
10 })
11 // Clean up the shopping cart
12 $(".clear-all").click(function() {
13     $(".cart-item").remove();
14     getSum();
15 })

 

Full JS code:

 1 $(function() {
 2     $(".checkall").change(function() {
 3         // Keep the small check box button and the selected button identical when the full selection button changes (implicit iteration, no looping required)
 4         $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
 5         getSum();   // Calculated Total Function
 6         // Add Background
 7         // To determine if it is selected, add if it is check-cart-item Class, remove without
 8         if($(this).prop("checked")) {
 9             $(".cart-item").addClass("check-cart-item");
10         } else {
11             $(".cart-item").removeClass("check-cart-item");
12         }
13     })
14     $(".j-checkbox").change(function() {
15         if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
16             $(".checkall").prop("checked", true);
17         } else {
18             $(".checkall").prop("checked", false);
19         }
20         getSum();
21         // Change the background color when the small check box is selected (add check-cart-item Class)
22         if($(this).prop("checked")) {
23             $(this).parents(".cart-item").addClass("check-cart-item");
24         } else {
25             $(this).parents(".cart-item").removeClass("check-cart-item");
26         }
27     })
28 
29     // click+Button, Text Box Number Plus One
30     $(".increment").click(function() {
31         var n = $(this).siblings(".itxt").val();
32         n++;
33         $(this).siblings(".itxt").val(n);
34         // Subtotal module
35         // num To get the unit price, use substr()Intercept the string to put the¥Remove
36         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
37         // toFixed(2)Keep two decimal places
38         var price = (num * n).toFixed(2);
39         $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
40         getSum();
41     })
42     // click-Button, text box number minus one
43     $(".decrement").click(function() {
44         var n = $(this).siblings(".itxt").val();
45         n <= 1 ? n : n--;
46         $(this).siblings(".itxt").val(n);
47         // Subtotal module
48         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
49         // toFixed(2)Keep two decimal places
50         var price = (num * n).toFixed(2);
51         $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
52         getSum();
53     })
54     // When the user directly modifies the text box
55     $(".itxt").change(function() {
56         var n = $(this).val();
57         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
58         // toFixed(2)Keep two decimal places
59         var price = (num * n).toFixed(2);
60         $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
61         getSum();
62     })
63 
64     // Calculated Total Function
65     getSum();
66     function getSum() {
67         var count = 0;
68         var money = 0;
69         // Traverse only selected items   each Traverse, i For index, ele As an object
70         $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
71             count += parseInt($(ele).val());   // There will be a slight error, to rectify
72         })
73         $(".amount-sum em").text(count);
74         $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
75             money += parseFloat($(ele).text().substr(1));
76         })
77         $(".price-sum em").text("¥" + money.toFixed(2));
78     }
79 
80     // Delete commodity module
81     // Delete Individual Goods
82     $(".p-action a").click(function() {
83         $(this).parents(".cart-item").remove();
84         getSum();
85     })
86     // Delete selected items
87     $(".remove-batch").click(function() {
88         $(".j-checkbox:checked").parents(".cart-item").remove();
89         getSum();
90     })
91     // Clean up the shopping cart
92     $(".clear-all").click(function() {
93         $(".cart-item").remove();
94         getSum();
95     })
96 })

Tags: Javascript JQuery Steam less

Posted on Sat, 07 Dec 2019 00:50:09 -0800 by blackbeard