jquery Ele.me Warenkorbdetails

Mit der Popularität des Online-Shoppings beginnen immer mehr Websites, Benutzern ein bequemes und schnelles Einkaufserlebnis zu bieten. Als Online-Bestellplattform für Lebensmittel hat Ele.me außerdem seine Warenkorbfunktion kontinuierlich optimiert, um den Benutzern den Abschluss des Lebensmittelbestellvorgangs zu erleichtern. In diesem Artikel erfahren Sie, wie Sie mit der jQuery-Technologie die Details des Ele.me-Warenkorbs realisieren und einige gängige Warenkorb-Interaktionseffekte erzielen.

1. Implementierung der Warenkorbdetails

1. Datenverarbeitung

Zuerst müssen wir eine Anfrage an den Server senden, um die Warenkorbdaten zu erhalten. Die Warenkorbdaten von Ele.me werden im JSON-Format zurückgegeben, daher müssen wir sie in eine HTML-Struktur verarbeiten, die angezeigt werden kann. Das Folgende ist ein Beispiel für JSON-Daten für Warenkorbartikel:

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

Wir können sie durch den folgenden Code in eine HTML-Struktur verarbeiten:

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. Anzeige des Warenkorbs

Die Anzeige des Warenkorbs wird normalerweise eingeblendet Durch Klicken auf das Warenkorbsymbol wird die schwebende Ebene implementiert. Wenn sich keine Artikel im Warenkorb befinden, sollte im Overlay die Meldung „Warenkorb ist leer“ angezeigt werden.

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. Warenkorb ausblenden

Wenn der Benutzer auf andere Bereiche der Seite klickt, sollte der Warenkorb ausgeblendet werden.

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

4. Produkte zum Warenkorb hinzufügen

Wir können die Funktion zum Hinzufügen von Produkten über eine Popup-Box implementieren. Nachdem der Benutzer das Produkt ausgewählt hat, klickt er auf die Schaltfläche „OK“, um das Produkt zum Warenkorb hinzuzufügen.

$('.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. Implementierung allgemeiner Warenkorb-Interaktionseffekte

1. Erhöhung oder Verringerung der Anzahl der Artikel

Benutzer können die Anzahl der Artikel über die Schaltflächen „+“ und „-“ im Warenkorb erhöhen oder verringern.

$(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. Artikel löschen

Benutzer können im Warenkorb auf die Schaltfläche „ד klicken, um Artikel zu löschen.

$(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. Zusammenfassung

In diesem Artikel wird beschrieben, wie die Details des Ele.me-Einkaufswagens mithilfe der jQuery-Technologie realisiert werden und wie gängige Warenkorb-Interaktionseffekte implementiert werden. Durch die Optimierung der Warenkorbfunktion können Sie den Nutzern ein komfortableres Einkaufserlebnis bieten und die Nutzerzufriedenheit auf der Website steigern.

Das obige ist der detaillierte Inhalt vonjquery Ele.me Warenkorbdetails. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!