osCommerce accessibility stinks
osCommerce default installation is a huge mess for accessibility. Every piece of code that the platform spits out has endless tables and poorly coded HTML — finding your way through the code is like trying to clear brush.
The simple solution to osCommerce accessibility is to install the Simple Template System and put together a XHTML/CSS’ed out template. That only solves one part of the problem, however, because your wonderful template is going to be wrapping around a whole slew of undesirable code.
Over a year ago, a client of mine wanted an osCommerce website. I wanted to create a masterpiece of accessibility. I tackled osCommerce head-on and re-wrote most of the code that creates the HTML. It was a nightmare, but I created a nearly validating eCommerce website with osCommerce.
The experience was so scarring that I haven’t yet written about it 🙂 Nearly every file was affected, so upgrading it would be a nightmare, but it’s truly an effort of love.
KWD presents: a nearly validating, tableless osCommerce website
Looking at this site after so long, it’s pretty crazy the amount of work I put into it. And get this: for the complete website (including design, breakdown, and customization of osCommerce), I only charged $2,000. Those were the days 🙂
Most of the products are default osCommerce, so the images look really small. Check out the Keyboards category for a few I added.
This project involved so many changes to the core that it’s pretty silly when looking back on it.
Some of the major changes I made:
- Improved the checkout process and user account page design & flow
- Lightbox integration (some image paths don’t work on this mirror site)
- Integrated product reviews on the product page, rather on its own page
- Created breadcrumbs and page titles that are SEO friendly and actually reflect where you are
- Created unordered list navigation that shows category children — the same code creates the drop-down navigation and the sidebar nav
- Rewrote the checkout process and account registration HTML (try signing up for an account!)
- Rewrote the pagination code to include more information through title tags, ie: “Displaying Results 1-6” and “Results 7-10” and “Previous 6 Results”
It’s still got some minor code issues before it fully validates (I was close on the live site — only one issue — but on the mirror site there are a few). If anyone knows how to modify the BASE tag in osCommerce, please let me know — I couldn’t find where it was generating!
If you’re interested in any of the files, let me know. Please leave your feedback, comments, criticism…I’d love to know what you think!
9 replies on “Tableless, accessible, nearly validating osCommerce — Rewriting the beast”
So there’s another kid on the block it turns out: Tableless osCommerce Addon…but of course I think mine was harder to do 🙂
STS is the worst template system around but typically chosen by HTML designers who cannot program.
Nearly validating is meaningless.
SERP is the only thing that counts and osCommerce can get page #1 without any need for that kind of purist approach to code.
oh and nice site
http://rockymountainbaggers.com/
What’s your problem? Wrong side of a creaky bed?
If STS is bad, what is better?
Been working on a similar project myself, so congrats for your progress it’s truly a labour of love.
I’ve redone the navigation framework, and rewritten the box class, categories list etc. but still have a lot of work to do for the remaining inner content.
If I could go back would I start again?
No!
Hi , my friend .I also hv to do the job .How can we solve this ?tell me ?
Cata
@hi — Do you absolutely need to? Seriously, it’s easier to start with an accessible ecommerce solution than to work with the outdated osCommerce code.
ok heres the facts! accessibility is about, err, accessibility and not seo.
ppl are right you can get 1st page serp using oscommerce, however any web designer that has translated table based html to css xhtml (tableless) will tell you that the site INCREASD in terms of page rank.
time after time we see this fact in what we do.
thats not to say that we have an accessible version of OSC! personally i am trying to wrap up most of the code in classes, so you can do somthing like:
//display products
$products=eng->getproducts_as_array();
//now loop through and display products.
if you need a oscommerce
webwinkel, go2 My
Webshop