Tabbed Information in the Product Info page

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 Replies to “Tabbed Information in the Product Info page”

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

  2. 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).

  3. I’ve implemented the tabs on my product information page – same one that can be found here http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

    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 🙁

  4. 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. Required fields are marked *