JQuery - Orderform，自动更新价格，存储信息

Question

Im using Wordpress as a CMS for this website. Basically the site has products that are amongst different categories. The products are stored as a custom post type called 'product'

On the front-end, there's going to be an order form. What I'm trying to figure out is this: The client wants to have the 'order totals' updated on the fly. So if a user types in '5' for a particular product, it'll update that total after the keystroke.

Furthermore, a product/service could potentially be in different categories, which would effect the price. For example

Product: Wash & Wax

Categories: Full Service | Once Over

So if the product 'Wash & Wax' has an text <input>, and below it are those categories with corresponding radio buttons, and a user chooses 'Full Service' which might be $10 for THAT product, or 'Once Over' which might be $7 for THAT product, I'm trying to figure out:

what the best way is to pull the data from the back-end,

store it in some sort of JQuery accessible Object / Array,

and have the Product inputs access their corresponding prices from that data set

Currently, prices are stored on a PER PRODUCT basis in the database. So the product 'Wash & Wax (full service) is one row in the DB with its own price, and 'Wash & Wax' (once over) is a separate product in the DB with its own price.

EDIT:

If the question is too specific, really what Im asking is: Whats the best way to pull MySQL data, for use in a dynamic context (like updating price totals with JQuery) and whats the best way to link up the HTML inputs with the fetched data?

Answer 1

I decided to make everything simpler. I got rid of the Categories being part of the front end equation. I just pulled all Products from the database along with their unique Slug and Price. The array is setup simply as:

$products = array(
     'the-unique-slug' => array(
          'id' => $id,
          'price' => $price,
     'next-unique-slug' => array(
     etc......

This way, even if the categories change, the Slug will always be the same and unique.

Next, I decided to display ALL separate text <inputs> for tall the variations on a certain product. I hide all of them except using jQuery. I then put the Categories in classes:

<input type='text' class='raw standard product-input' name='photo-prints-1' />
<input type='text' class='direct standard product-input' name='photo-prints-2' />
etc..

So when a user changes to the 'standard' radio button and 'raw' radio button, JQuery simply show() those <inputs> possessing those classes, and hide() anything that doesn't

And lastly, to get the array in to jQuery, I just Json_encoded() it:

<script type="text/javascript"> var products = <?php echo json_encode($products) ?>;</script>