Rumah > Artikel > hujung hadapan web > butiran troli beli-belah Ele.me jquery
Dengan populariti membeli-belah dalam talian, semakin banyak tapak web mula menyediakan pengguna pengalaman membeli-belah yang mudah dan pantas. Sebagai platform tempahan makanan dalam talian, Ele.me juga terus mengoptimumkan fungsi troli beli-belahnya untuk memudahkan pengguna menyelesaikan proses tempahan makanan. Artikel ini akan memperkenalkan cara menggunakan teknologi jQuery untuk merealisasikan butiran troli beli-belah Ele.me, dan cara mencapai beberapa kesan interaksi troli beli-belah biasa.
1. Pelaksanaan butiran troli beli-belah
1. Pemprosesan data
Pertama, kami perlu menghantar permintaan kepada pelayan untuk mendapatkan data troli beli-belah. Data troli beli-belah Ele.me dikembalikan dalam format JSON, jadi kami perlu memprosesnya menjadi struktur HTML yang boleh dipaparkan. Berikut ialah contoh data JSON untuk item troli beli-belah:
{ "food_id": "123", "name": "招牌炒饭", "price": 15, "num": 2 }
Kita boleh memprosesnya menjadi struktur HTML melalui kod berikut:
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. Paparan troli beli-belah
Beli-belah Paparan troli biasanya dicapai dengan mengklik ikon troli beli-belah untuk muncul lapisan terapung. Apabila tiada item dalam troli beli-belah, tindanan hendaklah memaparkan gesaan "Keranjang belanja kosong".
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. Troli beli-belah bersembunyi
Apabila pengguna mengklik pada bahagian lain halaman, troli beli-belah harus disembunyikan.
$(document).on('click', function(event) { if (!$(event.target).closest('.shopping-cart').length && !$(event.target).hasClass('shopping-cart-icon')) { shoppingCart.remove(); } });
4. Tambahkan produk ke troli beli-belah
Kita boleh menambah produk melalui kotak pop timbul. Selepas pengguna memilih produk, klik butang OK untuk menambah produk ke troli beli-belah.
$('.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. Pelaksanaan kesan interaksi troli beli-belah biasa
1 Menambah atau mengurangkan bilangan item
Pengguna boleh menukar troli beli-belah melalui "+" dan. Butang "-" Kuantiti barang bertambah atau berkurang.
$(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. Padam item
Pengguna boleh mengklik butang “×” dalam troli beli-belah untuk memadam item.
$(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. Ringkasan
Artikel ini memperkenalkan cara menggunakan teknologi jQuery untuk merealisasikan butiran troli beli-belah Ele.me, serta kaedah pelaksanaan kesan interaksi troli beli-belah biasa. Dengan mengoptimumkan fungsi troli beli-belah, anda boleh memberikan pengguna pengalaman membeli-belah yang lebih mudah dan meningkatkan kepuasan pengguna di tapak web.
Atas ialah kandungan terperinci butiran troli beli-belah Ele.me jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!