4차 미니프로젝트, 이커머스- 원하는 상품 장바구니에 담기

4차 미니프로젝트, 이커머스- 원하는 상품 장바구니에 담기

---

이번에 이커머스 프로젝트에서 내가 맡은 부분은 장바구니!

 

일단 임의의 값을 상품으로 두고 장바구니 담기 하다보니,

어쩌다가 상품 리스트까지 만들게 되었다.

ejs를 활용해보고 싶으나, 이해하기 영 싶지 않아서 그냥 내가 잘 알고 있는 ajax로 구현중~

 

📄 productList front

function makeProduct(image, info, name, price, productId) {
    let tempHtml = `<a href="#">
                    <img src="${image}">
                    <p>제품명 : ${name}</p>
                    <p>설명 : ${info}</p>
                    <p class="price">${price}원</p>
                    <button onclick="putCart(${productId})" type="button" class="btn btn-primary">장바구니</button>
                    <p class="gap"></p>
                    </a>`;
    $("#products-box").append(tempHtml);
}

productList를 만들때 장바구니 담기 버튼에 productId를 같이 넘겨 줬다.

 

 

장바구니 버튼 productId값 할당

---

BackEnd코드는 수업할때 했어서 참고해서 분석중인데, 파라미터로 값을 넘겨야한다.

이부분이 문제....여러 블로그를 보고 후발대 튜터님 git repo도 참고해 파라미터로 값을 넘기는 걸 확인!

 

📄 html param 값 넘기기

function putCart(productId) {
    $.ajax({
            type: "PUT",
            url: "/cart/" + productId,
            data: {},
            success: function (response) {
                if (response['result'] == 'success') {
                    alert('장바구니 담기 완료!');
                }
            }
        });
}

 

로그인은 다른 조원분이 구현중이라,

일단 장바구니 담기 버튼을 누르면 장바구니에 상품이 담기도록 했다.

상품 보여줄때 수량 입력하는 칸도 있으면 좋겠지만, 추후에 구현하도록하고~

 

📄 param 값 받기

// 장바구니에 상품 담기
router.put('/cart/:productId', async (req, res) => {
    // const { userId } = res.locals.user;
    const { productId } = req.params;

    const existsCart = await Cart.findOne({
        where: {
            // userId,
            productId,
        },
    });

    if(existsCart) {
        existsCart.quantity += 1
        await existsCart.save();
    } else {
        await Cart.create({
            productId : productId,
            quantity : 1,
        })
    }

    res.send({result: 'success'});
})

cart 담기

 

값이 아주 잘 들어간다.

 

이제 productId값을 이용해 장바구니 페이지에

product 정보를 가져와 보여주고(외래키이용).

수량변경, cart에서 해당 상품 삭제, 전체 상품 삭제 할 수 있는 기능을 구현하면 될 것 같다.