jQuery implements all shopping cart functions

1. Select All
2. Increase or decrease the quantity of goods
3. Modify the product subtotal
4. Calculate totals and sums
5. Delete Products
6. Add background to selected products
7. All core codes of html

Today we will implement some basic functions of the shopping cart, including全選,增減商品數量,修改商品小計,計算總計和總和,刪除商品,選中添加背景顏色, and other common functions.

All the codes of the html structure are at the end of the article, those who understand will understand! ! !

1. Select All

Select All Analysis:
Select all ideas: The selected state (checked) of the three small checkbox buttons (j-checkbox) inside follows the select all button (checkall).
Because checked is an inherent property of the check box, we need to use the prop() method to get and set this property.
Just assign the select all button state to the three small check boxes.
Every time we click the small checkbox button, we judge:
If the number of small check boxes selected is equal to 3, the Select All button should be selected, otherwise the Select All button should not be selected.
:checked Selector:checked Finds form elements that are checked.

The above is a basic function demonstration that we want to achieve. Next, let’s write about it in the case study.

// Select all $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
    });
 
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

2. Increase or decrease the quantity of goods

Analysis of increase and decrease in the quantity of goods:
Core idea: First declare a variable. When we click the + sign (increment), let the value ++ and then assign it to the text box.
Note 1: You can only increase the quantity of this product, which is the value of the brother text box (itxt) of the current + sign.
Modify the value of the form is the val() method
Note 2: The initial value of this variable should be the value of this text box, and ++ is added based on this value. To get the value of the form
The idea of minus sign (decrement) is the same, but if the value of the text box is 1, it cannot be subtracted.

Click the plus sign to increase the quantity, click the minus sign to decrease the quantity. This is a basic implementation of the addition and subtraction functions,最少大于等于一件商品!

Give the plus sign and minus sign a click event respectively, then get the value in the form, and use a variable to increase and decrease to change the value inside.

    // Quantity plus $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
    })
    // Quantity reduction$(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
    });

3. Modify the product subtotal

Modify product subtotal analysis:
Core idea: Each time you click the + or - sign, the subtotal of the product is calculated by multiplying the value in the text box by the price of the current product.
Note 1: You can only increase the subtotal of this product, which is the subtotal module of the current product (p-sum)
Modifying the content of a normal element is the text() method
Note 2: To get the current price of the product, remove the ￥ sign and then multiply to extract the string substr(1)
parents('selector') can return the specified ancestor element
If you want to retain 2 decimal places in the final calculation result, use the toFixed(2) method
Users can also directly modify the values in the form and calculate the subtotals. Use the form change event
Multiply the latest value in the form by the unit price, but it is still the subtotal of the current product.

Because the value in the subtotal is modified by clicking the plus or minus sign, the code here should be written in the click event of the plus or minus sign. After clicking this event, take out the value in the unit price and multiply it by the value in the quantity to get the total price. Here is the basic implementation process draft of the overall code.

    // Quantity plus $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
 
        // Modify product subtotal var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + price);
        getSum();
    })
    // Quantity reduction$(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // Modify product subtotal var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + price);
        getSum();
    });

4. Calculate totals and sums

Calculate totals and sums for analysis:
Core idea: Add up the values in all text boxes to get the total quantity. The same applies to the total amount
The values in the text boxes are different. If you want to add them together, you need to use each traversal. Declare a variable and add it
Clicking the + and - signs will change the total and amount. If the user modifies the value in the text box, the total and amount will also change.
Therefore, you can encapsulate a function to calculate the total and amount, and call this function for the above two operations.
Note 1: The total is the sum of the values in the text box using val() The total is the content of the ordinary element using text()
Please note that the contents of common elements must remove the ￥ and be converted to digital type before they can be added.

The essence should be to select the checkbox, then the product will be counted in the settlement column. Here I write the sum of the quantity and subtotal in the shopping cart, so the subtotal will also change as the quantity changes, which will correspondingly affect the data in the settlement column.

    // Encapsulate the number and price of settled goods getSum();
    function getSum() {
        var count = 0;
        var money = 0;
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
 
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1))
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

5. Delete Products

Delete product module analysis:
Core idea: just delete the element by using remove()
There are three places to delete: 1. Delete button behind the product 2. Delete the selected product 3. Clear the shopping cart
The delete button behind the product: It must delete the current product, so it starts from $(this)
Delete the selected product: First determine whether the small check box button is selected. If it is selected, delete the corresponding product.
Clean up the shopping cart: Delete all the items.

Click刪除behind a product to delete it, click刪除選中的商品below to delete the products selected in the checkbox, and清理購物車alone to delete all products in the shopping cart.

    // Delete // Delete the item behind $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // Delete the selected products$(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    // Clear the shopping cart $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })

6. Add background to selected products

Select the product to add background analysis:
Core idea: Add background to selected products, remove background if unselected
Select All button click: If Select All is selected, all products will have backgrounds added, otherwise backgrounds will be removed
Click the small checkbox: If it is selected, the background is added to the current product, otherwise the background is removed
This background can be modified by class name, adding classes and deleting classes

The background color is added when it is selected, so the code here should be written in the event of the check box changing.

    // Select all $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
        // Add background color to the product if ($(this).prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
 
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // Add background color to the product if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

7. All core codes of html

<div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>All Products</em>
            </div>
            <!-- Shopping cart main core area -->
            <div class="cart-warp">
                <!-- Header Select All Module -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> Select All</div>
                    <div class="t-goods">Goods</div>
                    <div class="t-price">Unit price</div>
                    <div class="t-num">Quantity</div>
                    <div class="t-sum">Subtotal</div>
                    <div class="t-action">Action</div>
                </div>
                <!-- Product details module-->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5 books for 26.8 yuan】Classic children's literature color illustration youth version of Around the World in Eighty Days middle school students' Chinese teaching syllabus</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Delete</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">[2000 stickers] Sticker book 3-6 years old stickers children sticker book complete set of 12 books stickers children's car</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Delete</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">Three Hundred Tang Poems + Idiom Stories (2 Volumes) First Grade Extracurricular Books Hardcover Phonetic Notation Children's Edition Second and Third Grade Extracurricular Reading Books for Primary School Students</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Delete</a></div>
                    </div>
                </div>
 
                <!-- Settlement Module-->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">Select All</div>
                    <div class="operation">
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove-batch"> Delete selected products</a>
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="clear-all">Clear shopping cart</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum"><em>1</em> item has been selected</div>
                        <div class="price-sum">Total price: <em>￥12.60</em></div>
                        <div class="btn-area">Go to checkout</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>

The above is an example of how to use jQuery to implement all shopping cart functions. I hope it will be helpful to you. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

You may also be interested in:

jQuery realizes the full function of shopping cart
Implementing a shopping cart using jQuery
jQuery implements the basic functions of the shopping cart
jQuery implements the total price calculation and total price transfer function of the shopping cart

<<: CSS sets the box container (div) height to always be 100%

>>: A detailed explanation of the subtle differences between Readonly and Disabled