Large counting operations in real time with ajax

Question

On my online shop, the order system is divided into several forms (one for each product collection). Each collection has about 100 products in different sizes (=~500 total), so in a few years it'll be 10 collections x 500 products.

It's a wholesale portal, so the customers usually order many products, often in high quantities. On the other hand, there is probably never going to be a situation when more than 20 customers are making an order at the same time.

I want to count and display the quantity of products ordered and the total cash amount for a customer. Here is how I keep the order data in a $_SESSION array:

$_SESSION['input'][34]['s']===20 // This means the customer ordered 20x product with id 34 in size S.
$_SESSION['prices'][34]===39.99 // This is the price of product with id 34.

The $_SESSION array is updated every time the customer changes the collection ( =goes to a site with a new form).

My question is what's the best way to display the total order cash amount:

1. Rely on data from $_SESSION arrays. Count the total difference between the starting sum and the current sum every time a user changes the value of an input field (keyUp event in jQuery)
2. Trigger an ajax request with every keyUp that counts everything, updates $_SESSION, then counts and displays total cash amount.
3. Simple Non-real-time solution: a 'update' button that just submits the form and the new request simply updates the page.

Here's what I think: Numbers 1. and 2. look very nice but very hard to do (for me) and they might be too much of a load on the server. Number 3. is less convenient for the user but it's easy to do and uses minimal server resources

Any advice?

Thanks!

Answer 1

From what I understand (seeing how you mention Ajax) is that the shop doesn't refresh the page upon each change in the collection (for instance changing the amount of a specific product, adding / removing it from the basket, etc).

So on the assumption that this (single page interface idea) is indeed the case:

To me this would imply that you should ONLY mutate the contents of the cart server side when the user definitely submits the cart (either for checkout purposes or when changing page in the shop). As such, I wouldn't execute a load of requests to the backend during the shopping. As the data is already present in the DOM (which I assume as you show the articles on screen) I would suggest performing the price calculations and cart content mutations in JavaScript on the client side instead of requesting the sum via the backend and updating the backend on each change. This dramatically reduces the amount of required HTTP requests and the strain on your server / database.

Now it might be debated whether these are the kind of operations you want to perform on the client side, but in the end you will still be validating the cart contents in the backend to prevent malicious users from making funny requests. The order verification page should still show everything as calculated by the backend to make sure what is ordered is what is paid for.

Hope this is of any help.