2

我正在使用 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);
        }
    });  
        }

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

4

1 回答 1

4
  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 输入来进行产品定义。(如果你问我,这很愚蠢)这个输入有一些你可以得到的obj.attr("pid");属性。如果您的表单中没有输入,或者您的输入没有该属性,则您的代码将失败。

确保您隐藏的 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>

因为在解决了你的第一个问题后,在同一篇文章中问另一个问题是不好的做法

于 2011-03-30T23:02:27.767 回答