Tabbed Products Pro (TPP) Contrib - Official Thread

New Release:

Tabbed Products Pro is the superior replacement of Tabbed Products 'Lite'. I have completely rewritten the tab code to make the tabs more optimzed, use less files, and be easier than ever to instantly tab your products display page. Although it is now actually more "lite" than ever, I feel that pro is a good evolutionary step in the naming convetion. I also renamed it so that we could get away from that old TPL thread as it was getting a big large and unruly. A new contrib name and a new thread to go with it for a fresh start.

Some Features of TPP:

• Global tabs can be set from the Admin configuration area to apply tabs instantly to all products
• Tabs can also be added manually to product decriptions
• All tab calculations are in the module file only. No more additional template files.
• There are only 2 little code snippets required to add tabs to your custom layouts, or use the included product template.
• Fully w3 validated
• Reverts back to normal view when javascript is disabled
• Does not change any data, leaving SEO, Meta, and product information intact.
• Uses built-in Zen-Cart modules for creation of Zen-based tabs. Should prove transparent to future ZC releases.

TPP uses a completely new method of tabbing. Instead of relying on PHP checks to see if a tabbed version of a module needs to be used and the non-tabbed version needs to be skipped, the new tabs use some extremely creative javascript to create the tabs, and hide the rest.

View a demo

The first version is a BETA. It has been fully tested but I just know someone might find some little snag so I will give you guys a chance at it before I make it a full final release.

I'd also like to hear your comments, questions, advice, and/or insults as you what you dislike or would like to see in future versions.

It is important to note that you MUST remove all old "Tabbed Products Lite" files before using Tabbed Products Pro. Or at least the javascript file, but its just good to get rid of all the old stuff.

To figure out which files they are, simply refer to the Tabbed Products Lite 3.8 download.

I have few comments, not about the approach used - which seems fine - but about its comprehensibleness! My comments are based on the demo, so it's possible that there are some options that I have missed - if so, I apologise in advance.

First though a small gripe, which may be outside your control. The first time I viewed the demo it took several seconds for the javascript to kick in. I guess the whole page plus javascript needed to be downloaded before the javascript could be executed. But it felt a bit odd when a page I was starting to read, suddenly reorgnaized itself and image that I had been looking at (an also puchased product) disappeared. To a customer I suspect taht this would feel like something had gone wrong.

The main issue for me is that this seems to breach some of the golden rules of e-commerce. Top of the list is that the buy (or in the demo "add to cart") button is not big, bold and unmissable - it's hidden in tab 4. I'd bring this back out and onto the main part of the page.

I'd bring the also purchased out too. Its purpose is to upsell the customer and that gets lost if we have to rely on the customer going to search for it.

And finally, I'd bring the attributes out too. At the moment somebody who wants to buy a product and goes and adds it to the cart may be completely unaware of the options available (including those that are effectively upsells) and if they make a mistake and don't choose them first, have to delete the product out of the cart and start again (though there's a mod to allow return to the product info page).

So, overall, I like what you've done, but would recommending restricting it to the informational aspects of the product (description, info, reviews) and excluding the transactional (choose options, buy, upsell).

Quote:

---

Originally Posted by kuroi

First though a small gripe, which may be outside your control. The first time I viewed the demo it took several seconds for the javascript to kick in. I guess the whole page plus javascript needed to be downloaded before the javascript could be executed. But it felt a bit odd when a page I was starting to read, suddenly reorgnaized itself and image that I had been looking at (an also puchased product) disappeared. To a customer I suspect taht this would feel like something had gone wrong.

---

Yea, this was a last second thing that I changed. It used to load right away but I was trying to see if maybe it was better to load the page first, then load the tabs. I too think that loading them right away is a better idea. I'll put that back to instant in the next version, instead of waiting for the page load.

Quote:

---

Originally Posted by kuroi

The main issue for me is that this seems to breach some of the golden rules of e-commerce. Top of the list is that the buy (or in the demo "add to cart") button is not big, bold and unmissable - it's hidden in tab 4. I'd bring this back out and onto the main part of the page. I'd bring the also purchased out too. Its purpose is to upsell the customer and that gets lost if we have to rely on the customer going to search for it. And finally, I'd bring the attributes out too. At the moment somebody who wants to buy a product and goes and adds it to the cart may be completely unaware of the options available (including those that are effectively upsells) and if they make a mistake and don't choose them first, have to delete the product out of the cart and start again (though there's a mod to allow return to the product info page).

---

You maybe not be familiar with TPL (tabbed products lite), as that "WAS" what I made sure of. I put code in there to always ensure that Add to Cart, Attribs, and Qty Discount were on the first tab, even if it was a custom tab. But over the last hundred pages, there were constant requests from people to be able to put each of these on their own tab. So they asked for it, I just implemented. Don't shoot the messenger... err programmer... :P (Tho I think most stores that have tabs do have the Also purchased stuff as a tab.. I don't know if thats all that dangerous)

Quote:

---

Originally Posted by kuroi

So, overall, I like what you've done, but would recommending restricting it to the informational aspects of the product (description, info, reviews) and excluding the transactional (choose options, buy, upsell).

---

Keep in mind that any of those tabs can also be set to non-tabbed and go back to their original position from the admin section. So it's not as if they are all locked into a tab. You can certainly set it up like:
Tab1 - Product Description
Tab2 - Product Details
Tab3 - Additional Images

and have AddtoCart, Attribs, and Customer Also Purchased under the tabs in their normal positions.

or you could do

Tab1 - Product Descritption
Tab2 - Customers Also Purchased
Tab3 - Reviews

and have Add to Cart, Attribs, Additional images, and cross sell on the bottom in their normal position.

It is completely up to the store admin now, I don't want to tell people how to run their store anymore.

Prediction: People will realize what you and I are saying here and in the next version they will all be like "can i have add to cart on same page as attribs!!" and thats just the reality of ideas vs on-paper.

But TPP is very easy to modify things like that now, aside from using manual tag edits in the product description to add/combine modules on the same tab, you can also make minor code changes to globally apply that.

Ok, I've updated the demo with instant loading tabs now instead of waiting for the page to load.

Fair comments and I think we're actually on the same page. I've now peeked behind the scenes and seen the configuration available and I think we work the same way: keep it light, make it flexible, offer all the options, hope that people use them wisely.

So my earlier comments would be better aimed at users of your excellent mod and boiled down to "don't hide your add-to-cart button!"

So is the link provided the latest version?

The link you have in your signature is not updated (It goes to the lite version)

Now I know this would probably be a bit of a re-write, However.
Would it be possible to make things best for all worlds.
Global Options for each tab? This way I suppose I can put the
Add to cart on the first page (Description) and the tab for attributes.
Now, to combat the confusion. My next thought was to ask how to change
the color to the attributes tab to a color like yellow to make sure that it
was noticed.

Hi,

Is it possible to have the description etc. (in tabs) beside the image with this version?

Regards

Quote:

---

Originally Posted by milobloom

So is the link provided the latest version?

The link you have in your signature is not updated (It goes to the lite version)

Now I know this would probably be a bit of a re-write, However.
Would it be possible to make things best for all worlds.
Global Options for each tab? This way I suppose I can put the
Add to cart on the first page (Description) and the tab for attributes.
Now, to combat the confusion. My next thought was to ask how to change
the color to the attributes tab to a color like yellow to make sure that it
was noticed.

---

The use of global sub tags isn't (yet) supported. However, I did make it quite easy to change the code to do that. Simply by copy/paste one variable in the module file. I can help with that if that is what you like.

As far as the tab colors. They use image files that are also included. By default i have the tabs set to use the silver tabs style. But you can edit the stylesheet_tpp.css file to change the tab images to a different image. Check the images folder for other colors.

You can also change the stylesheet_tpp.css to make different hover colors and fonts.

And finally, you can edit the tpp languages file and use html right in that file and that will apply to the tab names. So you could change the text for Attributes to <b><font color="#FF0000">Attributes</font></b>

I've also updated my sig. thx

Quote:

---

Originally Posted by Berserker

Hi,

Is it possible to have the description etc. (in tabs) beside the image with this version?

Regards

---

Are you referring to being able to have the Main image on the tabs with the product description? Like this example I actually removed that option as a way to make things easier in the code. But after I came up with the magic javascript version, I didn't think about adding it back in. I wasn't sure if anyone used that option. I will take a look and see if it would be easily added back in.

-=-=-=-=-=-=-=-=-=-=-=-=-=-

Latest version is attached:
Minor Fixes:
- Load the tabs instantly instead of waiting for the page to load.
- Added instructions on how to add tabs to existing tpl_product_display_info.php files
Files Affected:
- /templates/tpl_product_display_info.php
- /jscript/jscript_tpp.js
- /modules/tabbed_products_pro.php
- /doc/readme_tabbed.html

Quote:

---

Originally Posted by qhome

Are you referring to being able to have the Main image on the tabs with the product description? Like this example I actually removed that option as a way to make things easier in the code. But after I came up with the magic javascript version, I didn't think about adding it back in. I wasn't sure if anyone used that option. I will take a look and see if it would be easily added back in.

---

I was refering to the layout like in the attached image. At the moment, I have the details below the image so there is a bit too much empty space. Just wondering if this can be done, if not or it's too much work, please don't worry. Thanks for this great mod!