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!
I had a play with this for our site and used the method shown at http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery 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.
Paul – good thinking to add the reviews as a tab. Options/attributes could also be on their own tab. Images also maybe.
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).
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 🙁
I’ll dig thru my code to find the reviews thing I did.
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’ 🙂