Tabbed Products ''LITE'' version - Delimiter based

OK I just installed this mod, followed the readme instructions however nothing happened to my productinfo page. I guess I don't understand which files I need to edit, as this is not declared in the readme file

From your current readme.txt file ...

USE:

To create a tabbed view for your items, you must use the proper tags. 
This: <!--%  is the opening tag
This: %-->  is the closing tag
Anything in between is the title of the tab.

Example:

<!--%Product Description%-->
This is the main product description.
<!--%Extra Specs%-->
This is where you can add custom stuff as you wish. You can have as many
tabs as you want.
<!--%BlahBlah%-->
This is another tab named BlahBlah

You will note no mention of which file and where to edit?

I think what I am supposed to do is edit the HTML description field in the Admin part of the shop, per product?

Indeed that is so, what would be great is if you included the HTML from your demo ADMIN section, so that it is more obvious, as an example of course?

I guess maybe I could be a little more clear on that. I do mention in at the top a bit more:

WHAT DOES THIS CONTRIB DO?

TabbedProducts-LITE contrib allows you to change the look of your product info screen to use a tabbed display using DHTML for a professional look. It is named LITE, but it is indeed quite powerful and customizable.

It's called LITE because this version needs no database changes, nor are there
lots of extra files to deal with. The bulk of the functionality is in one template file. It is simple to install, use, and customize. Tabs are created dynamically based on tags entered right in the main product description page in the admin area.

I will add something more descriptive to the USE area. thx

Great stuff, as I say I think the readme would benefit from your example HTML in admin, I reckon if you placed that in the 'Useage' part of your readme that would help a lot.

Great work fella!

Also, how does easypopulate cope with it, do you know? In other words would the tabs need to be re-entered once a file was say manually offline and updated via data file and then uploaded again to the server?

OK I tested easypopulate, it appears to work fine.

OK the gifs supplied should probably have a transparent background, currently they have white, and the corners appear and spoil the effect if you change the background colour on your info page.

Also I don't know how those other tabs 'products purchased' and 'customers also purchased' etc appeared. This should perhaps also be made clear in the readme.

thanks.

Nice work sir!:smile:
Is there any way to fix the width of the tabs at all?
Example the detailed specs tab on this demo
http://www.unbannable.com/zen/index.php?main_page=product_info&cPath=1&products_id=1
Makes the page much wider, I guess due to the length of the text in the tab.

Qhome-

Is really looking good! It fails validation though :( http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.unbannable.com%2Fzen%2Findex.php%3Fmain_page%3Dproduct_info%26cPath%3D1%26products_id%3D1

I took a quick peek and most of the errors are because of duplicate IDs, those can be overcome by building unique IDs with php.

:thumbsup: I agree this will be a very popular addition.

Pauls:

OK the gifs supplied should probably have a transparent background, currently they have white, and the corners appear and spoil the effect if you change the background colour on your info page.

You're probably right.. But transparent images is like my kryptonite.. last time i tried making something transparent it turned green on me.. Would someone like to transparencize these for us? :)

Pauls:

Also I don't know how those other tabs 'products purchased' and 'customers also purchased' etc appeared. This should perhaps also be made clear in the readme.

This is also in the readme.. Under the USE heading. After it gives the example of how to use the tags it says those tabs can be edited in the included tpl files at the top to enable or disable those tabs.

The new readme I'm making for the release version is a little bit clearer and is in HTML so i can show graphical examples and expand things a bit.

Reesy:

Is there any way to fix the width of the tabs at all?

The tabs are autosized based on the text inside them, otherwise they could cut off some of the text. But most of this should be editable from the CSS file

Kim:

I took a quick peek and most of the errors are because of duplicate IDs, those can be overcome by building unique IDs with php.

Hmm well i changed from word ID's to number ID's because of the For Loop I was using, so I was auto-incrementing. I never knew it was that picky that a number couldn't start an ID label. I can easily add some text in front of that. Thanx for the heads up. I will put a name before the number in the Release version

Glad you guys are enjoying it so far! :)

OK in the morning I will get to working on the transparency thing!

OK I got the tabs contrib up to par with the validator. No more errors on that site ... at least not for my contrib.

There is some difficulty creating the transparent images for this, the long background images are where it seems the issue is. I found a good article on using no images whatsoever and instead using javascript and css to produce the magic.

Click the link

I think that might be an option? Especially nifty tabs #4

Hmm well i got the unfocused tab right side to go transparent:
http://www.unbannable.com/zen/index.php?main_page=product_info&cPath=1&products_id=1

it looks like i may have to cut part of the right image off.. or maybe pad it so it doesn't fall behind the left side image.. cuz thats the problem with the left images.

Pauls:

There is some difficulty creating the transparent images for this, the long background images are where it seems the issue is. I found a good article on using no images whatsoever and instead using javascript and css to produce the magic.

Click the link

I think that might be an option? Especially nifty tabs #4

Please refer to the updated version of the above: Niftycube

For more of Rounded Corners of similar approach, also with easy implement, please refer to:
1.
RUZEE.Borders
2.
Transparent custom corners and borders

.

:unsure: How come I can't see the tabs in IE and I can see them in FF?

barco57:

:unsure: How come I can't see the tabs in IE and I can see them in FF?

I see the tabs in FF, Opera, and IE.

Nope still can't get your demo site to show me the tabs in IE:wacko: Must be something stupid but I can't seem to figure it out

Here's an idea.

To make things more customizable.. I could add some hardcoded tags that tell the template page to load certain sections as tabs, instead of doing it globally from the tpl file.

For example... instead of setting the true/false bit inside the template configuration, I could set it up to search for certain tags that you would put at the bottom of the product decription.

example:

Text Above the tabs
<!--%TabName1%-->
Hello this is tab 1
<!--%TabName2%-->
Hello this is tab 2
<!--%TabName3%-->
Hello this is tab 3

<!--%AdditionalImages%-->
<!--%ProductDetails%-->
<!--%CustAlsoPurchased%-->

The last 3 tags would activate those items as tabs. If you omit certain ones, then they appear down where they normally would.

This would allow you to set those 3 on a per product basis instead of globally as well.

Thoughts?

No problem here in IE 6.

.

seethrou:

Please refer to the updated version of the above: Niftycube

For more of Rounded Corners of similar approach, also with easy implement, please refer to:
1.
RUZEE.Borders
2.
Transparent custom corners and borders

.

The problem with nifty cube, is that it uses targets instead of id's to display the tab data. So each time you hit a tab in FF or Opera, it records it as a whole new page.. so if you click 5 tabs.. you have to hit the back button 5 times to go back to the REAL previous page. Try it here: http://www.html.it/articoli/niftycube/index.html (nifty tabs #4)with each browser. Oddly enough, IE is the only one that actually handles it properly.

hi Q,

what are the differents between these Lite version with the one that you already uploaded to the ZC downloadable section?! :thumbsup:

tajul_ashyqin:

hi Q,

what are the differents between these Lite version with the one that you already uploaded to the ZC downloadable section?! :thumbsup:

That version I hope to get removed. It is the original idea that I had for tabs, but it is very limited because you have to add a new database field for each tab you want, which currently only supports one extra tab. I will no longer be maintaining or supporting that version.

The idea behind this version came to be in a dream :P And it is based on Delimiter tags that the code parses and splits. It creates a tag for each tag that it finds. Tags are entered right through the admin panel when you are creating or modifying your product description.

There are no database changes... and everything is handled from a single template file that uses the product info, so you can customize each product with any amount or name of tabs.

Recently I made the addition above that I was toying around with, that lets you add the core tags to the product description so you choose from there which products set the additional images. product details, and customers also purchased as tabs.

I will upload the "release" version today to the contrib area.