jquery Ele.me shopping cart details-Front-end Q&A-php.cn

With the popularity of online shopping, more and more websites are beginning to provide users with a convenient and fast shopping experience. As an online food ordering platform, Ele.me has also continuously optimized its shopping cart function to make it easier for users to complete the food ordering process. This article will introduce how to use jQuery technology to realize the details of the Ele.me shopping cart, and how to achieve some common shopping cart interaction effects.

1. Implementation of shopping cart details

1. Data processing

First, we need to send a request to the server to obtain the shopping cart data. Ele.me's shopping cart data is returned in JSON format, so we need to process it into an HTML structure that can be displayed. The following is an example of JSON data for a shopping cart item:

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

Copy after login

We can process it into an HTML structure through the following code:

var shoppingCartData = [ { "food_id": "123", "name": "招牌炒饭", "price": 15, "num": 2 }, // 其他商品... ]; var shoppingCart = $('
'); var totalPrice = 0; shoppingCartData.forEach(function(item) { var foodItem = $('
'); var foodName = $('
').text(item.name); var foodPrice = $('
').text(item.price + '元 x ' + item.num); var foodSubtotal = $('
').text(item.price * item.num + '元'); totalPrice += item.price * item.num; foodItem.append(foodName); foodItem.append(foodPrice); foodItem.append(foodSubtotal); shoppingCart.append(foodItem); }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo);

Copy after login

2. Display of the shopping cart

Shopping The display of the cart is generally achieved by clicking the shopping cart icon to pop up a floating layer. When there are no items in the shopping cart, the overlay should display a "Shopping cart is empty" prompt.

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

Copy after login

3. Shopping cart hiding

When the user clicks on other areas of the page, the shopping cart should be hidden.

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

Copy after login

4. Add products to the shopping cart

We can add products through a pop-up box. After the user selects the product, click the OK button to add the product to the shopping cart.

$('.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 = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); // 确定添加商品的数量 var addFoodNum = $('
').text('已加入购物车 ' + foodNum + ' 件'); $('body').append(addFoodNum); // 隐藏添加商品的数量 setTimeout(function() { addFoodNum.remove(); }, 1000); });

Copy after login

2. Implementation of common shopping cart interaction effects

1. Increase or decrease in the number of items

Users can change items through the " " and "-" buttons in the shopping cart The quantity is increased or decreased.

$(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 = $('
').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 = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); });

Copy after login

2. Delete products

Users can click the "×" button in the shopping cart to delete products.

$(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 = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); });

Copy after login

3. Summary

This article introduces how to use jQuery technology to realize the details of the Ele.me shopping cart, as well as the implementation methods of common shopping cart interactive effects. By optimizing the shopping cart function, you can provide users with a more convenient shopping experience and improve user satisfaction on the website.

The above is the detailed content of jquery Ele.me shopping cart details. For more information, please follow other related articles on the PHP Chinese website!