jquery Ele.me 장바구니 세부정보

온라인 쇼핑의 인기와 함께 점점 더 많은 웹사이트가 사용자에게 편리하고 빠른 쇼핑 경험을 제공하기 시작했습니다. 온라인 음식 주문 플랫폼인 Ele.me는 사용자가 음식 주문 프로세스를 더 쉽게 완료할 수 있도록 장바구니 기능을 지속적으로 최적화해 왔습니다. 이 기사에서는 jQuery 기술을 사용하여 Ele.me 장바구니의 세부 사항을 구현하는 방법과 몇 가지 일반적인 장바구니 상호 작용 효과를 얻는 방법을 소개합니다.

1. 장바구니 세부정보 구현

1. 데이터 처리

먼저 장바구니 데이터를 가져오기 위해 서버에 요청을 보내야 합니다. Ele.me의 장바구니 데이터는 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);
});

2. 일반 장바구니 상호작용 효과 구현

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);
});

3. 요약

이 글에서는 jQuery 기술을 사용하여 Ele.me 장바구니의 세부 사항을 구현하는 방법과 일반적인 장바구니 상호 작용 효과의 구현 방법을 소개합니다. 장바구니 기능을 최적화하여 사용자에게 보다 편리한 쇼핑 경험을 제공하고 웹사이트에서의 사용자 만족도를 높일 수 있습니다.

위 내용은 jquery Ele.me 장바구니 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!