How to avoid product duplicates in shopping cart

问题

I'm building an eCommerce project but I'm struggling to avoid duplicates showing on the cart side drawer. Ideally, if a user adds a new product that exists in the cart, I want to increment the quantity instead of listing a new html element. I'm using OOP for this project. See below result in UI.

Please see code below:

HTML

    <!-- Cart Drawer -->
            <div class="cart-drawer" id="side-cart">
                <div class="cart-inner">
                    <button
                        type="button"
                        id="cart-drawer-close"
                        class="cart-drawer-close"
                    >
                        <i class="far fa-window-close"></i>
                    </button>
                    <div class="cart-drawer-title">CART</div>
                    <div id="cart-items-hook"></div>
                </div>
                <div class="cart-footer">
                    <div class="total-display-side-cart">
                        <h3>total</h3>
                        <span>0</span>
                    </div>
                    <button class="checkout-drawer">checkout</button>
                </div>
            </div>

javascript

class SideCartDrawer {
    cartProducts = [];

    constructor() {
        this.cartElTemplateAccess = document.getElementById('item-cart-template');
    }

    addProduct(product) {
        const cartProduct = this.cartProducts.find(
            (item) => item.id === product.id
        );
        if (cartProduct) {
            cartProduct.qty++;
        } else {
            product.qty = 1;
            const updatedItems = [...this.cartProducts];
            updatedItems.push(product);

            this.cartProducts = updatedItems;
            console.log(this.cartProducts);
        }
        const productTemplateEl = document.importNode(
            this.cartElTemplateAccess.content,
            true
        );
        const cartEl = productTemplateEl.querySelector('.cart-item');
        this.cartProducts.forEach((prod) => {
            cartEl.querySelector('h3').textContent = prod.productName;
            cartEl.querySelector('p').textContent = prod.price;
            cartEl.querySelector('span').textContent = prod.qty;
        });
        document.getElementById('cart-items-list').append(cartEl);
    }

    renderCart() {
        let cartEl = document.createElement('section');
        cartEl.id = 'cart-items-list';
        cartEl.innerHTML = '<h2>Cart is Empty<h2>';
        this.currentHTML = cartEl.querySelector('h2');
        return cartEl;
    }
}

//Single product rendering

class SingleProductRendering extends SideCartDrawer {
    constructor(productDetails) {
        super();
        this.product = productDetails;
        this.productElementTemplate = document.getElementById('item-main-template');
    }

    addProductToCart = (product) => {
        console.log(this.product);
        this.addProduct(product);
    };

    render() {
        const productTemplateEl = document.importNode(
            this.productElementTemplate.content,
            true
        );
        const productEl = productTemplateEl.querySelector('.single-product');
        productEl.id = this.product.id;
        productEl.querySelector('img').src = this.product.productImgURL;
        productEl.querySelector('h2').textContent = this.product.productName;

        const btn = productEl.querySelector('button');
        btn.addEventListener('click', () => {
            this.addProductToCart(this.product);
        });

        return productEl;
    }
}

//Product List Rendering

class ProductList {
    constructor() {
        this.fetchProducts();
    }

    fetchProducts() {
        this.products = products;
    }

    render() {
        const productListEl = document.createElement('section');
        productListEl.className = 'products-holder';
        productListEl.id = 'product-holder';
        for (let product of this.products) {
            const productEl = new SingleProductRendering(product);
            const productElRendered = productEl.render();
            productListEl.append(productElRendered);
        }

        return productListEl;
    }
}

//shop API - assemble

class Shop {
    render() {
        const renderHookProductList = document.getElementById('app');
        const cartHook = document.getElementById('cart-items-hook');
        const productList = new ProductList();
        const productListRendered = productList.render();
        renderHookProductList.append(productListRendered);

        const cartItemDrawer = new SideCartDrawer();
        const cartDrawer = cartItemDrawer.renderCart();
        cartHook.append(cartDrawer);
    }
}

const shop = new Shop();
shop.render();

The new HTML gets added upon click and I'm extending the sidedrawer to the single product rendering because I want to have access to the sidedrawer methods. Any idea why this is happening?

来源：https://stackoverflow.com/questions/65196894/how-to-avoid-product-duplicates-in-shopping-cart