This is just basically version 2 of the ordering form I did up in screencast 50 about a year ago. The same client was reactivating it for another period and I took the opportunity to rewrite some of how it works to make it better. Numbers are entered, math is performed automatically, the people rejoice.
What does it do?
The main point here is the math. It’s a simple table of products, and each product has an input box for quantity. Changing the value of that quantity box automatically triggers the math and totals are calculated. Row totals are calculated across, then order totals are calculated down. Quantities are totaled and multiplied by a shipping rate and all that is added together.
For demonstration purposes, the form is integrated with FoxyCart, to show how it might be used in a “real” situation.
Improvements over last time
- Some of the functions are more efficient.
- Number formatting is far better. Instead of having a box that just says 12423 in it, it says $12,423. This is thanks to some fun snippetry like this.
- Event handling is smarter. Instead of waiting for the input’s blur event to fire, the math is performed on focus, blur, change, and keyup events, making the form seem smarter and snappier.
- Logic in general is better, handling bad inputs in a cleaner way.
If ya’ll have ideas to make it even better, I’m all ears as always.
I hope you know that I love the content on your website… I thought I’d let you know that with Chrome 4.0.266.0 I am seeing rectangle blocks instead of spaces in your headings (see twitpic)
http://www.twitpic.com/uskgz
You’ll be tech tweeted around 9:45am CSt ;)
Facing the same bug, hopefully Chris will come up with solution soon.
But the new design really looks more elegant and professional….
Found a bug:
Typing a number and then a letter in the ‘Quantity’ box will add a product, remove a product, update the subtotal/order total and add a shipping total, leaving the shipping total with no order totals.
For example, type ‘1’, then ‘P’ – the quantity goes up by one, then is removed, but a $10 shipping amount is still left with no quantity. I’m thinking that the form should be smart enough to know to remove the shipping amount when no quantity is existant.
Nice form though. Keep up the good work.
This should be fixed.
I am a raw beginner. Ever since I started becoming serious about web design I have started to follow CSS-Tricks. I recently opened up an online store, so this article was particularly interesting for me. I noticed that a person can enter non-integers in the quantities and negative numbers. For example -.34 is a valid quantity. The total is added according to negative numbers, but the final value is expressed positively. I do not know how to fix this bug, and do not know if you want to since this is a demo, but I thought you would like to be aware of the problem.
Thanks again for the website. You have helped me tremendously over the past couple months.
One way to fix this would be to write an JavaScript IsInteger() function* to validate. I’m not 100% sure the best way to go about it though. Would the best way be to round up or down? Or would it be to just mark the field as a warning?
* perhaps:
I’m gonna watch that screen cast just to get more of an insight & then mess with this re-written write up post. I’m pretty fascinated by the way it functions. Hell, sometimes, I wonder how the heck your brain functions & comes up with stuff like this. Your a smart man Chris!
& @chris is correct on that little issue. Should be a little bit more advance on knowing how to handle that situation. But what the heck do I know!? Noob status, lol. Still great either way though! :)
This type of write up will be perfect to implement on my own stuff & apply towards my friends music & shirt print business, or any other sort of online merchandise sales! Thanks for the post & keep ’em coming, keeps me inspired & learning! :)
– MexiChriS
Awesome, exatcly what i needed a few days ago! Would be great to fix the bugs Erik wrote about. I’ll try to give it a look. Thanks for this.
This very cool, I may try to integrate it with a Shopify ecommerce site im in the process of building. My client was wanting each product page to have a list of options of varying price and be allowed to enter in the amounts for multiple options and click one button, similar to the Bass Pro Shop seen here:
http://www.basspro.com/webapp/wcs/stores/servlet/Product_10151_-1_10001_100927_100005000_100000000_100005000_100-5-0
This is a godsend :D
I didn’t know where to comment on the new look of your site… but it’s slick! good work!
Wow, i did something similar for another web-app months ago.
I would suggest another hint: add another quantity field, the ‘Global Quantity’, and this will fillup the items where the user leave the quantity field blank.
This will be quite usefull for people that order, for example, the same quantity for all the items except 1 or 2 of them.
Ok, my english is poor and i dont know if can explain it better, hope you have understood ;)
and one more thing – i think that would be great to limit quantity number, because calculation will go wrong at big numbers. its not a bug, its just an offer.
Very Nice! This will come in handy as the majority of the stuff you post here.. thanks!
Looks really nice.
But a few suggestions (I haven’t looked at the code, but if it’s similar to the old one, so check this out:)
1. try generating some of the stuff with javascript. It’s VERY highly unlikely that someone that’s making an athletic yard to have JS disabled. Plus, it will save a lot of traffic.
2. the $ sign can be generated with css before or javascript, to reduce the markup (no more spans xD)
3. in PHP, instead of getting all of the rows and matching, figure out the zip code first, then select only that (you’ll know that you got it right if you got a response).
4. adding some PHP validation is very simple, even a little calculation that says “Trying to cheat is not nice” in case of mismatch between calculated value and what’s written in the final input.
Very good indeed though.
I just went to my rss feed and clicked on an article from css-tricks and when I went back, what did I see? An orange star favicon!! This is great!! Did you move from feedburner to wordpress and still manage to get your statistics or did you just forget the statistics over the great functionality of the favicon in the feeds? Either way, this is great! Thanks!
Hi there
Just downloaded the script after searching for days for just this type of thing…
Have a few questions…
1. Can the $ be changed to £ throughout
2. Can the shipping be removed completly?
3. Can the whole thing run on one single page?
4. I want to add delivery details underneath the form, can this be done, if so how.
5. I will not be using paypal, etc once the user hits send can this form be sent to two different email addresses and the user re-directed to a thank you page?
I look forward in your response!
hi, love the script but i’m trying to populate the order form with products from my inventory using php calls to populate the name and price fields.
however, when i then enter quantities and click submit order its carrying the total price and the product title ‘Multi Product Order’ through to the cart but not the product subtitles and quantities that were populated by php and should be displayed underneath!
please can somebody help??!!
hi chris
i am enthusiastic web designer and always follow css-tricks. i just come across the need of this kind of order form and thinking that if we can search the products by their name then you don’t have to go through products one by one. it will be helpful for this kind of multiple order as well as for single order as well. hope you will find the way out and it will solve my problems as well.
thanks
suman