Question

使用jquery购物车http://plugins.jquery.com/project/smartcart2 任何人都可以帮助我实现onAdded，onRemoved，onUpdated方法，以便在服务器端进行Ajax调用以维护会话。每当添加/删除/更新对象时，我都会在服务器上发出Ajax请求，并以JSON格式返回数据。我用来自服务器的更新来更新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

在服务器端实施购物车。
将您的购物车对象（产品）保存在一个集合或其他内容中。
每次Ajax请求到达服务器端时：
- 从请求中获取数据（product_id，quantity，...等）。
- 获取操作类型（添加，删除..）。
- 检查数据有效性。
- 需要服务器端业务（更新数据库，调用Web服务等）。
- 如果一切正常，请在您的收藏中添加/删除指定的产品。
- 将服务器端购物车转换为JSON并写入Ajax调用响应。
每次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");
   }
 });

obj.attr("pid");

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

请确保您的隐藏HTML输入具有 PSEUDO 属性。

例如：

<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 ：产品类别

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

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>

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

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

1 个答案: