Tabbed Products ''LITE'' version - Delimiter based

* LATEST VERSION AVAILABLE HERE:
http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=146

==============================**

So finally one of my zany ideas goes well. I finished version 1 of the Tabbed Products "LITE" for those who would like to use tabs, but don't want to add any new tables to their database and move all their products over to a new product type.

This "LITE" version is actually more advanced to some degree as it isn't limited by the amount of tabs you can have, where as the full version only added one new database table for extra stuff. This version uses a DELIMITER from the actual product description to create a new dhtml tab. PLUS you can change tab count and tab names for each product!

For every new tab you want, you simply format it like this:

<!--%Tab Name%-->

Also, because I'm using the <!-- to start the delimiter, The HTML ignores the ugly tag so you dont see it on the product page and I think that will prevent the froogle feed from generating the tag in the description as well.

An example product could be:

<!--%Product Description%-->

This product is great because it saves you time and money. Order today and get started with this terrific invention. We are sure you will not be disappointed.

<!--%Detailed Specs%-->

Size: 10x10x10
Shape: Square
Color: Red

This will make 2 tabs and put the respective text on that tab.

I've also added the option to include the Additional Images as a tab or as normal by editing the template file.

I need to quickly add some code to prevent tabs from showing if no tags are set in the description, so it will act like normal if you don't want tabs for a certain product.

I will post the contrib in the downloads section tonight after I test a bit more.

I will try to get a demo of it too.

Here is a demo site to check out the tabs

http://www.unbannable.com/zen/index.php?main_page=index&cPath=1

This demo shows tabs and non-tabbed items. They both use the same template layout, but one description has the tab tags added when i added the new product, and one does not, showing how you can decide what you want from the description

Nice job! Will be looking forward to adding it to the Downloads.

qhome:

For every new tab you want, you simply format it like this:

> 
> Also, because I'm using the <!-- to start the delimiter, The HTML ignores the ugly tag so you dont see it on the product page and  I think that will prevent the froogle feed from generating the tag in the description as well.

Cool qhome. Yes knowing how the integration of the tab code into the product description will impact Froogle and RSS mod feeds would be useful info. 

Whomever finds out first please post your results ;-)

Woody

Woodymon:

Cool qhome. Yes knowing how the integration of the tab code into the product description will impact Froogle and RSS mod feeds would be useful info.

Whomever finds out first please post your results ;-)

Woody

Just exported a froogle feed with EasyPopulate and it worked! No tags :) just the full text :)

Sorry for the delay.. I want to get it in the contribs area but I'm trying to make some prettier tabs

I will be excitedly waiting

hey dont worry about the look of the tabs, we are all going to have to modify them to our sites anyways. just worrk about making them as css based as possible. I know I know you are already doing that. but really that is all we need.

Well I decided to make a version 2 even before i released version 1 :P

Tabs are much prettier and they even auto-stack if there are more than will fit on the page. Its a completely different script and I am having a slight problem with the initial page load, it shows all the stuff on the first tab, but when you click another tab, it properly shows whats on that tab, and then when you go back to the first tab, it shows that tabs contents correctly.

Demo:
http://www.unbannable.com/zen/index.php?main_page=index&cPath=1

I wonder if it has something to do with the way I'm echo'ing the html stuff instead of ending the php ?> and using native html. But it looks fine in the source.

BETA RELEASE

Well, now I've added the ability to add the additional content to tabs or not. I've put all the configurations at the top of the tpl file that allow you to decide if you want Additional images, Product details (model/qty/stock), and Customers Also Purchased... as well as custom names for those tabs.

Demo updated:
http://www.unbannable.com/zen/index.php?main_page=product_info&cPath=1&products_id=1

Because of the way that the content of the Additional Images and Customers Also purchased is loaded by simply requiring the file... I haven't found a good way yet to hide the tab if there is no data. So if there are no additional images for a product, and you set that tab to true, then it will just load an empty tab.. or i could put some default text in place of it.

One Idea i had was to place those tab calls in the product description like the rest of the tags.. and if the code found those tags then it would load those tabs. But that could confuse the code in thinking you are making a custom tab or you might be updating files often if you start adding or removing additional images.

I think its good enough for a version 2, except for that damn first problem in the post above.

I will attach the file here those who want to help test it. It should be safe enough for production sites, it will just show all the info on the first tab at first. It doesn't do that when I load it as normal html.. but it started doing it at some point during my debugging and I can't figure out where or why.

Thanks for all the great work you're doing with this mod. This contribution is going to make the layout on product detail screen much nicer.

Two things:

1. When testing the demo on your site if I navigate from the Default Product Description tab to another one and then come back to Product Description it doesn't display the original view. However, if I refresh my screen it displays the rest of the information.
2. Can you please comment on which version of this contribution is a better approach to implement that will make it less of an headache for future upgrade. The Lite version doesn't touch any ZC stuff where as the one in the download section requires a DB table as well using a new product type if I understand correctly.

I love this mod and I am anxious to implement it but I want to get your opinion on which path to take.

Thank you!!!

Great looking tabs well done on that, although as you say you perhaps need a fix for the bug that shows all the items the first time the page loads. I am sure someone can help with that, if I could I would. If java script is disabled unfortunately the tabs no longer work, and clicked tabs are directed to pages not found.

Just a note, your signature contains three websites, one of which http://www.qhomezone.com menu doesn't work in FireFox, it works in IE however. Once again thanks for contributing this fantastic looking mod.

BlessIsaacola:

2. When testing the demo on your site if I navigate from the Default Product Description tab to another one and then come back to Product Description it doesn't display the original view. However, if I refresh my screen it displays the rest of the information.

Well its not supposed to. See..when you first load it, you should only see that first paragraph.. the rest of the stuff on that tab is actually the contents of ALL the other tabs.. but for some reason it loads it all on the first tab until you click another tab. Then when you go back to that tab, it properly displays the only thing it should display. The rest of the tabs work fine and correctly display the stuff they should.. but its that initial loading that I can't figure out yet. I am going to try another method of coding it to see where it goes wrong.

It doesn't really affect functionality or usage.. its just not behaving quite like I expected.

BlessIsaacola:

• Can you please comment on which version of this contribution is a better approach to implement that will make it less of an headache for future upgrade. The Lite version doesn't touch any ZC stuff where as the one in the download section requires a DB table as well using a new product type if I understand correctly.

The Lite version is really better. It may be a bit unorthodox because I'm using delimiter tags right in the main product description.. but it really is the most expandable, configurable, and should theoretically work with ALL future upgrades unless they change core variable names and constants.. which is unlikely.

It's also easy to customize and add features to because its all in one file instead of having files and database tables all over.

Pauls:

Great looking tabs well done on that, although as you say you perhaps need a fix for the bug that shows all the items the first time the page loads. I am sure someone can help with that, if I could I would. If java script is disabled unfortunately the tabs no longer work, and clicked tabs are directed to pages not found.
Good point. In the next version i will have to add some <noscript> tags.

Pauls:

Just a note, your signature contains three websites, one of which http://www.qhomezone.com menu doesn't work in FireFox, it works in IE however. Once again thanks for contributing this fantastic looking mod.

Yea (sigh) FF 1.0 used to work with it.. now the latest versions of FF dont.. who's to blame tho. it works in Opera and IE.. there always seems to be 1 of out the 3 that doesn't like to play nice. That menu is actually a contrib i made for the 1.2.x version and I no longer care about that site or maintain that contrib. But thank you for letting me know about that :)

wow, i really like these mod!:thumbsup: so, when we can downloaded it?! and i like the way you change the border that surrounding the add to cart button, can you show me hot to do just like that?:blush:

You can DL the beta on the bottom of the first page of this thread.

For the cart thing I just changed the stylesheet_new.css

#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 3px dotted #FF3300;
	padding: 1em;
	}

qhome:

Well its not supposed to. See..when you first load it, you should only see that first paragraph.. the rest of the stuff on that tab is actually the contents of ALL the other tabs.. but for some reason it loads it all on the first tab until you click another tab. Then when you go back to that tab, it properly displays the only thing it should display. The rest of the tabs work fine and correctly display the stuff they should.. but its that initial loading that I can't figure out yet. I am going to try another method of coding it to see where it goes wrong.

It doesn't really affect functionality or usage.. its just not behaving quite like I expected.

The Lite version is really better. It may be a bit unorthodox because I'm using delimiter tags right in the main product description.. but it really is the most expandable, configurable, and should theoretically work with ALL future upgrades unless they change core variable names and constants.. which is unlikely.

It's also easy to customize and add features to because its all in one file instead of having files and database tables all over.

Thank you so much for the clarification. I was definitely thinking along the line of "LITE." Like you said, it's going to be the path of least resistance to future upgrades.

This is a great contribution and great step in making the presentation side look more professional.

Now we just need a better review system like the Amazon and the likes :)

wow, you really know how to play with css! im amazed!:wink2:

For clarification only...
The read me states: "File Modifications: NONE!"

Yet the template file /includes/templates/custom/templates/tpl_product_info_display.php is indeed modified.

Most store owners heavily customize this file and understand this... but in case not.... if your "custom" templates directory (YOUR_TEMPLATE) already contains tpl_product_info_display.php be sure to NOT blindly overwrite it, as you will lose any previous customizations (many mods customize that file).

Instead do a compare and then merge.

Woody

Readme states:
"upload the included tabbedproducts.sql using the Zen-cart SQL Patches Tool"

Finished the file merge but discovered the SQL file for this mod was NOT contained in the v.2 beta distribution I downloaded (TabbedLite-v2-beta.zip attachment posted to this thread on 06.01.06).

Could someone please post the SQL? Much thanks.

Woody