jquery Ele.me détails du panier

Avec la popularité des achats en ligne, de plus en plus de sites Web commencent à offrir aux utilisateurs une expérience d'achat pratique et rapide. En tant que plateforme de commande de nourriture en ligne, Ele.me a également continuellement optimisé sa fonction de panier d'achat pour permettre aux utilisateurs de terminer plus facilement le processus de commande de nourriture. Cet article explique comment utiliser la technologie jQuery pour réaliser les détails du panier Ele.me et comment obtenir certains effets courants d'interaction avec le panier.

1. Mise en œuvre des détails du panier

1. Traitement des données

Tout d'abord, nous devons envoyer une demande au serveur pour obtenir les données du panier. Les données du panier d'achat d'Ele.me sont renvoyées au format JSON, nous devons donc les traiter dans une structure HTML pouvant être affichée. Voici un exemple de données JSON pour les articles du panier :

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

Nous pouvons les traiter dans une structure HTML via le code suivant :

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 Affichage du panier

L'affichage du panier apparaît généralement. en cliquant sur l'icône du panier, la couche flottante est implémentée. Lorsqu'il n'y a aucun article dans le panier, la superposition doit afficher une invite « Le panier est vide ».

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. Masquage du panier

Lorsque l'utilisateur clique sur d'autres zones de la page, le panier doit être masqué.

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

4. Ajouter des produits au panier

Nous pouvons implémenter la fonction d'ajout de produits via une boîte contextuelle. Une fois que l'utilisateur a sélectionné le produit, cliquez sur le bouton OK pour ajouter le produit au panier.

$('.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. Mise en œuvre d'effets d'interaction courants avec le panier

1. Augmentation ou diminution du nombre d'articles

Les utilisateurs peuvent augmenter ou diminuer le nombre d'articles via les boutons "+" et "-" du panier.

$(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. Supprimer des articles

Les utilisateurs peuvent cliquer sur le bouton "×" dans le panier pour supprimer des articles.

$(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. Résumé

Cet article présente comment utiliser la technologie jQuery pour réaliser les détails du panier Ele.me, ainsi que les méthodes de mise en œuvre des effets d'interaction courants du panier. En optimisant la fonction de panier d'achat, vous pouvez offrir aux utilisateurs une expérience d'achat plus pratique et améliorer la satisfaction des utilisateurs sur le site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!