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

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.

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)

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

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

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

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!

ahh i see... well that is more of a custom layout in itself. Now if you did have that layout, you should be able to simply put the tab block code in there and it should work. Do you have an existing template that has image to the left and description to the right?

I currently have the image to the left, all buttons to the right and the description below.

Thanks for your hard work qhome. Looking forward to testing out your new beta version.

Cheers, Jamey

Berserker:

I currently have the image to the left, all buttons to the right and the description below.

Keep in mind that Zen-cart uses a 95% div-based layout. Meaning that you can manipulate the layout of the product page using just css.

Take a look at https://www.csszengarden.com (not related to zen-cart). You can see there how people have taken the same simple div-based page and using only css have created hundreds of different looks, all without changing the page code. At some point I hope ZC makes it this easy. The problem however is with fallibility of "the holy grail" 3-column layout and the existing table based structure in place of it that prevents it.

I was sure to give the tab block a div id (id="tpptabBlock") for that reason. So if you have some css experience, you can easily change things around.

I have this > //BOF :: Tabbed Products Pro :: ?> On every page...

"http://www.allforyourwedding.com/~noah/index.php?main_page=product_info&cPath=242&products_id=1652

milobloom:

I have this On every page...

"http://www.allforyourwedding.com/~noah/index.php?main_page=product_info&cPath=242&products_id=1652

Ahh.. yes sorry.. i see it in my demo too. hold while i fix it.

Ok fixed:

22-Jan-2008 - v0.3BETA - qhome

* Removed extra ?> tag that was causing some php comments to show on product page
* Minor change to the Additional Images tab check to use the official additional images module to check instead of a localized version.
* Files Modified:
      o templates/tpl_product_display_info.php
      o module/tabbed_products_pro.php
      o doc/readme_tabbed.html

New version attached.

Did you say there was a way to make the Attributes Tab a different color?

Otherwise, Its looking great! We opted for putting the Add to cart on every tab so we want the attributes tab to stand out.

Also, The product number is appearing on the bottom of my description. How do I get rid of that?

milobloom:

Did you say there was a way to make the Attributes Tab a different color?

Otherwise, Its looking great! We opted for putting the Add to cart on every tab so we want the attributes tab to stand out.

Also, The product number is appearing on the bottom of my description. How do I get rid of that?

The product number isn't related to anything that I did, although I am using the 1.3.8a template file as my base so maybe it is something new in 1.3.8a. I think there might be a menu in the admin area to turn it off.

From the look of your wedding site, it looks like you don't have add to cart on a tab at all. It appears to be at the bottom of the tabs so that it is always visible, which I think is best. But I do like the way the attribs worked out on the customize tab :)

For different tabs, I include additional images in the images folder. I used to have different stylesheets for each set of images, because the images weren't always the same size so they each needed different positioning parameters.

I am trying to do away with having multiple stylesheets as that can be confusing. But I need to make the images of the tabs all the same exact size so that one css can work with all the included tab images.

You can check the images folder in your template to see some other colors.. but I also have a few more that I might like to convert. If you would like those colored tabs for now, let me know and I will give u the stylesheet that works with them until I take the time to resize them all to be the same.

What I am looking for is to make JUST the attributes tab a different color. Would that be possible? Or would that need a style sheet change?