Vue.js 로 쇼핑 카트 만들기 | 전자 상거래 개발

소개

이 프로젝트에서는 Vue.js 2.x 를 사용하여 쇼핑 카트 기능을 구축하는 방법을 배우게 됩니다. 쇼핑 카트는 전자 상거래 웹사이트에서 사용자가 구매하기 전에 선택한 제품을 관리할 수 있도록 하는 필수 기능입니다.

👀 미리보기

쇼핑 카트 기능 데모

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

addToCart 메서드를 수정하여 쇼핑 카트에 제품을 추가하는 방법
removeGoods 메서드를 개선하여 쇼핑 카트에서 제품을 제거하는 방법
전반적인 쇼핑 카트 기능 테스트 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

Vue.js 애플리케이션에서 쇼핑 카트의 상태를 관리할 수 있습니다.
쇼핑 카트에서 제품의 추가 및 제거를 처리할 수 있습니다.
쇼핑 카트의 변경 사항에 따라 사용자 인터페이스를 업데이트할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
│   └── index.css
├── images
│   ├── 1.png
│   └── 2.png
├── js
│   ├── goods.js
│   └── vue.js
└── index.html

여기서:

css/index.css는 스타일 파일입니다.
images는 이미지 폴더입니다.
js/goods.js는 데이터 파일입니다.
js/vue.js는 Vue 2.x 파일입니다.
index.html은 페이지 레이아웃 및 로직입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

현재 발생하는 문제는 다음과 같습니다.

"제품 목록"에서 "장바구니에 추가" 버튼을 N 번 클릭하면, 제품이 초기 수량 1 로 쇼핑 카트 목록에 N 번 나타납니다.
쇼핑 카트에서 제품 옆의 더하기 ("+") 버튼을 클릭하면, 제품이 초기 수량 1 로 쇼핑 카트 목록에 반복됩니다.
쇼핑 카트에서 제품 옆의 빼기 ("-") 버튼을 클릭하면, 제품이 카트에서 제거되지 않습니다.

addToCart 메서드 수정

이 단계에서는 addToCart 메서드를 수정하여 쇼핑 카트에 제품을 추가하는 방법을 배우게 됩니다.

index.html 파일을 엽니다.
Vue 인스턴스에서 addToCart 메서드를 찾습니다.
다음 요구 사항을 충족하도록 addToCart 메서드를 수정합니다.
- 제품이 쇼핑 카트에 존재하지 않으면, 제품을 카트의 끝에 추가하고 수량을 1 로 초기화합니다.
- 제품이 이미 쇼핑 카트에 존재하면, 단순히 수량을 1 증가시킵니다.

수정된 addToCart 메서드는 다음과 같아야 합니다.

addToCart(goods) {
  // TODO: 쇼핑 카트가 제품 추가 요구 사항을 실현하도록 현재 함수를 수정합니다.

  let exit = 0;
  this.cartList.forEach(item => {
    if (goods.id == item.id) {
      item.num++
      exit = 1
    }
  });
  if (!exit) {
    goods.num = 1;
    this.cartList.push(goods);
    this.cartList = JSON.parse(JSON.stringify(this.cartList));
  }
},

index.html 파일을 저장합니다.

removeGoods 메서드 개선

이 단계에서는 쇼핑 카트에서 제품을 제거하기 위해 removeGoods 메서드를 개선하는 방법을 배우게 됩니다.

index.html 파일을 엽니다.
Vue 인스턴스에서 removeGoods 메서드를 찾습니다.
다음 요구 사항을 충족하도록 removeGoods 메서드를 개선합니다.
- 쇼핑 카트에서 제품 옆의 빼기 ("-") 버튼을 클릭하면 수량을 1 감소시킵니다.
- 결과 수량이 0 이면, 쇼핑 카트에서 제품을 제거합니다.

removeGoods 메서드는 다음과 같아야 합니다.

removeGoods(goods) {
  // TODO
  this.cartList.forEach((item, index, arr) => {
    if (goods.id == item.id) {
      item.num--
    }
    if (item.num == 0) {
      arr.splice(index, 1)
    }
  });
}

index.html 파일을 저장합니다.

장바구니 기능 테스트

브라우저에서 페이지를 새로 고칩니다.
"Add to cart" 버튼이 올바르게 작동하는지 확인합니다.
- 제품이 쇼핑 카트에 존재하지 않으면, 수량 1 로 추가되어야 합니다.
- 제품이 이미 쇼핑 카트에 존재하면, 수량이 1 증가해야 합니다.
쇼핑 카트의 "+" 및 "-" 버튼이 올바르게 작동하는지 확인합니다.
- "+" 버튼을 클릭하면 제품의 수량이 1 증가해야 합니다.
- "-" 버튼을 클릭하면 제품의 수량이 1 감소해야 합니다.
- 수량이 0 이 되면, 제품이 쇼핑 카트에서 제거되어야 합니다.

최종 구현 효과는 다음과 같습니다.

Image Description

축하합니다! 쇼핑 카트 프로젝트를 성공적으로 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

Vue.js 쇼핑 카트 구축

소개