簡體   English   中英

購物車不能正常工作

[英]Shopping cart not working properly

購物車代碼:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8" />
    <title>Shopping Cart</title>
    <script src="jquery-3.1.1.min.js"></script>
</head>
<body>
    <h1>Shopping Cart</h1>

    <div>
        <ul>
            <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">Apple $1.22</a></li>
            <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">Banana $1.33 </a></li>
            <li><a class="add-to-cart" href="#" data-name="Shoe" data-price="22.33">Shoe $22.33</a></li>
            <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">Frisbee $5.22</a></li>
        </ul>
        <form>
            <button id="clear-cart">Clear Cart</button>
        </form>
    </div>

    <div>
        <ul id="show-cart">
            <!-- -->
        </ul>
    </div>
    <script>

        $(".add-to-cart").click(function(event) {
            event.preventDefault();
            var name = $(this).attr("data-name");
            var price = Number($(this).attr("data-price"));

            addItemToCart(name, price, 1);
            displayCart();
        });

        function displayCart() {
            console.log("*** Display Cart ***");
            var cartArray = listCart();
            var output = "";
            for (var i in cartArray) {
                output += "<li>"+cartArray[i].name+" "+cartArray[i].count+"</li>"
            }
            $("#show-cart").html(output);
        }

        displayCart();

        // ************************************************************
        // Shopping Cart Functions

        var cart = [];
        var Item = function(name, price, count) {
            this.name = name
            this.price = price
            this.count = count
        };

        function addItemToCart(name, price, count) {
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart[i].count += count;
                    return;
                }
            }
            var item = new Item(name, price, count);
            cart.push(item);
            saveCart();
        }

        function removeItemFromCart(name) { // Removes one item
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart[i].count --;
                    if (cart[i].count === 0) {
                        cart.splice(i, 1);
                    }
                    break;
                }
            }
            saveCart();
        }

        function removeItemFromCartAll(name)  { // Removes all item name 
            for (var i in cart) {
                if (cart[i].name === name) {
                    cart.splice(i, 1);
                    break;
                }
            }
            saveCart();
        }



        function clearCart() {
            cart = [];
            saveCart();
        } 

        function countCart() { // --> return total count 
            var totalCount = 0;
            for (var i in cart) {
                totalCount += cart[i].count;
            }

            return totalCount;
        }

        console.log( countCart() );

        function totalCart() { // --> return total cost 
            var totalCost = 0;
            for (var i in cart) {
                totalCost += cart[i].price;
            }
            return totalCost;
        }

        console.log( totalCart() );

        function listCart() {  // --> array of Items 
            var cartCopy = [];
            for (var i in cart) {
                var item = cart[i];
                var itemCopy = {};
                for (var p in item) {
                    itemCopy[p] = item[p];
                }
                cartCopy.push(itemCopy);
            }
            return cartCopy;
        }

        console.log( listCart() );

        function saveCart() {
            localStorage.setItem("shoppingCart", JSON.stringify(cart));
        }

        function loadCart() {
            cart = JSON.parse(localStorage.getItem("shoppingCart"));  
        }

        loadCart();




        // Shopping Cart Functions (complete)
        // ************************************************************

    </script>

我有這個持久性錯誤,在重新加載時,它不會保存我所做的更改。 所以,例如,我已經訂購了2個價值一些的飛盤(現在沒關系),但是當刷新它,點擊訂購某個產品時,購物車不會保存更改,即使它是假設的至。 我不確定問題出在哪里,所以我把這一切粘在了這里。

當您增加購物車中已有商品的數量時,您永遠不會將商品保存到localstorage。

    function addItemToCart(name, price, count) {
        for (var i in cart) {
            if (cart[i].name === name) {
                cart[i].count += count;
                //need to do this here too.
                saveCart();
                //
                return;
            }
        }
        var item = new Item(name, price, count);
        cart.push(item);
        saveCart();
    }

否則,它只會在添加新項目時將購物車保存到localstorage,因此在此之前,遞增的項目不會保存到存儲中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM