butiran troli beli-belah Ele.me jquery-Soal Jawab bahagian hadapan-php.cn

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
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!