jquery实现手机端单店铺购物车结算删除功能

以下是“jquery实现手机端单店铺购物车结算删除功能”的完整攻略。

概述

在开发手机端的电商网站时，购物车是必不可少的功能之一。在购物车中，用户可以查看已选择的商品、数量以及价格，还可以执行结算、删除等操作。因此，实现购物车结算删除功能是非常重要的。

本攻略主要介绍如何使用jquery实现手机端单店铺购物车结算删除功能。

实现步骤

下面是实现该功能的详细步骤：

1. 购物车基本布局

让我们先来创建一个简单的购物车布局。

<div class="cart">
  <h2>购物车</h2>
  <ul class="cart-list">
    <!--购物车商品列表-->
  </ul>
  <div class="cart-footer">
    <span class="total-price">总价：<strong>0</strong></span>
    <button class="checkout-btn">结算</button>
    <button class="delete-btn">删除</button>
  </div>
</div>

我们通过<ul>元素来展示购物车中添加的商品列表。在底部，我们添加了两个按钮：结算和删除。

2. 点击添加商品按钮，添加商品到购物车

在点击添加商品按钮时，我们需要把商品信息添加到购物车中。

<button class="add-to-cart-btn" data-id="001" data-name="商品1" data-price="10">添加商品1到购物车</button>
<button class="add-to-cart-btn" data-id="002" data-name="商品2" data-price="20">添加商品2到购物车</button>
<button class="add-to-cart-btn" data-id="003" data-name="商品3" data-price="30">添加商品3到购物车</button>

我们在按钮中添加了商品的id、名称和价格等信息。

接下来，我们通过jquery来实现商品添加到购物车的功能。

$('.add-to-cart-btn').on('click', function() {
  // 获取商品信息
  var id = $(this).data('id');
  var name = $(this).data('name');
  var price = $(this).data('price');

  // 添加到购物车中
  var $cartList = $('.cart-list');
  var $item = $('<li>', {'class': 'cart-item'}).data('id', id);
  $('<span>', {'class': 'item-name'}).text(name).appendTo($item);
  $('<span>', {'class': 'item-price'}).text(price).appendTo($item);
  $('<button>', {'class': 'remove-btn'}).text('删除').appendTo($item);
  $item.appendTo($cartList);

  // 计算总价格
  calcTotalPrice();
});

代码中，我们首先使用data()方法得到商品的id、名称和价格等信息，然后将其添加到购物车列表中。这里我们为每个商品列表项添加了一个“删除”按钮，后面会介绍到这个按钮的实现。

最后，执行calcTotalPrice()函数来计算购物车中商品的总价。

3. 计算购物车中商品的总价

我们需要实现一个calcTotalPrice()函数，该函数会计算出购物车中所有商品的总价，并显示在页面上。

function calcTotalPrice() {
  var totalPrice = 0;
  $('.cart-item').each(function() {
    var price = $(this).find('.item-price').text();
    totalPrice += parseFloat(price);
  });
  $('.total-price strong').text(totalPrice.toFixed(2));
}

代码中，我们首先初始化总价为0，然后使用each()方法循环遍历每个商品列表项，得到商品价格并计算总价。

4. 删除购物车中的商品

为了删除购物车中的商品，我们为每个商品列表项添加了一个“删除”按钮，点击该按钮将从购物车中删除对应的商品。

$('.cart-list').on('click', '.remove-btn', function() {
  var $item = $(this).closest('.cart-item');
  $item.remove();
  calcTotalPrice();
});

代码中，我们使用closest()方法找到该商品列表项，并从购物车列表中删除。最后，调用calcTotalPrice()函数来重新计算购物车中商品的总价。

5. 结算购物车

实现结算购物车功能时，我们需要将选择的商品信息和总价发送给后端，同时也要将购物车中的商品列表清空。

$('.checkout-btn').on('click', function() {
  // 获取选择的商品信息
  var cartItems = [];
  $('.cart-item').each(function() {
    var id = $(this).data('id');
    var name = $(this).find('.item-name').text();
    var price = $(this).find('.item-price').text();
    cartItems.push({
      id: id,
      name: name,
      price: price
    });
  });

  // 获取总价
  var totalPrice = $('.total-price strong').text();

  // 发送给后端
  $.ajax({
    method: 'POST',
    url: '/checkout',
    data: {
      cartItems: cartItems,
      totalPrice: totalPrice
    },
    success: function(response) {
      alert(response.message);
      // 清空购物车列表
      $('.cart-list').empty();
      calcTotalPrice();
    }
  });
});

代码中，我们首先通过循环遍历每个商品列表项，得到商品id、名称和价格，并存储在cartItems数组中。然后，我们通过jquery的ajax方法向后端发送选择的商品信息和总价。

在成功响应后，我们弹出提示框，并用empty()方法清空购物车中的商品列表。最后，重新调用calcTotalPrice()函数来重新计算购物车中商品的总价。

示例说明

示例一：添加商品到购物车

我们在每个商品的“添加到购物车”按钮上添加了data-id、data-name和data-price等自定义属性以保存商品信息。这些自定义属性可以使用jquery的data()方法来获取：

$('.add-to-cart-btn').on('click', function() {
  // 获取商品信息
  var id = $(this).data('id');
  var name = $(this).data('name');
  var price = $(this).data('price');

  // 添加到购物车中
  var $cartList = $('.cart-list');
  var $item = $('<li>', {'class': 'cart-item'}).data('id', id);
  $('<span>', {'class': 'item-name'}).text(name).appendTo($item);
  $('<span>', {'class': 'item-price'}).text(price).appendTo($item);
  $('<button>', {'class': 'remove-btn'}).text('删除').appendTo($item);
  $item.appendTo($cartList);

  // 计算总价格
  calcTotalPrice();
});

我们可以看到，点击“添加到购物车”按钮后，商品信息将添加到购物车列表中，并计算购物车中商品的总价。

示例二：删除购物车中的商品

为了删除购物车中的商品，我们为每个商品列表项添加了一个“删除”按钮。我们可以使用jquery的closest()方法找到该列表项，并从购物车列表中删除：

$('.cart-list').on('click', '.remove-btn', function() {
  var $item = $(this).closest('.cart-item');
  $item.remove();
  calcTotalPrice();
});

我们点击“删除”按钮后，对应的商品将被从购物车中删除，并重新计算购物车中商品的总价。