Jquery 购物车插件：实现会话管理

Question

我正在使用 jquery 购物车http://plugins.jquery.com/project/smartcart2 任何人都可以帮助我实现 onAdded、onRemoved、onUpdated 方法，以便进行 Ajax 调用以在服务器端维护会话。 每当添加/删除/更新对象并以 JSON 格式取回数据时，我都会在服务器上发出 Ajax 请求。我用来自服务器的更新更新了obj.attr("qty", eval(msg)[1]); 之类的数量。 但是，如果我点击刷新或重新填充表数据，则购物车项目不再存在。因此，问题实际上是如何填充会话中的数据，以便产品在刷新等时仍保留在购物车中。

$('#SmartCart').smartCart({ 
onAdded: function(pObj,quantity){ cartAdded(pObj,quantity);}, 
onRemoved: function(pObj){ cartRemoved(pObj);},
onUpdated: function(pObj,quantity){ cartUpdated(pObj,quantity); },
});

function cartAdded(obj,qty){
var product_id = obj.attr("pid");
var quantity = qty; 
// Ajax calls for adding product to cart
function(pObj,quantity){
    cartAdded(pObj,quantity);}
}

function cartRemoved(obj){
var product_id = obj.attr("pid");
// Ajax call for removing product from cart
}

function cartUpdated(obj,qty){
var product_id = obj.attr("pid");
var quantity = qty; 
// Ajax call for updating product on cart
}

function cartAdded(obj,qty){
            var partNum = obj.attr("partNumber");
            var quantity = qty;                
         $.ajax({
        type: 'POST',
        url: "json/sessionManager",
        data : "partNum=" + partNum + "&qty=" + quantity,
        dataType: "text/json",
        success: function(msg){
            obj.attr("qty", msg[1]);
        },
        error: function(httpRequest, textStatus, errorThrown) {
           alert("status=" + textStatus + ",error=" + errorThrown);
        }
    });  
        }

我非常感谢您提出相同的建议。

Answer 1

1. 在服务器端实现您的购物车。
2. 将您的购物车对象（产品）保存在集合或其他东西中。

3. 每次Ajax请求到达服务器端：

   • 从请求中获取数据（product_id、数量等）。
   • 获取操作类型（添加、删除..）。
   • 检查数据有效性。
   • 做所需的服务器端业务（更新数据库、调用网络服务等）。
   • 如果一切正常，请在您的收藏中添加/删除指定产品。
   • 将您的服务器端购物车转换为 JSON 并写入 Ajax 调用的响应。

4. 每次 JSON 响应到达客户端时：

   • 用新数据更新您的购物车。

---

对于 Ajax 部分。使用jQuery Ajax()函数

$.ajax({
   type: "POST",
   url: "cart.jsp",
   data: "p_id=SKU001&quantity=4",
   success: function(msg){
     alert( "FOUR SKU001 ADDED TO CART");
   }
 });

---

编辑：哦，我明白了。 product_id 未定义意味着您的obj.attr("pid"); 不起作用。

此插件使用隐藏的 HTML 输入来定义产品。 （如果你问我，那就太愚蠢了） 这些输入有一些 pseudo 属性，您可以通过obj.attr("pid"); 获得这些属性。 如果您的表单中没有输入，或者您的输入没有该 pseudo 属性，则您的代码将失败。

确保您的隐藏 HTML 输入具有此 伪 属性。

例如：

<div id="SmartCart" class="scMain">
  <input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="" 
    pcategory="Computers" pname="Apple MacBook Pro MA464LL/A 15.4" pid="100">

  <input type="hidden" pimage="products/product6.jpg" pprice="2699.99" pdesc="" 
    pcategory="Computers" pname="Sony VAIO 11.1&quot; Notebook PC" pid="101">
  <input type="hidden" pimage="products/product3.jpg" pprice="550.00" pdesc="" 
    pcategory="Cameras" pname="Canon Digital Rebel" pid="102">
</div>

来自作者文档：

描述：标记为粗体的文本是描述产品的伪属性。比如产品名称、价格、描述等。

• pid：产品 ID
• pname ：产品名称
• pdesc：产品描述
• pprice：产品价格
• pimage：产品图片来源
• pcategory ：产品类别

您可以通过向输入元素添加新属性来添加更多产品详细信息，因此您可以通过编辑模板将它们显示在产品列表或购物车中。 您可以自定义伪属性名称，并在属性设置部分的插件文件中对其进行配置。

Edit2：我认为您在我的建议的这一部分有困难。

每次 JSON 响应到达客户端时：

用新数据更新您的购物车。

下面的隐藏输入是您的数据。 在stackoverflow上打开另一个问题并询问

如何在 jQuery 中修改（创建、更新、删除）这些输入

<div id="SmartCart" class="scMain">
  <input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="" 
    pcategory="Computers" pname="Apple MacBook Pro MA464LL/A 15.4" pid="100">

  <input type="hidden" pimage="products/product6.jpg" pprice="2699.99" pdesc="" 
    pcategory="Computers" pname="Sony VAIO 11.1&quot; Notebook PC" pid="101">
  <input type="hidden" pimage="products/product3.jpg" pprice="550.00" pdesc="" 
    pcategory="Cameras" pname="Canon Digital Rebel" pid="102">
</div>

因为在解决了你的第一个问题后在同一个帖子中问另一个问题是不好的做法。