Vue.js 를 사용한 드래그 앤 드롭 쇼핑 카트 구현

소개

이 프로젝트에서는 드래그 앤 드롭 기능을 갖춘 온라인 쇼핑 카트를 구현하는 방법을 배우게 됩니다. 이 프로젝트는 Vue.js 의 개념과 웹 브라우저에서 제공하는 드래그 앤 드롭 API 를 이해하고 적용하는 데 도움을 주기 위해 설계되었습니다.

👀 미리보기

Online shopping cart demo

🎯 과제

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

프로젝트를 설정하고 제공된 파일 및 구조에 익숙해지는 방법.
온라인 쇼핑 카트에 대한 드래그 앤 드롭 기능을 구현하여 사용자가 제품을 장바구니에 추가할 수 있도록 하는 방법.
제품 수, 제품 세부 정보 및 총 가격을 포함한 쇼핑 카트 정보를 표시하는 방법.
온라인 쇼핑 카트를 테스트하고 기능이 예상대로 작동하는지 확인하는 방법.

🏆 성과

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

Vue.js 를 사용하여 웹 애플리케이션을 구축합니다.
웹 브라우저의 내장 API 를 사용하여 드래그 앤 드롭 기능을 구현합니다.
동적 데이터를 표시하고 사용자 상호 작용에 따라 사용자 인터페이스를 업데이트합니다.
애플리케이션을 컴포넌트 (component) 로 구성하여 깨끗하고 유지 관리 가능한 코드를 작성합니다.

프로젝트 구조 설정

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

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

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

그 중:

images 폴더는 페이지에 필요한 제품 이미지를 제공합니다.
index.css는 스타일 파일입니다.
index.html은 메인 페이지입니다.
js/vue.min.js 및 js/http-vue-loader.js는 Vue 라이브러리와 관련된 파일입니다.
trolley.vue는 완성해야 하는 컴포넌트 파일입니다.

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

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

드래그 앤 드롭 기능 구현

이 단계에서는 온라인 쇼핑 카트에 대한 드래그 앤 드롭 기능을 구현합니다.

trolley.vue 파일을 엽니다.
data() 함수에서 제품 정보를 포함하는 goods 배열을 볼 수 있습니다. 이 데이터는 "상품 목록" 섹션에 제품을 표시하는 데 사용됩니다.
methods 섹션에 다음 코드를 추가합니다:

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

설명:

dragstart 메서드는 사용자가 제품 드래그를 시작할 때 호출됩니다. dataTransfer 객체에 제품 이름과 가격을 설정하며, 이는 나중에 drop 메서드에서 접근할 수 있습니다.
dragover 메서드는 드래그된 항목이 쇼핑 카트 위에 있을 때 호출됩니다. 브라우저의 기본 동작을 방지하며, 이는 drop 이벤트가 작동하는 데 필요합니다.
drop 메서드는 사용자가 드래그된 항목을 쇼핑 카트에 놓을 때 호출됩니다. dataTransfer 객체에서 제품 이름과 가격을 가져와 bought 배열에 제품을 추가합니다.

computed 섹션에 다음 코드를 추가합니다:

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

설명:

totalPrice 계산된 속성은 쇼핑 카트의 제품 총 가격을 계산합니다.
goodsDetail 계산된 속성은 쇼핑 카트의 제품 세부 정보를 생성하여 제품 이름과 수량을 표시합니다.

HTML 에 드래그 앤 드롭 이벤트 바인딩

이 단계에서는 드래그 앤 드롭 이벤트를 div 태그에 바인딩해야 합니다.

trolley.vue 파일의 template 섹션에서 <div class="good-list"> 요소를 찾습니다.
<div class="good-list"> 요소를 다음 코드로 변경합니다:

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

<div class="trolley" id="trolley"> 요소를 찾습니다.
<div class="trolley" id="trolley"> 요소를 다음 코드로 변경합니다:

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length !== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

온라인 쇼핑 카트 테스트

trolley.vue 파일을 저장합니다.
페이지를 새로 고쳐 온라인 쇼핑 카트의 초기 상태를 확인합니다.
제품 이미지를 쇼핑 카트로 드래그 앤 드롭해 봅니다.
쇼핑 카트의 변경 사항을 관찰합니다. 여기에는 제품 수, 제품 세부 정보 및 총 가격이 포함됩니다.
기능이 예상대로 작동하는지 확인합니다.

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

Image Description

축하합니다! 제공된 기본 프로젝트와 드래그 앤 드롭 기능을 사용하여 온라인 쇼핑 카트를 성공적으로 구현했습니다.

요약

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

Vue.js 드래그 앤 드롭 쇼핑 카트

소개