e-commerce page using tailwindCSS and javascript

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 5 months ago

  Hi, great work with this project.

  Just a few pointers:

  • I'd recommend representing the product as an array of objects rather than nested objects. This is because a typical API will use this pattern.

    Rather than this

    const products = {
        1: {
             name: "Fall Limited Edition Sneakers",
             price: 125.0,
             image: "images/image-product-1.jpg",
        },
    };
    

    Like this

    const products = [    {        id: 1,        name: "Fall Limited Edition Sneakers",        price: 125.0,        image: "images/image-product-1.jpg",    }];
    

    You'll have an easier time searching and filtering this way in the future.

  • When you click the "Add to cart" button, only 1 product is added to the cart regardless of how many are selected using the above selector. I've gone into your source code and got to the bottom of it. You're incrementing the quantity by 1 in the addToCart method. To fix this try:

    function addToCart(key) {
        if (listCards[key] == null) {
            listCards[key] = {
                ...products[key],
                quantity: +quantityElement.textContent,
            };
        } else {
            listCards[key].quantity += +quantityElement.textContent;
        }
    }
    

  Hope this helps. Keep up the good work ☺️

  Marked as helpful

  0

  ---

  

  Godbrand0•70

  @Godbrand0Posted 5 months ago

  hello, thanks for the feedback. your solutions to the bugs was really straight forward, the number increment was a hard nut to crack for me. thanks for your help on my web dev journey. @jakegodsall

  0