jQuery使用cookie与json简单实现购物车功能

下面是详细讲解“jQuery使用cookie与json简单实现购物车功能”的完整攻略：

简介

购物车是电商网站必不可少的功能，通过购物车，用户可以将自己关心的商品加入到购物车中，然后在统一的界面进行管理、筛选、结算等操作。本攻略将讲解如何使用 jQuery、JSON、Cookie 等技术实现购物车功能。

步骤讲解

步骤1：购物车结构设计

首先，我们需要考虑购物车的结构设计，购物车一般包含以下信息：

• 商品名称
• 商品单价
• 商品数量
• 商品小计
• 删除按钮

这里我们可以使用一个表格来实现，示例代码如下：

<table id="cartTable" class="cartTable">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>商品数量</th>
      <th>商品小计</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

步骤2：添加商品到购物车

一般情况下，我们会在商品详情页添加一个“加入购物车”按钮，用户点击该按钮后，商品信息会被添加到购物车中。示例代码如下：

// 添加商品到购物车
$('#addToCartBtn').on('click', function() {
  // 获取商品信息
  var goodsName = $('#goodsName').text();
  var goodsPrice = $('#goodsPrice').text();

  // 将商品信息添加到购物车中
  var goodsInfo = {
    name: goodsName,
    price: goodsPrice,
    quantity: 1
  };
  addToCart(goodsInfo);
});

// 将商品信息添加到购物车中
function addToCart(goodsInfo) {
  // 获取购物车中已有的商品信息
  var cart = getCart();
  var goodsIndex = -1;
  for (var i = 0; i < cart.length; i++) {
    if (cart[i].name === goodsInfo.name) {
      goodsIndex = i;
      break;
    }
  }
  if (goodsIndex === -1) {
    // 购物车中没有该商品，添加新商品
    cart.push(goodsInfo);
  } else {
    // 购物车中已经有该商品了，更新数量
    cart[goodsIndex].quantity += 1;
  }
  saveCart(cart);
}

在上述代码中，我们使用了 getCart()、saveCart(cart) 方法，其中 getCart() 方法用于从 cookie 中获取购物车信息，saveCart(cart) 方法用于将购物车信息更新到 cookie 中。下面我们来看看如何实现这两个方法。

步骤3：从 cookie 中获取购物车信息

购物车信息一般会储存在浏览器的 cookie 中，因此我们需要编写一个方法，用于从 cookie 中获取购物车信息。示例代码如下：

// 从 cookie 中获取购物车信息
function getCart() {
  var cart = [];
  var cartStr = $.cookie('cart');
  if (cartStr) {
    try {
      cart = JSON.parse(cartStr);
    } catch(e) {
      console.log('解析 cart 出错');
    }
  }
  return cart;
}

在上述代码中，我们使用 JSON.parse() 方法将 cookie 中存储的字符串转换为购物车信息。

步骤4：将购物车信息更新到 cookie 中

当用户添加商品到购物车、修改商品数量等操作时，我们需要将购物车信息更新到 cookie 中，示例代码如下：

// 将购物车信息更新到 cookie 中
function saveCart(cart) {
  var cartStr = JSON.stringify(cart);
  $.cookie('cart', cartStr, {expires: 7});
}

在上述代码中，我们使用 JSON.stringify() 方法将购物车信息转换为字符串，然后将其存储到 cookie 中。

步骤5：总计信息的计算

购物车中一般会显示总计信息，包括总价、总数量等。我们需要编写一个方法，用于计算总计信息。示例代码如下：

// 计算总计信息
function calculateTotal() {
  var cart = getCart();
  var totalNum = 0;
  var totalPrice = 0;
  for (var i = 0; i < cart.length; i++) {
    totalNum += cart[i].quantity;
    totalPrice += (cart[i].price * cart[i].quantity);
  }
  $('#totalNum').text(totalNum);
  $('#totalPrice').text(totalPrice.toFixed(2));
}

在上述代码中，我们使用 getCart() 方法获取购物车信息，然后遍历购物车中的商品，计算总数量和总价，并将其更新到页面上。

步骤6：购物车商品的展示

最后，我们需要将购物车中的商品展示出来，示例代码如下：

// 展示购物车中的商品
function showCart() {
  // 获取购物车信息
  var cart = getCart();

  // 清空购物车表格
  $('#cartTable tbody').empty();

  // 将购物车中的商品添加到表格中
  for (var i = 0; i < cart.length; i++) {
    var tr = $('<tr>');
    var tdName = $('<td>').text(cart[i].name);
    var tdPrice = $('<td>').text(cart[i].price);
    var tdQuantity = $('<td>').text(cart[i].quantity);
    var tdSubtotal = $('<td>').text((cart[i].price * cart[i].quantity).toFixed(2));
    var tdDelete = $('<td>').html('<a href="#">删除</a>');

    tr.append(tdName);
    tr.append(tdPrice);
    tr.append(tdQuantity);
    tr.append(tdSubtotal);
    tr.append(tdDelete);
    $('#cartTable tbody').append(tr);
  }

  // 计算总计信息
  calculateTotal();
}

在上述代码中，我们首先使用 getCart() 方法获取购物车信息，然后遍历购物车中的商品，将其添加到表格中，并使用 calculateTotal() 方法计算总计信息。

示例说明

下面我们通过两个具体的示例来说明如何使用上述代码实现购物车功能。

示例1：添加新商品到购物车

用户在商品详情页点击“加入购物车”按钮后，商品会被添加到购物车中。示例代码如下：

// 添加商品到购物车
$('#addToCartBtn').on('click', function() {
  // 获取商品信息
  var goodsName = $('#goodsName').text();
  var goodsPrice = $('#goodsPrice').text();

  // 将商品信息添加到购物车中
  var goodsInfo = {
    name: goodsName,
    price: goodsPrice,
    quantity: 1
  };
  addToCart(goodsInfo);

  // 提示用户商品已添加到购物车
  alert('商品已添加到购物车！');
});

在以上代码中，我们首先获取商品信息（商品名称、商品单价），然后将其封装为一个包含名称、单价、数量三个属性的商品对象 goodsInfo，再将该对象添加到购物车中，提示用户商品已添加到购物车。

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

用户在购物车页面点击“删除”按钮后，该商品会从购物车中删除。示例代码如下：

// 删除购物车中的商品
$('#cartTable').on('click', 'td:eq(4) a', function() {
  var index = $(this).parents('tr').index();
  var cart = getCart();
  cart.splice(index, 1);
  saveCart(cart);
  showCart();
});

在上述代码中，我们使用了 jQuery 的委托事件机制，当用户点击“删除”按钮时，首先获取所在行的索引，然后使用数组的 splice() 方法将该商品从购物车中删除，并将更新后的购物车信息保存到 cookie 中，最后重新展示购物车中的商品。

总结

通过上面的步骤讲解和示例说明，我们可以了解到如何使用 jQuery、JSON、Cookie 等技术实现简单的购物车功能。购物车功能是一个较为常见的网站功能，对于提升用户体验以及促进销售，具有重要的意义。