ShoppingCart.js

[Pieter Jansens]

I could really use some help with the js of my shoppingcart.
Everything works great for a single item, I'm able to do everything on it and it's saved in the sessionstorage, when I leave the page to select an other beer, I'm able to do that too. I see it being add to the cart, but the previous beer isn't displayed in the shoppincartform anymore (it's still in sessionstorage though, de nr of items in cart is correct), when I open the shoppingform, the new item is added, but I can't change the quantity etc, so the eventcallers don't work anymore (I add them for each row, when I create the row)

import {byId, getPrice, getName, getAlcohol, openForm, closeForm, getBierIdFromUrl} from "./util.js";

let cart = loadCart()
let rowCounter = cart.length
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    addEventListeners()
    if (cart !== null) {
        alert(JSON.stringify(cart))
        addCartToForm()
    }

}

function addEventListeners() {
    addEventListenerOpenForm()
    addEventListenerCloseForm()
    addEventListenerAddBttns()
    addEventListenerEmptyCartBttn()
    addEventListenerBuy()
    addEventListenerQuantity()
    addEventListenerRemoveBttns()
}

function addEventListenerOpenForm() {
    byId("openCartBttn").addEventListener('click', openForm)
}

function addEventListenerCloseForm() {
    byId("closeBttn").addEventListener('click', closeForm)
}


function addEventListenerAddBttns() {
    byId("add").addEventListener('click', addToCartClicked)
}

function addToCartClicked(e) {
    addItem(getName(), getAlcohol(), getPrice())
}

function addItem(naam, alcohol, prijs) {
    let table = byId('shoppingTable')
    if (isInCart(table, naam)) {
        alert("Uw hebt " + naam + " al in uw karretje\nWil u meerdere bakken bestellen? Verhoog dan de quantity")
    } else {
        let counter = 0
        const order = new Item(naam, alcohol, prijs, 1)
        for (let item in cart) {
            if (item === null) {

                callUpdates(cart, order)
                counter++;
                return
            }
            if (item.name === naam) {
                cart[counter].count += 1;
                something(cart)
                counter++;
                return
            }
            counter++;
        }
        callUpdates(cart, order)
    }
}

export function addCartToForm(){
    for (const item in cart){
        addRowToCart(item)
    }
    something(cart)
}

function addRowToCart(item) {
    const tr = byId("shoppingTable").insertRow();
    tr.insertCell().innerText = item.name
    tr.insertCell().innerText = item.alcohol + "%"
    tr.insertCell().innerText = item.price + "€"
    tr.insertCell().innerHTML = '<input className="cart-quantity-input" type="number" value="'+ item.count +'" id="quantityCart' + rowCounter + '">'
    tr.insertCell().innerHTML = '<button className="btn btn-danger" type="button" style="color: red" id="removeRow'
        + rowCounter + '">X</button>';
    addEventListenerBuy()
    addEventListenerQuantity()
    addEventListenerRemoveBttns()
    rowCounter++
}

function something(cart){
    updateInCart()
    updateTotal()
    saveCart(cart)
}

function callUpdates(cart, item){
    cart.push(item)
    addRowToCart(item)
    something(cart)
}

function isInCart(shoppingTable, naam) {
    if (naam != null) {
        return shoppingTable.textContent.includes(naam);
    }

}

function updateTotal() {
    let total = 0

    for (let i = 0; i < rowCounter; i++) {
        if (byId('quantityCart' + i) != null) {
            let price = getPrice();
            let quantity = byId('quantityCart' + i).value;
            total += parseFloat(price) * quantity
        } else {
            total = 0
            cart = []
        }
    }
    document.getElementsByClassName("cart-total-price")[0].innerText = (Math.round(total * 100) / 100)
        .toFixed(2) + '€'
    updateInCart()
}

function updateInCart() {
    let count = 0
    for (let i = 0; i < rowCounter; i++) {
        count += parseInt(cart[i].count)
    }

    let countString = '' + count
    if (count >= 1 && countString.length > 1) {
        countString = countString.slice(1)
    }
    byId('count').innerText = countString

}

function addEventListenerQuantity() {
    byId('quantityCart' + rowCounter).addEventListener('change', quantityChanged)
}

function quantityChanged(event) {
    let item = event.target
    if (item.value <= 0 || isNaN(item.value)) {
        item.value = 1
    }
    cart[rowCounter - 1].count = item.value
    saveCart(cart)
    updateTotal();
}

function addEventListenerRemoveBttns() {
    const dangerBttn = byId('removeRow' + rowCounter)
    dangerBttn.addEventListener('click', removeItem)
}

function removeItem(event) {
    let buttonClicked = event.target
    buttonClicked.closest("tr").remove()
    updateTotal()
    updateInCart()
    rowCounter--
}

function addEventListenerBuy() {
    byId('buy').addEventListener('click', buyButtonClicked)
}

function buyButtonClicked() {
    const form = byId("checkoutDiv")
    if (byId('shoppingTable').hasChildNodes()) {
        closeForm()
        form.style.display = "block";
        form.addEventListener('submit', ev => {
            ev.preventDefault()
            checkout()
        })
    } else {
        alert("Er zit niets in uw karretje")
    }
}

function emptyCart() {
    const items = byId('shoppingTable');
    while (items.hasChildNodes()) {
        items.removeChild(items.firstChild)
        rowCounter--
    }
    updateTotal()
    byId('count').innerText = ""
    saveCart([])
}

function addEventListenerEmptyCartBttn() {
    byId('clear-cart').addEventListener('click', emptyCart)
}

function Item(name, alcohol, price, count) {
    this.name = name;
    this.alcohol = alcohol;
    this.price = price;
    this.count = count;
}


function saveCart(cart) {
    sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
}


function loadCart() {
    if(sessionStorage.getItem('shoppingCart') !== null){
        return JSON.parse(sessionStorage.getItem('shoppingCart'));
    }else{
        saveCart([])
        return []
    }
}


function updateRowCounter() {
    sessionStorage.setItem('rowCounter', '' + rowCounter);
}

export async function checkout() {
    const name = byId('fullname')
    const street = byId('street')
    const huisnr = byId('huisnr')
    const zip = byId('zip')
    const city = byId('city')
    const bestelling = {
        id: 0,
        bierId: getBierIdFromUrl(),
        naam: name.value,
        straat: street.value,
        huisnummer: huisnr.value,
        postcode: zip.value,
        gemeente: city.value,
        hoeveelheid: cart[rowCounter - 1].count

    };
    alert(JSON.stringify(bestelling))
    const response = await fetch("/bestellingen",
        {
            method: "POST",
            headers: {'Content-Type': "application/json"},
            body: JSON.stringify(bestelling)
        });
    if (response.ok) {
const getBestelId = await fetch('/bestellingen/count')
        if(getBestelId.ok){
            alert(getBestelId.json())
        }
        const getBier = await fetch(window.location.href)
        if (getBier.ok){
            let bier = getBier.json()
            bier.besteld = bestelling.count
            const updateBierBesteld = await fetch("bieren", {
                method: "PUT",
                headers: {'Content-Type': "application/json"},
                body: JSON.stringify(bier)
            })
            if (updateBierBesteld.ok){
                name.value = ""
                street.value = ""
                huisnr.value = ""
                zip.value = ""
                city.value = ""
                emptyCart()
                alert("Bedankt voor uw bestelling")
                byId('checkoutDiv').style.display = 'none'
                window.location = "index.html";
            }
        }
    } else {
        alert('Er ging iets mis')
    }
}

[Al Hobbs]

Have you tried debugging it?

[Pieter Jansens]

This is kind of a duplicate of pmy other post and is kind of resolved