jquery餓了麼購物車詳情-前端問答-PHP中文網

jquery餓了麼購物車詳情

王林

發布： 2023-05-12 11:27:37

原創

580 人瀏覽過

隨著線上購物的普及，越來越多的網站開始為使用者提供方便快速的購物體驗。餓了麼作為線上訂餐平台，也不斷優化其購物車功能，讓使用者更容易完成訂餐流程。本文將介紹如何利用jQuery技術實現餓了麼購物車詳情，以及如何實現一些常見的購物車互動效果。

一、購物車詳情的實現

1.資料處理

首先，我們需要向伺服器發送請求獲取購物車的資料。餓了麼的購物車資料是以JSON格式傳回的，因此我們需要將其處理為可以展示的HTML結構。以下是一個購物車商品的JSON資料範例：

{
  "food_id": "123",
  "name": "招牌炒饭",
  "price": 15,
  "num": 2
}

登入後複製

我們可以透過以下程式碼將其處理為HTML結構：

var shoppingCartData = [
  {
    "food_id": "123",
    "name": "招牌炒饭",
    "price": 15,
    "num": 2
  },
  // 其他商品...
];

var shoppingCart = $('<div class="shopping-cart"></div>');
var totalPrice = 0;

shoppingCartData.forEach(function(item) {
  var foodItem = $('<div class="food-item"></div>');
  var foodName = $('<div class="food-name"></div>').text(item.name);
  var foodPrice = $('<div class="food-price"></div>').text(item.price + '元 x ' + item.num);
  var foodSubtotal = $('<div class="food-subtotal"></div>').text(item.price * item.num + '元');
  
  totalPrice += item.price * item.num;
  
  foodItem.append(foodName);
  foodItem.append(foodPrice);
  foodItem.append(foodSubtotal);
  shoppingCart.append(foodItem);
});

var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
shoppingCart.append(totalInfo);

登入後複製

2.購物車的展示

購物車的展示一般是透過點擊購物車圖示彈出一個浮層來實現的。當購物車中沒有商品時，此浮層應顯示「購物車為空」的提示。

var shoppingCart = $('<div class="shopping-cart"></div>');

// 显示购物车为空的提示
if (shoppingCartData.length === 0) {
  var emptyTips = $('<div class="empty-tips"></div>').text('购物车为空');
  shoppingCart.append(emptyTips);
} else {
  // 显示购物车商品的详情
  shoppingCartData.forEach(function(item) {
    // 上一节代码的处理逻辑
  });
  
  // 显示购物车商品总价
  var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
  shoppingCart.append(totalInfo);
}

$('.shopping-cart-icon').click(function() {
  $('body').append(shoppingCart);
});

登入後複製

3.購物車的隱藏

當使用者點擊頁面其他區域時，購物車應該隱藏起來。

$(document).on('click', function(event) {
  if (!$(event.target).closest('.shopping-cart').length && !$(event.target).hasClass('shopping-cart-icon')) {
    shoppingCart.remove();
  }
});

登入後複製

4.新增商品到購物車

我們可以透過一個彈出框來實現新增商品的功能。用戶選擇商品後，點選確定按鈕將商品加入購物車中。

$('.add-to-cart-btn').click(function() {
  var foodItem = $(this).closest('.food-item');
  var foodId = foodItem.data('food-id');
  var foodName = foodItem.find('.food-name').text();
  var foodPrice = parseFloat(foodItem.find('.food-price').text());
  var foodNum = 1;
  
  // 判断购物车中是否已经存在该商品
  for (var i = 0; i < shoppingCartData.length; i++) {
    if (shoppingCartData[i].food_id === foodId) {
      shoppingCartData[i].num++;
      foodNum = shoppingCartData[i].num;
      break;
    }
  }
  
  // 如果购物车中不存在该商品，则添加到购物车中
  if (i === shoppingCartData.length) {
    shoppingCartData.push({
      "food_id": foodId,
      "name": foodName,
      "price": foodPrice,
      "num": 1
    });
  }
  
  // 更新购物车详情
  shoppingCart.empty();
  totalPrice = 0;
  shoppingCartData.forEach(function(item) {
    // 上一节代码的处理逻辑
  });
  
  var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
  shoppingCart.append(totalInfo);
  
  // 确定添加商品的数量
  var addFoodNum = $('<div class="add-food-num"></div>').text('已加入购物车 ' + foodNum + ' 件');
  $('body').append(addFoodNum);
  
  // 隐藏添加商品的数量
  setTimeout(function() {
    addFoodNum.remove();
  }, 1000);
});

登入後複製

二、常見購物車互動效果的實現

1.商品數量增減

用戶可以透過購物車中的「」和「-」按鈕對商品數量進行增減。

$(document).on('click', '.add-num-btn', function() {
  var foodItem = $(this).closest('.food-item');
  var foodId = foodItem.data('food-id');
  var foodNum = parseInt(foodItem.find('.food-price').text()) + 1;
  
  for (var i = 0; i < shoppingCartData.length; i++) {
    if (shoppingCartData[i].food_id === foodId) {
      shoppingCartData[i].num = foodNum;
      break;
    }
  }
  
  shoppingCart.empty();
  totalPrice = 0;
  shoppingCartData.forEach(function(item) {
    // 上一节代码的处理逻辑
  });
  
  var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
  shoppingCart.append(totalInfo);
});

$(document).on('click', '.minus-num-btn', function() {
  var foodItem = $(this).closest('.food-item');
  var foodId = foodItem.data('food-id');
  var foodNum = parseInt(foodItem.find('.food-price').text()) - 1;
  
  for (var i = 0; i < shoppingCartData.length; i++) {
    if (shoppingCartData[i].food_id === foodId) {
      if (foodNum === 0) {
        shoppingCartData.splice(i, 1);
      } else {
        shoppingCartData[i].num = foodNum;
      }
      break;
    }
  }
  
  shoppingCart.empty();
  totalPrice = 0;
  shoppingCartData.forEach(function(item) {
    // 上一节代码的处理逻辑
  });
  
  var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
  shoppingCart.append(totalInfo);
});

登入後複製

2.刪除商品

使用者可以點選購物車中的「×」按鈕刪除商品。

$(document).on('click', '.delete-btn', function() {
  var foodItem = $(this).closest('.food-item');
  var foodId = foodItem.data('food-id');
  
  for (var i = 0; i < shoppingCartData.length; i++) {
    if (shoppingCartData[i].food_id === foodId) {
      shoppingCartData.splice(i, 1);
      break;
    }
  }
  
  shoppingCart.empty();
  totalPrice = 0;
  shoppingCartData.forEach(function(item) {
    // 上一节代码的处理逻辑
  });
  
  var totalInfo = $('<div class="total-info"></div>').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元');
  shoppingCart.append(totalInfo);
});

登入後複製

三、總結

本文介紹如何利用jQuery技術實現餓了麼購物車詳情，以及常見購物車互動效果的實作方法。透過對購物車功能的最佳化，可以為使用者提供更便利的購物體驗，提高網站的使用者滿意度。

以上是jquery餓了麼購物車詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章！