Jquery Shopping Cart插件：實現會話管理

Question

我正在使用jquery購物車http://plugins.jquery.com/project/smartcart2誰能幫助我實現onAdded，onRemoved，onUpdated方法，以便進行Ajax調用以在服務器端維護會話。 每當添加/刪除/更新對象時，我都會在服務器上發出Ajax請求，並以JSON格式獲取數據。 我像obj.attr("qty", eval(msg)[1]);一樣更新了數量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，quantity等）。
   • 獲取操作類型（添加，刪除..）。
   • 檢查數據有效性。
   • 做所需的服務器端業務（更新數據庫，致電網絡服務等）。
   • 如果一切正常，請向您的收藏中添加/刪除指定的產品。
   • 將您的服務器端購物車轉換為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 ：產品編號
• 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>

因為在解決您的第一個問題后在同一職位上問另一個是不好的做法 。