JavaScript Vanilla Shopping Cart Please Help

JavaScript
1

Cannot read properties of undefined (reading ‘inCart’ )

Getting Error on the Add and Subtract Buttons in Shopping Cart

Same error triggers on the Clear Product button also

Error on Lines 208 237 and 257

I used the Microsoft Visual Studio Code application to write the code.
Any help is appreciated…

javascript code

let carts = document.querySelectorAll('.btn');

let products = [ 
    {   
        name: "Camouflage Crossbody Bag",
        tag: "btn 1", 
        tag:"PhotoRoom_013_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Storm Trooper Crossbody Bag",
        tag: "btn 2",
        tag:"PhotoRoom_016_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Gamer Crossbody Bag",
        tag: "btn 3",
        tag:"PhotoRoom_015_20220219_091616",
        price: 30.00,
        inCart: 0
    },
    {
        name: "Care Bear Scrunchie Set 2pcs",
        tag: "btn 4",
        tag:"PhotoRoom_011_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Gamer Scrunchie Set 2pcs",
        tag: "btn 5",
        tag:"PhotoRoom_005_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Mustache Scrunchie Set 2pcs",
        tag: "btn 6",
        tag:"PhotoRoom_006_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Black & White Scrunchie Set 2pcs",
        tag: "btn 7",
        tag:"PhotoRoom_009_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Pastel Rainbow Scrunchie Set 2pcs",
        tag: "btn 8",
        tag:"PhotoRoom_001_20220219_091616",
        price: 10.00,
        inCart: 0
    },
    {
        name: "Floral Scrunchie Set 2pcs",
        tag: "btn 9",
        tag:"PhotoRoom_20220219_091914",
        price: 10.00,
        inCart: 0
    },
];

for (let i=0; i < carts.length; i++) {
    carts[i].addEventListener('click', () => {
        cartNumbers(products[i]);
        totalCost(products[i])
    })
}

function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');

    if(productNumbers) {
        document.querySelector('.cart span').textContent = productNumbers;
    }
}

function cartNumbers(product, action) {
    let productNumbers = localStorage.getItem('cartNumbers');
    productNumbers = parseInt(productNumbers);

    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if( action == "decrease") {
        localStorage.setItem('cartNumbers', productNumbers - 1);
        document.querySelector('.cart span').textContent = productNumbers - 1;
    } else if( productNumbers ) {
        localStorage.setItem("cartNumbers", productNumbers + 1 );
        document.querySelector('.cart span').textContent = productNumbers + 1;
    } else {
        localStorage.setItem('cartNumbers', 1);
        document.querySelector('.cart span').textContent = 1;
    }

    setItems(product);
}

function setItems(product) {
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if(cartItems != null) {
        if(cartItems[product.tag] == undefined) {
            cartItems = {
                ...cartItems,
                [product.tag]: product
            }
        }
        cartItems[product.tag].inCart += 1; 
    } else {
        product.inCart = 1;
        cartItems = {
            [product.tag]: product
        }
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

function totalCost(product, action) {
    let cartCost = localStorage.getItem('totalCost');
    
    console.log("My cartCost is", cartCost);
    console.log(typeof cartCost );
    if( action == "decrease") {
        cartCost = parseInt(cartCost);

        localStorage.setItem('totalCost',cartCost - product.price);
    } else if(cartCost != null) {
        cartCost = parseInt(cartCost);
        localStorage.setItem("totalCost", cartCost + product.price);
    } else {
        localStorage.setItem("totalCost", product.price);
    }
}

function displayCart() {
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');

    //console.log(cartItems);
    if( cartItems && productContainer ) {
        productContainer.innerHTML = '';
        Object.values(cartItems).map( (item => {
            productContainer.innerHTML += 
            `<div class="product">
            <div>
            <center>
            <ion-icon name="close-circle"></ion-icon>
            </center>
            </div>
            <div>
            <center>
            <img src="./images/${item.tag}.png" /> 
            </center> 
            </div>
            <span>${item.name}</span>
            </div>
            <div class="price sm-hide">$${item.price}.00</div>
            <div class="quantity">
                <ion-icon class="decrease "
                <ion-icon name="remove-outline"></ion-icon>
                <span>${item.inCart}</span>
                <ion-icon class="increase"
                <ion-icon name="add-outline"></ion-icon> 
            </div>
            <div class="total">$${item.inCart * item.price}.00</div>
            `;
        }));   
        
        
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">Cart Total</h4>
                <h4 class="basketTotal">$${cartCost}.00</h4>
            </div>
            `;
        
    }
    
    deleteButtons();
    manageQuantity();
}

function deleteButtons() {
    let deleteButtons = document.querySelectorAll('.product ion-icon');
    let productName;
    let productNumbers = localStorage.getItem('cartNumbers');
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    let cartCost = localStorage.getItem('totalCost');
    


    for(let i=0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', () => {
            productName = deleteButtons[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');
            // console.log(productName);
            //console.log(cartItems[productName].name + " " + cartItems[productName].inCart)
            localStorage.setItem('cartNumbers', productNumbers - cartItems[productName].inCart);

            localStorage.setItem('totalCost', cartCost - ( cartItems[productName].price * cartItems[productName].inCart));

            delete cartItems[productName];
            localStorage.setItem('productsInCart', JSON.stringify(cartItems));

            displayCart();
            onLoadCartNumbers();
        });
    }
}

function manageQuantity() {
    let decreaseButtons = document.querySelectorAll('.decrease');
    let increaseButtons = document.querySelectorAll('.increase');
    let cartItems = localStorage.getItem('productsInCart');
    let currentQuantity = 0;
    let currentProduct = "";
    cartItems = JSON.parse(cartItems);
    console.log(cartItems);

    for(let i=0; i < decreaseButtons.length; i++) {
        decreaseButtons[i].addEventListener('click', () => {
            currentQuantity = decreaseButtons[i].parentElement.querySelector('span').textContent;
            console.log(currentQuantity);
            currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLowerCase().replace(/ /g, '').trim();
            console.log(currentProduct);

            if( cartItems[currentProduct].inCart > 1 ) {
                cartItems[currentProduct].inCart -= 1;
                cartNumbers( cartItems[currentProduct], "decrease" );
                totalCost( cartItems[currentProduct], "decrease" );
                localStorage.setItem('productsInCart', JSON.stringify(cartItems));
                displayCart();
            }
        });
    }

    for(let i=0; i < increaseButtons.length; i++) {
        increaseButtons[i].addEventListener('click', () => {
            console.log("Increase button");
            currentQuantity = increaseButtons[i].parentElement.querySelector('span').textContent;
            console.log(currentQuantity);

            currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLowerCase().replace(/ /g, '').trim();
            console.log(currentProduct);

            
                cartItems[currentProduct].inCart += 1;
                cartNumbers( cartItems[currentProduct]);
                totalCost( cartItems[currentProduct]);
                localStorage.setItem('productsInCart', JSON.stringify(cartItems));
                displayCart();
            
        })      
    }
}

onLoadCartNumbers();
displayCart();

shopping cart code

<!DOCTYPE html>

<body style="background-color:rgb(81, 87, 90);"></body>

<html lang="eng">

    <head>

        <meta charset="UTF-8">

        <title>Cart Details - Online Store</title>

        <link rel="stylesheet" href="style store 3.css">

    </head>

    <body>

        <div class="container">

            <div class="navbar">

                <div class="logo">

                   </div>

                <nav>

                  <ul>

                      <li><a href="index store 3.html">Home</a></li>

                      <li><a href="products 3.html">Products</a></li>

                      <li><a href="contact 3.html">Contact</a></li>

                      <li class="cart details">

                        <a href="cart details.html">

                        <ion-icon name="cart-outline"></ion-icon><span> 0 </span>

                        </a>

                    </li>

                </ul>

            </nav>

        </div>

            </div>      

    </div>

    <div class="row">

        <center>

        <div class="col-2">

              <h1>Shopping Cart</h1>

           <div class="col-2">

        </center>      

        </div>      

</div>

   

<!---------- Cart Item Details ------------->

<div class="container-products">

    <div class="product-header">

        <h5 class="product-title">PRODUCT</h5>

        <h5 class="price sm-hide">PRICE</h5>

        <h5 class="quantity">QUANTITY</h5>

        <h5 class="total">TOTAL</h5>

    </div>

    <div class="products">

    </div>

</div>

         

    <!------- footer ------->

          </div>

        </div>

        <hr>

        <p class="copyright"> Copyright 2022 - My Online Store </p>

         </div>

        <hr/>

     </div>

     <script src="main1.js"></script>

     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

     

    </body>

    </html>

product code

<!DOCTYPE html>

<body style="background-color:rgb(81, 87, 90);"></body>

<html lang="eng">

    <head>

        <meta charset="UTF-8">

        <title>All Products - Online Store</title>

        <link rel="stylesheet" href="style store 3.css">

    </head>

    <body>

        <div class="container">

            <div class="navbar">

                <div class="logo">

                   </div>

                <nav>

                  <ul>

                      <li><a href="index store 3.html">Home</a></li>

                      <li><a href="">Products</a></li>

                      <li><a href="contact 3.html">Contact</a></li>

                      <li class="cart details">

                        <a href="cart details.html">

                        <ion-icon name="cart-outline"></ion-icon><span> 0 </span>

                        </a>

                      </li>

                  </ul>

            </nav>

        </div>

        <div class="row">

            <center>

            <div class="col-2">

                  <h1>All Products</h1>

               <div class="col-2">

            </center>      

            </div>      

    </div>

   

        <div class="small-container">

            <div class="row">

                <div class="col-4">

                    <img src="images/PhotoRoom_013_20220219_091616.png">  

                    <h4>Camouflage Crossbody Bag</h4>

                    <p>$30.00</p>

                    <a href="" class="btn 1">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_016_20220219_091616.png">

                    <h4>Storm Trooper Crossbody Bag</h4>

                    <p>$30.00</p>

                    <a href="" class="btn 2">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_015_20220219_091616.png">

                    <h4>Gamer Crossbody Bag</h4>

                    <p>$30.00</p>

                    <a href="" class="btn 3">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_011_20220219_091616.png">

                    <h4>Care Bear Scrunchie Set 2pcs</h4>

                    <p>$10.00</p>

                    <a href="" class="btn 4">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_005_20220219_091616.png">

                    <h4>Gamer Scrunchie Set 2pcs</h4>

                    <p>$10.00</p>

                    <a href="" class="btn 5">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_006_20220219_091616.png">

                    <h4>Mustache Scrunchie Set 2pcs</h4>

                    <p>$10.00</p>

                    <a href="" class="btn 6">Add To Cart</a>

                </div>

                <div class="col-4">

                    <img src="images/PhotoRoom_009_20220219_091616.png">

                    <h4>Black & White Scrunchie Set 2pcs</h4>

                    <p>$10.00</p>

                    <a href="" class="btn 7">Add To Cart</a>

                </div>

                <div class="col-4">

                   <img src="images/PhotoRoom_001_20220219_091616.png">

                   <h4>Pastel Rainbow Scrunchie Set 2pcs</h4>

                   <p>$10.00</p>

                   <a href="" class="btn 8">Add To Cart</a>

                </div>

                <div class="col-4">

                   <img src="images/PhotoRoom_20220219_091914.png">

                   <h4>Floral Scrunchie Set 2pcs</h4>

                   <p>$10.00</p>

                   <a href="" class="btn 9">Add To Cart</a>

            </div>

    <!------- footer ------->

          </div>

        </div>

        <hr>

        <p class="copyright"> Copyright 2022 - My Online Store </p>

         </div>

        <hr/>

     </div>

     <script src="main1.js"></script>

     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

     

    </body>

    </html>
1 Like
2

What IDE are you running this with, it might help others should they try to debug. :grinning:

3

Please provide all the code including the HTML. A GitHub repo would be nice. Or post it to a live editor site so we have a working example.

What have you done to debug this?

What do cartItems and productName contain in the places you are using them? What do you get when you log out cartItems[productName].

BTW, your products objects contain duplicate keys (tag).

4

I used the Microsoft Visual Studio Code application to write the code.
Any help is appreciated…

5

I have added the other code that is used for the shopping cart.

6

  1. You have errors in the HTML. Validate your HTML and fix the errors.

  2. As I said, log out currentProduct, productName and cartItems on the lines before the error message is giving you. You should be able to spot why you can’t use currentProduct to access cartItems the way you are. You should also be able to see that you are not getting the correct textContent (check your DOM traversal).

You need to log out way more of your variables and check that you are getting and/or accessing what you think you are.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.