Updating Cart Basket - ajax or without ajax?

Let say you you have a list of items and you click on the Add button. The Item name will be added to the basket box.

What is the best practice doing this?

1) When you click on the add button, item data will be added to the cart session via ajax and then redisplay the basket box via ajax as well.

2) Same as number 1 but adding to DB cart_temp table instead of cart session?

3) Without Ajax, when you click on the Add button, new element/tag will be created on the basket box via JavaScript. Item name and price will be added. At the bottom of Basket Box, there will be a "Proceed" button. Click on the Proceed button will then put data from the cart elements/tag into session or database. How can use jquery to get the elements items 开发者_如何学Goand prices value?

4) Or what your solution?

---

There is no general solution for all kind of problems connected with cart management. Solutions that will be universal for everyone, everywhere. But there are tested and well working design patterns. Furthermore I can tell which model I am using with my software.

First of all You have to know that each price modification, discount, promo code can modify original product price. Calculating it using JavaScript can be less stable and unreliable. There should be one/few trusted method to return information assigned to a cart, for e.g.

class Cart {
  public function getTotalGrossPrice() { ... }
  public function getTotalNetPrice() { ... }
}

Methods will return solid values e.g. with added tax or something. Secondly You need to manage it from JavaScript using ajax or not. I prefer fetching all data in JSON format.

$.getJSON('/cart/getTotalGrossPrice.html');

Look at: http://api.jquery.com/jQuery.getJSON/

When You have one method to get cart total price it is simple to fetch it everywhere on Your website. Introducing new functionality like promo codes will be less painful when there is a one central place like a Class. Imagine that You have few places on your website where price is calculated by JavaScript, it is simple to break something by mistake when editing.

http://yuml.me/8317d38

This model is common on websites with structure implemented like an API Schema.

Maybe it will help You, good luck.

---

I think that the less AJAX calls you make, the better it is. I'd opted for the fourth solution (#4). Basically at the item click you could (trough jQuery) add few HTML hidden fields such as:

<div id="item-list" style="display: none;">
    <div class="item" id="12345"></div>
    <div class="item" id="12346"></div>
    ...
</div>

And then process everything after creating a "Proceed" button. That's what, at least, I'd do.

Answering this:

How can use jquery to get the elements items and prices value?

You should just take it from your price field and add it show it's current price. But I'd avoid the storing of the price in the HTML page or on Javascript: it's better to make your PHP script calculate the real price sending the list of the products.

---

The best bet is to make a round trip to the server, via AJAX and send back the HTML for the basket. The HTML is so small that the AJAX overhead will take way more time anyway, but you really need to use the server-side logic to get the pricing right.

If degrading is important for non-javascript, do a whole page refresh.