Vue.js でショッピングカートを構築 | 電子商取引開発

はじめに

このプロジェクトでは、Vue.js 2.x を使ってショッピングカート機能を構築する方法を学びます。ショッピングカートは、e コマースサイトにおいて必須の機能であり、ユーザーが購入前に選択した商品を管理できるようにします。

👀 プレビュー

Shopping cart functionality demo

🎯 タスク

このプロジェクトでは、以下のことを学びます。

ショッピングカートに商品を追加するために 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 回クリックすると、商品がカートリストに N 回表示され、初期数量は 1 になります。
カート内の商品の横にあるプラス（「+」）ボタンをクリックすると、商品がカートリストに再表示され、初期数量は 1 になります。
カート内の商品の横にあるマイナス（「-」）ボタンをクリックすると、商品はカートから削除されません。

addToCart メソッドを変更する

このステップでは、ショッピングカートに商品を追加するために addToCart メソッドをどのように修正するかを学びます。

index.html ファイルを開きます。
Vue インスタンス内の addToCart メソッドを見つけます。
addToCart メソッドを修正して、以下の要件を達成します。
- 商品がショッピングカートに存在しない場合、商品をカートの末尾に追加し、数量を 1 に初期化します。
- 商品が既にショッピングカートに存在する場合、単に数量を 1 増やします。

修正後の addToCart メソッドは以下のようになるはずです。

addToCart(goods) {
  // TODO: Modify the current function to realize the shopping cart to add the product requirements

  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 ファイルを保存します。

ショッピングカート機能をテストする

ブラウザでページを更新します。
「カートに入れる」ボタンが正しく機能することを確認します。
- 商品がショッピングカートに存在しない場合、数量 1 で追加されるはずです。
- 商品が既にショッピングカートに存在する場合、数量が 1 増やされるはずです。
ショッピングカート内の「+」ボタンと「-」ボタンが正しく機能することを確認します。
- 「+」ボタンをクリックすると、商品の数量が 1 増えるはずです。
- 「-」ボタンをクリックすると、商品の数量が 1 減るはずです。
- 数量が 0 になった場合、商品がショッピングカートから削除されるはずです。

最終的な実装結果は以下の通りです。

Image Description

おめでとうございます！あなたは成功裏にショッピングカートプロジェクトを完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。

Vue.js を使ったショッピングカートの構築