Tabbed Information in the Product Info page

By | March 23, 2011

Sometimes it is desirable to split blocks of information up, to make it more readable. A good example would be a product that needs “technical specs” – example.

In osCommerce there is only 1 input box for the products description – so we need to think a way to separate the inputted information. I was pointed at this contribution by one of my good clients running on a 2.2 shop – this contribution uses webfxtabpane to show the tabs, based on some custom coding in the products description field.

It ends up looking like this;

The image above is taken from the download. The tabs are ugly in the extreme in my opinion, and the tabpane system is rather outdated I think.

My idea was to juice those tabs up using the jquery UI. A small coding change in product_info.php (as well as the addition of jquery ui backported from 2.3.1 to 2.2) allows the output to look like this;

Much nicer, much cleaner and more useable!

6 thoughts on “Tabbed Information in the Product Info page

  1. Paul

    I had a play with this for our site and used the method shown at to create the tabbed product page. Didn’t have the nice rounded tabs though.

    I think it’s a much nicer way to present information and for us, I want to add reviews to one of the tabs to show as much information as possible in one easy place.

  2. Gary Post author

    Paul – good thinking to add the reviews as a tab. Options/attributes could also be on their own tab. Images also maybe.

  3. Paul

    I have also thought about changing/amending reviews to ratings with the JQuery stars, much nicer way of doing things I think.

    In my plan, the tabs would be Product Description, Reviews, Write Review, Ask a Question (Where they can submit a question to us and answers would show up under that tab).

  4. Mommaroodles

    I’ve implemented the tabs on my product information page – same one that can be found here

    I also wanted to have the reviews on one of the tabs – but show a max of say 5 reviews – but the problem I’m having is that no matter what I do I can only get one review to show – apparently it has something to do with while loops, unique ids etc and I dont know how to fix it 🙁

  5. Gary Post author

    I’ll dig thru my code to find the reviews thing I did.

  6. Mommaroodles

    Thanks Gary – that’ll be awesome 🙂 my osc code works great when it’s not in the tab – just when I put the code in the tab – basically what I was trying to do is pull the reviews from the database to a max of 5 and if no reviews then ‘Be the first to review’ 🙂

Leave a Reply

Your email address will not be published.