Nested Tables in osCommerce

Because osCommerce was originally conceived in the late 90s/early 00s it was written without much thought to the underlying codebase – which is why everything is created using “tables”. So, I thought it might be nice to have a recurring series of posts showing how to get rid of some of the tables from osCommerce.

Why would you want to do this?

For starters, pages with less code will show faster in peoples browsers – these days, with lots of people having broadband, it’s not so important. Another reason would be for accessibility and usability – both very important these days. And, another reason, is just to make pages easier to understand (underneath the hood). And, possibly the most important reason – make our code more semanticvally correct which will benefit SEO (Search Engine Optimisation)

Let’s start with a simple page – shipping.php

These basic “info” pages, are solely used for showing information – so it’s easy to visualise the code. These pages show 3 things:

1. HEADING_TITLE (the heading – from the language file)
2. TEXT_INFORMATION (the content that is inserted in the “language” file)
3. A button that allows the reader/user to return to the default index page.

For these three items, I count five tables only being used for “alignment” purposes. So let’s get rid of them.

The code

Find this:

[php]

‘ . tep_image_button(‘button_continue.gif’, IMAGE_BUTTON_CONTINUE) . ‘‘; ?>

[/php]

Change it to this:

[php]

‘ . tep_image_button(‘button_continue.gif’, IMAGE_BUTTON_CONTINUE) . ‘‘; ?>

[/php]

Find this:

[php]

[/php]

Change it to this:

[php][/php]

Find this:

[php]

[/php]

Change it to this:

[php]

[/php]

So that the middle bit of the file now looks exactly like this:

[php]

[/php]

As you can plainly see, we’ve reduced the codebase by a good 25 or so lines of code already. The next thing that we need to do is open up stylesheet.css and add this:

[php]#button { text-align: right; padding-right: 10px; }[/php]

This will align the button to the right and indent it a little from the right hand side – so it looks just as it should compared to “normal” oscommerce.

How easy was that to remove 25 lines of code from just 1 file. If you could do this across the rest of the 40 or so “base files” (being product_info.pgp, index.php etc) you’d save yourself around 1000 lines of useless, unwanted, unneeded code.

In future posts I’ll look at other areas where code can be saved – including the functions, classes, modules, boxes and so on. I know that over time, we can recode the entire oscommerce codebase and save THOUSANDS of lines of code.

3 Replies to “Nested Tables in osCommerce”

  1. We’ve had the non-checkout pages free from tables for quite a while but, if I had to do it again, I’d probably jump out a window.

    When creating our Tableless XHTML/CSS rewrite of osCommerce, one of the very first things we did was to kill the box class, eliminate all the tr/td … td/tr from the tops and bottoms of boxes and rewrite each of them with the simple H3 headers and, when appropriate, UL/LI tags (e.g. for the categories).

    That done, we did the painstaking job of eliminating every single one of tens of thousands of table-related tags.

    In the /includes/ folder, we created a series of files that were prefixed by a_ so that they would show up at the top of the list: a_left.php, a_right.php, etc. Everything that was supposed to show up before the center content column we included as apg_top.php and everything that showed up after was grouped into apg_bottom.php.

    From there, it was a matter of sticking the DIV tags in the right places in the s_filename.php files, then wrapping the center contents into their own DIV tags.

    The file sizes were immediately reduced down to about 20 – 33% of the original sizes and, further, the SEO factor went up dramatically with H1, H2, P and B content at the top of the source code and less important keyword content at the bottom.

    The logo banner area was made into a DIV with a background graphic, then H1, H2 and P introductory text was included right from the contribution, “Header Tag Controller” with a rewrite that we’ve been calling, “Rasa Infusion”

    One client we sold the code to reported an increase in traffic of 219% in the first two weeks after the launch of their redesign with our CSS osCommerce. Another, a designer, reported that the time from start to finish on a project was cut down to 10 days for custom, no template web sites.

    Hope this comment helps. We’re already moving on away from osCommerce with a new application that’s still under development: I’ll miss the good ol’ days. 😉

    Sean Rice
    Rasa Design Studio
    http://www.rasadesign.com

  2. I have been playing with osC and been working on getting rid of the tables and moving more to CSS. I found the exact same thing as you. The tables on those pages are not needed and the 3 lines of code in the middle is what makes the page work. The rest can be done with CSS for fonts, borders, margins, etc. Even index.php (main page) really only needs 3 lines or 2 if you take out the new products box (heading and everything else).

Leave a Reply

Your email address will not be published. Required fields are marked *

‘ . tep_image_button(‘button_continue.gif’, IMAGE_BUTTON_CONTINUE) . ‘‘; ?>