osCommerce and jQuery
The past few days has seen me get back to grips with the latest stable version of osCommerce. There have been quite a lot of changes since I gave up using osCommerce, I was disappointed to say that the main problem of nested tables is still apparent.
I spent about 10 hours coding to remove out 80% of the tables. I'm using a combination of "h" tags and "div"s to create a more semantically correct layout.
I still have to have a think about making the forms look pretty using .css - I was sure that I had a good tutorial bookmarked, but I can't find it, I want to line up all the form elements using css.
Adding JQuery
Whilst I was making the changes to the codebase, I decided to have a tinker with jQuery. So far, I've added ajax to;
- shopping_cart.php - shows a "don't forget to press update" when a buyer ticks the remove box, or updates the quantity.
- product_info.php - ripped out a lot of the useless "extra info" like date product added, and hid them inside a "read more" div. Also added a lightbox to show the product image instead of having a dumb popup.
- login.php - dumped the "forgot password" page entirely and added the same info into a hidden div. They press a link and the forgot password functionality appears. Also dumped the "visitors info" page and put this into a hidden div as well.
- create_account.php - added a hidden div to explain about newsletter privacy if the newsletter tickbox is ticked!
- cookie_usage.php - added the IE only blurb into a hidden div. IE users only see this.
- advanced_search.php - placed all the "advanced options" into a hidden div which is shown if the person needs it.
It's looking good. Next up is to go through all the files again and rip out even more bloated code. Also, I want to see if I can get rid of the javascript bloat and have the same effect using optimised jQuery code - that'll be a challenge and a good learning curve.
Comment by jared — December 8, 2007 @ 1:27 am
Gary,
How many times do you figure that you'll actually re-use your work? There have been many times that I've wanted to make lots of changes to core code, contributions, etc but have just not taken the time since there would be very little time savings unless I used it often.
-jared
Comment by Chance — December 8, 2007 @ 5:22 am
I wouldn't mind seeing the changes you have made when you are finished- perhaps you could set up a demo URL and show us your de-tabled jqueried handiwork?
Comment by burt — December 8, 2007 @ 9:12 am
Jared; probably never. I have a oscommerce design contract coming up and wanted to get back to grips with the codebase.
Chance; http://www.yourfollicles.com - it's nowhere near finished, but would accept any views that anyone has.
Comment by SarahG — December 8, 2007 @ 5:33 pm
I've got a client with a couple of osCommerce sites and am often tempted to clean up so much of the code but I just can't justify the time unless she's prepared to pay me (and how can you convince a client that it would be beneficial?!).
Here's a good post on semantic forms and CSS by Dave - Form Layout.
Comment by Mike K-H — December 8, 2007 @ 7:31 pm
Is the osCommerce layout a long-established thing? It laods quickly, and seems to have good usability.
… in the Let's See What We Have Here page, I'd like to see a 'go back to Categories List' button rather than having to use the browser back button.
Nice layout. I like the idea of two left columns - one for standard products and one for specials, and the on-page display of the cart.
Comment by Mike K-H — December 8, 2007 @ 7:33 pm
…since I don't appear to be allowed to edit my posts, I'd better proofread them more carfully in future.
Comment by cannuck1964 — December 10, 2007 @ 4:21 pm
ever looked at this for updating and making the site more user friendly :
http://extjs.com
cheers,
Peter M
Comment by burt — December 11, 2007 @ 4:51 pm
I shouldn't have posted it up for review in the offical osCommerce forum - only 1 person got the idea that what I was looking for was comments on usability, more semantic coding, less pages, less javascript and so on. Most everyone seems blinded by the fact that the two columns are in the left of the site rather than on each side.
Anyway, thanks for your comments all. Appreciated.