Tabbed Products ''LITE'' version - Delimiter based

*** LATEST VERSION AVAILABLE HERE:
http://www.zen-cart.com/index.php?ma...roducts_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:

Code:

---

<!--%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:

Quote:

---

<!--%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....=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.

Quote:

---

Originally Posted by qhome

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

Code:

---

<!--%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.

---

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

Quote:

---

Originally Posted by 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....=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....&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.

Quote:

---

Originally Posted by BlessIsaacola

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.

---

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.

Quote:

---

Originally Posted by BlessIsaacola

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

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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

Code:

---

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

---

Quote:

---

Originally Posted by 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

But now I also see in readme:

"Database Modifications: NONE!"

Yep... Me all confused now. ;-)

Woody

LOL this is what happens when you re-use the readme from the original TabbedProducts contrib I made. :) Please ignore the line about database modifications.. there are none.. i just overlooked that line.

As far as the file modifications. Yea I thought about that too. I guess I was thinking more about core file overwriting. But you are right, this does overwrite that one file.

If only we could get the forum admins to understand why we need never-ending post editing, this could be easily fixed... but.. the 5 min limit has passed.

hey Q-

1. I concluded no db patch is required. (as stated early in this thread).

2. I discovered that any product description text (e.g. subhead text) positioned above <!--%Product Description%--> is not displayed. :(

Can this mod be modfied to allow subhead formatted text at the very beginning of the product description to display adjacent to the product image (not in a tab), and then display the remainder of product description text in the tabs. Right now it appears to be an all or nothing proposition.

3. On the default 1.3.0.1 product page layout, the tabs are clustered together floating by themsleves, just to the right of the product image, far above the product decription text box as should be expected. Not how they appear on the demo website.

4. Also the mod auto generates three tabs "product details, "customers also purchased", and "additional images". You mentione this in the thread but I'm am not aware of the correct method to disable these tabs?

I am sure this will be cool mod when all the kinks are worked out. Let me know if you release another beta as I would like to assist testing. In the meantime I will need to remove so I can put the updated shoppe into production.

Thanks, Woody

Quote:

---

Originally Posted by Woodymon

hey Q-

2. I discovered that any product description text (e.g. subhead text) positioned above <!--%Product Description%--> is not displayed. :(

Can this mod be modfied to allow subhead formatted text at the very beginning of the product description to display adjacent to the product image (not in a tab), and then display the remainder of product description text in the tabs. Right now it appears to be an all or nothing proposition.

---

Never thought about putting text before the tabs. I will look into getting that to work.

Quote:

---

Originally Posted by Woodymon

3. On the default 1.3.0.1 product page layout, the tabs are clustered together floating by themsleves, just to the right of the product image, far above the product decription text box as should be expected. Not how they appear on the demo website.

---

Hmm. the file itself controls the layout, Im not sure how you have tabs on the default 1.3 product page layout. Or are you trying to merge the changes into your custom tpl file? There are quite a few changes to that file and I haven't yet worked on steps to merge. I will try to get that going for the next version.

Quote:

---

Originally Posted by Woodymon

4. Also the mod auto generates three tabs "product details, "customers also purchased", and "additional images". You mentione this in the thread but I'm am not aware of the correct method to disable these tabs?

---

I think i put in the readme that you can edit the tpl file and at the top you change the 'true' to 'false'. Maybe in my haste I omitted that from the readme.

Will your contribution work with the tpl_product_music_info_display.php template or you're only supporting the generate template. The reason I asked is I am actually interested in using this mod to control my music product type. For example on this product page: http://www.clevershoppers.com/reach-...d-pmi-455.html I can see leaving the descriptions in one tab and the track listing with music sample in another tab. Thoughts?

Thanks!

Thanx ghome

1. I merged my changes into your provided template file. It was a very straight forward process as you have documented everything very well!

2. Off the top of my head the mods I am using which affect the product_info_display page are IH2, Cross Sell and Ask A Question.

It appears that the size of product image I am displaying is pushing the tab text content area down, but the tabs themselves remain floating above.

That is it appears the vertical positioning of the tabs is not 'liquid' depending on the size of the product image. But the area where the product description content is displayed is indeed liquid and displays below the product image.

Increase the size of the CD product image on your demo site to understand what I am stating. I

3. Yes allowing the subhead text (top portion of the product description text) to display above of the tabs is a MUST have feature ;-)

4. And oops... I did miss the part in the readme where you explained to set the three tab variables to true/false. I see it clearly now. Thanks for the follow-up. Look forward to the next update.

Woody

GREAT NEWS!! I FINALLY figured out why everything was displaying on the main tab.. Took me 3 hours to dissect the entire code change and find it was one display property that I didnt adjust for in the FOR loop *smacks head*. But that part is working perfectly now.

Quote:

---

Originally Posted by BlessIsaacola

Will your contribution work with the tpl_product_music_info_display.php template or you're only supporting the generate template. The reason I asked is I am actually interested in using this mod to control my music product type. For example on this product page: http://www.clevershoppers.com/reach-...d-pmi-455.html I can see leaving the descriptions in one tab and the track listing with music sample in another tab. Thoughts?

Thanks!

---

Currently its only for the normal "general" product. I suppose I could make one for each of the default product types. I'm trying to see how much effort it would be to make it a mergeable thing so it can easily be put into other product types. ideas are welcome.

Quote:

---

Originally Posted by Woodymon

2. Off the top of my head the mods I am using which affect the product_info_display page are IH2, Cross Sell and Ask A Question.

---

Hmm yea i dont have those on my site so i hadn't tested with them. I think they can still be merged tho to show up in their normal places, just not as a tab unless I can make the code a little easier to modify and add to.

Quote:

---

Originally Posted by Woodymon

It appears that the size of product image I am displaying is pushing the tab text content area down, but the tabs themselves remain floating above.

That is it appears the vertical positioning of the tabs is not 'liquid' depending on the size of the product image. But the area where the product description content is displayed is indeed liquid and displays below the product image.

Increase the size of the CD product image on your demo site to understand what I am stating.

---

Yea i see this too. There is actually a series of <br /><br /><br /><br /> that I added to the code to force it to move down farther, but its a hack and it varies with certain images.. some appear too far down, and some do what you are describing. For my next version I am actually going create a few different layouts, one idea is to put the picture inside the tabs and have it display on the First tab only. Similar to this: http://www.winfieldwoodworks.com/cat..._Board_12.html

But some of the layouts may get pretty wild and may end up being hard to merge for novices. But I do intend to stick with the <div> block method the best I can and hope to make easy to read blocks that you can move around and add other contribs to.

Would be nice to figure out a way to make a form in the admin panel do this all for me.. and add tabs via a gui or something. I'm not that advanced in my php coding for that tho. But I will try to work on this and make it as useful as possible and listen to your ideas.

Also.. im running IH2.. on my other site (without the contrib yet).. but i dont remember any changes to the product info template file that would be affected by the tabs.

ok version 3 beta is on the demo site (check my signature).. note the image is inside the tab and the first tab is fixed. I'd like to also put the options and add to cart button inside too but I'd like to make them fit a little tighter as well..... but i'd like some feed back about it having the image inside.

I am still looking into having text before the tabs as well.. it doesn't seem too hard. but I want to make sure it parses properly. Also, Im just waiting for someone to ask about having text after the tabs which could be a bit harder... or would at least require a new tag to let the code differentiate.

Also going to work on adding <noscript> tags so it just shows the normal way if jscript is disabled.

Ok Wood

I got your text above the tabs.. it was ridiculously simple after I had a good lunch lol.

I am adding <noscript> stuff now.

Does anyone know of a good way to check if things like additional images exist so I can hide those tabs if there are no additional images? It is a "requires" call so it calls a completely different file. same with Customers also Purchased.

I can finagle it for the details like model/qty/stock .. but thats about it.

Also I was gonna try adding the review editor on a tab as an option by including the review editor php file and see how that works.

Which do we like better.. image inside the tabs or outside the tabs? It will no doubt come to a vote that i should add the ability to do both :)

Along the same lines as additional pictures, you can make it look to see if there are cross sell items assigned to it. If not, make that tab disappear (sorry, not trying to be picky, it was just a thought).

yea.. support for other contribs like that will be next if i can figure a way to do it from within this one file.

Quote:

---

Originally Posted by qhome

I got your text above the tabs.. it was ridiculously simple after I had a good lunch lol.

---

Q- Cool! Can you post the code change. That in itself is the major immediate need I have for your mod.

Below is the default order of the product page layout in Zen Cart 1.3x

Main Product Image*
Product Name*
Product Price (block)*
Free Ship icon*
Product Description
Add to Cart box*
Product Details list:*
- product model
- product weight
- prioduct quantity
- product manufacturer
Product Attributes*
Quantity Discounts Table
Additional Product Images*
Tell-a-friend button*
Ask-a-question button (not stock)*
Reviews button/count*
Product date added/available*
Product URL*
Also Purchased Products*
Cross Sell (not stock)*

[Also the category icon and the "above" and "below" Prev/Next buttons/positions which should remain outside of the tab scheme, as you have them now.]

I prefer the items marked with an asterisk (everything except the Product description text) to display outside of the tabs layout, if store owner desires.

Myself I will likely always want to display the main product image free-standing by itself, ABOVE the tabs. And the same with the various buttons (add to cart, Reviews, ask-a-question, tell-a-friend, etc). And thinking I will want to display the cross sell images below the product description text/tabs.

And abilty to display product description text both above and below tabs is very desirable.

Ability to support product page layout flexibility is key as I'm sure others will have different combinations of layout needs.

Looks like you have additional visions for your mod, e.g. being able to support other mods and configure tabs within admin, which is great.

Once you have integrated the ability to display various data objects in your tab scheme storeowners should be able to easily figure out how to integrate other product related data into your tabs layout, if needed.

Down the road I invision the Zen Cart dev team supporting repositioning/sorting, from a single Zen Cart admin page, every single display/data object on the product page (currently ZC 1.3x allows you to enable/disable the display of most product page objects via Config > Product info and various other admin menus). Mod developers would need to know how to integrate their customizations into such a scheme.

You are making quick strides. Keep up the good work.

Woody

This is looking really great Qhome, very well done. You know what would polish this up though? Rollover tabs ... either make other gfx and have them change completely, or have the text inside the tabs change colour on mouseover, what do you think?

Quote:

---

Originally Posted by Pauls

This is looking really great Qhome, very well done. You know what would polish this up though? Rollover tabs ... either make other gfx and have them change completely, or have the text inside the tabs change colour on mouseover, what do you think?

---

Yea i had that for the original tabs version 1 before i changed to this style.. this one looks better at default.. but that should be easy to do in the CSS as well.. i'll look into some color ideas and you guys can customize it as you like :)

@Wood I will try to post it tonight. I want to make sure the read me and everything is correct. At the moment because I'm doing so much on and off stuff, its hard to keep the code clean so im trying to do what I can with it to make it easy to use and merge.

OK! Its time for the latest beta!

• At the moment, its quite messy to support everything in one file, so this beta comes with 2 tpl files, one has the image above the tabs, one has the image inside the tabs. You choose which you'd like. The rest of the files are functionaly the same except for that one difference.
• Also included with this beta is the ability to add text above the tabs
• I've added some simplistic <NOSCRIPT> tags. They just put big red signs up stating that the tabs won't work because javascript isn't enabled. This doesn't prevent the customer from buying anything, they just wont be able to see any other tab except for the first one. But honestly.. who has a browser that doesn't support jscript these days.. Even the Amish have up-to-date browsers. There may be some issue with FireFox "NOSCRIPT" extension, but the <NOSCRIPT> tags I added should be enough to tell them to enable it for your store. There's really no easy way to force the display to show normal view, since its dynamically created. This method works for now.

Be sure to read the readme, as it has been updated a bit and I've removed all that bogus junk that was left over from my c/p job. There is a "TO DO" list at the bottom of that file, but please share any other ideas you'd like to see.

Q-

You are quick with the updates!

I. The new filename is:
TabbedLite-v2.5-beta.zip

But the new readme says
Contribution: Tabbed Products "LITE"
Version: v3.0 beta

II. The readme states:

Quote:

---

Also, inside the
/catalog/includes/templates/YOUR_TEMPLATE/templates/tpl_product_tabbed_info_display.php file, there are configurations at the top for additional tabs you can show.

---

I think you meant inside either t1l_product_info_display.php OR t2l_product_info_display.php...

Just trying to keep you honest ;)

Woody

LOL damn this 4 hours of sleep! it was gonna be named 3.0 but i didnt feel it was worth a whole number lol.. and i had that multiple layouts thing at the last second. Ah well... so far the best beta test has been on the readme lol :)

Anyways.. lemme know how u like the tabs so far.

Quote:

---

Originally Posted by qhome

LOL damn this 4 hours of sleep! it was gonna be named 3.0 but i didnt feel it was worth a whole number lol.. and i had that multiple layouts thing at the last second. Ah well... so far the best beta test has been on the readme lol :)

Anyways.. lemme know how u like the tabs so far.

---

I knew that would make you laugh :)

Yes since it is in beta none of those readme issues matter. Just wanted to ensure I wasn't missing out on testing a newer version ;-)

Regardiing beta versioning... generally when I release something to beta I release as 0.5beta, then next minor update as 0.5.0.1beta, etc (or if major beta update then increment to 0.6beta). When really ready for prime time and out-of-beta I release as 1.0, then later minor updates as 1.0.1, 1.0.2, etc. And larger updates as 1.2, or 1.5 and the next really big update as 2.0 (you get the picture).

Back to the topic of discusssion... I just installed your 2.5beta and it works VERY NICELY. All my previous reported issues are fixed.

Now I look forward to the ability to display product description text below the tabs ;-)

Time to take the beta label off. I'm betting this will become a very popular mod in short notice. And something the Dev team will consider including as core. Great work!

Woody

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

Code:

---

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:

Quote:

---

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....&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?verbos...roducts_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.

Quote:

---

Originally Posted by 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? :)

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by 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....&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.

Quote:

---

Originally Posted by 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?

Quote:

---

Originally Posted by 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:

Code:

---

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.

.

Quote:

---

Originally Posted by 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:

Quote:

---

Originally Posted by 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.

I have been working with another member in this forum to setup these tabs.

I am in charge of entering in all the data for the different tabs. I am running into a problem when using tables.

For some reason each tab does not really recognize the tables and all the tables "overflow" the tab fields.

In other words the tab window is not being stretched to fit the table.

Any ideas?

Quote:

---

Originally Posted by qhome

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.

---

Very cool. Look forward to it.

Assuming the tab transparency details are still to be hammered out?

The body bg color of my site is lite blue but I wished to set the product description panel bg to match the background color of the focused (foreground) tab which is white by default (default_tab_bg_white_left.gif). Thus I added the entry below to stylesheet_tablitev2.css.

Code:

---

.ditch-tab-pane-wrap {
                        background: #000000; /* prod-desc pane bg color */
                        }

---

Is this the recommended method to ensure the panel and focused tab bg colors match?

Woody

Q-

FYI - Regarding your demo site at http://www.unbannable.com/zen/index....&products_id=1
When I click on the tabs (focused and unfocused) I get no response. In IE6 or Firefox 1.5.0.4. It was working before. I assume you are tweaking code ;-)

Woody

Quote:

---

Originally Posted by Woodymon

Q-

FYI - Regarding your demo site at http://www.unbannable.com/zen/index....&products_id=1
When I click on the tabs (focused and unfocused) I get no response. In IE6 or Firefox 1.5.0.4. It was working before. I assume you are tweaking code ;-)

Woody

---

Yea sorry.. i got some new inspiration for when javascript is off. Now if jscript is off, it hides the actual tabs and instead lays out each box as normal. I'm still working on some features of that on my test server tho.

Quote:

---

Originally Posted by qhome

Yea sorry.. i got some new inspiration for when javascript is off. Now if jscript is off, it hides the actual tabs and instead lays out each box as normal. I'm still working on some features of that on my test server tho.

---

Cool to hear. I keep on forgetting to test fallback when JavaScript is off. Thanks for the reminder to do this. BTW I don't observe your mod available via the Downloads area yet? I observe other mods were added very recently. Should it appear in "Other Modules" or elsewhere? Maybe I am impatient ;-)

heh .. this is always my problem with coding.. i keep saying "it will be out soon" and then i have these plans and visions in my head so I keep changing and working on new features :P If I don't force myself to stop every so often I'd never get my project out.

You should be able to test my demo site with and without jscript and see how it works. Now that I got this done.. that template is a varitable sandbox mess so I'm trying to clean things up. I hope I don't have any more visions before I'm finished so I can release it.

Also, as I mentioned a few posts up, a major change in the release version will be the tags for the core stuff. Now if you want Additional Images, Product Details, and Customers Also Purchased tabs to appear, you need to add the preset hardcoded tag for them to your description (more about this will be in the readme). This allows you to enable/disable those as tabs for each product separately. If you don't add those tags to your description, then they will just appear as normal (unless you disabled those boxes altogether in the admin)

I'm thinking I might table-ize each section if jscript is off so they would be a separate box each instead of running together in the same party box. But thats it. I'm releasing after that.

Quote:

---

Originally Posted by qhome

I hope I don't have any more visions before I'm finished so I can release it.

---

Visions can be good. Don't rush. The nice improvements you've implemented in each update so far have made waiting well worth it. Eventually I suspect you will want to enable the mod so much of the configuration can be done via Admin? But no care for that now. I will take new features over admin configurability any day.

Price tab contrib hey this is a grad add on
Just made a tab for priccing and atributes as well as the add to cart box add

Add

Code:

---

$price_tabs = true; // Puts the Price info in the tab
$price_tabs_name = 'Pricing'; // If using the tabbed view, set the title

---

to the foist commented block

Add

Code:

---

//price tab, tab or not
                                        if ($price_tabs == true) {
                                                        echo '<div id="'.$g.'" onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);" class="ditch-tab ditch-unfocused">';
                                                        echo '<span class="ditch-tab-bg-left"></span><a href="" onclick="return false;">'.$price_tabs_name.'</a>';
                                                        echo '</div>';
                                                        $g++;
                                        }
                                        //price tab tab end

---

right above the line w/

Code:

---

echo '<br class="ditch-clear" />'; //prevent tabs from appearing inside the box

---

and finaly add

Code:

---

                //price tab content
                                        if ($price_tabs == true) {
                                                        echo '<div id="'.$a.'" class="ditch-tab-pane" style="display:none;">';
                                                                //<!--bof Product Price block -->
                                                        echo '<h2 id="productPrices" class="productGeneral">';
                                                                // base price
                                                                if ($show_onetime_charges_description == 'true') {
                                                                    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
                                                                  } else {
                                                                    $one_time = '';
                                                                  }
                                                                  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
                                                                echo '</h2><!--eof Product Price block -->        <!--bof free ship icon  -->';
                                                                if(zen_get_product_is_always_free_shipping($products_id_current)) {
                                                                        echo '<div id="freeShippingIcon">'. TEXT_PRODUCT_FREE_SHIPPING_ICON .'</div>';
                                                                }
                                                                //<!--eof free ship icon  -->
                                                                //<!--bof Add to Cart Box -->
                                                                if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
                                                                        // do nothing
                                                                } else {
                                                                        $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
                                                                        if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
                                                                                // hide the quantity box and default to 1
                                                                                $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
                                                                        } else {
                                                                                // show the quantity box
                                                                                $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
                                                                        }
                                                                $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
                                                                if ($display_qty != '' or $display_button != '') {
                                                                        echo '<div id="cartAdd">';
                                                                        echo $display_qty;
                                                                        echo $display_button;
                                                                        echo '</div>';
                                                                } // display qty and button
                                                                } // CUSTOMERS_APPROVAL == 3
                                                                //<!--eof Add to Cart Box-->
                                                                //<!--bof Attributes Module -->
                                                                if ($pr_attr->fields['total'] > 0) {
                                                                        /**
                                                                        * display the product atributes
                                                                        */
                                                                        require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php');
                                                                }
       
                                                                //<!--eof Attributes Module -->
                                                         
                                                        echo '<br /></div>';
                                                        $a++;
                                        }
                                        //end price tab content

---

Above

Code:

---

echo '</div>'; //ditch-tab-pane-wrap

---

In your css dir create a file called 'product_info_display.css' and
enter

Code:

---

#cartAdd {
float:none;
}

---

find all of the Bof comments and wrap them w/ an iff statement allont the lines of

PHP Code:

---

if ($price_tabs == false){ 


---

that have the price, attributes and addt to cart box.

JOsh

Glad to see you found it easy enough to add your own Sanquis!


OK, I cleaned up and commented the code the best I could. I am finishing up the readme and will upload it to the contribs area.

New stuff

• If jscript is off, it will shows all the data as a whole, and remove the tabs. I jscript is on, it will show the tabs.
• Added Hardcoded tags for AdditionalImages, ProductDetails, and CustomersAlsoPurchased have been created. This allows you to show these tabs on a per product basis rather than globally. More info in the readme on how to use those.
• Cleaned up the code, indented it all properly (including some of the misaligned core code)
• Commented the code where I added stuff and tried to explain what it did.
• Transparency images are also added to the images folder. Images still confuse me a bit. i tried to make it so I could just make the corners of the original images transparent, so you wouldn't see the outer blockiness. But that looked fine on a colored background, but when I went back to the white background, they looked weird. So I included both versions of images.
  
  Also, I didn't include images for totally seeing through the tabs. That could be accomplished by making the main tab area transparent, but I dont like the way it looks at the moment.
  
  Best Advice would be to use the full color tabs, but make your own left tab image thats flat on the side to hide that background corner. Its hokey, but I can't figure out what else to do there for now. I will look into those sites like nifty tabs and other posted above for future versions.

It should be easier to merge other contribs like Cross Sell into this template. I decided NOT to implement hardcode tags for these other contribs, as they may change and be difficule to maintain. I did however try to show how users could add their own.

It was, you have very clean code
thgank you agian for this great piece of work

OK! I've added this to the Downloads Section as a released contrib! Thanks to all of you who helped make this contrib better! I hope you find it somewhat easy to modify for your needs.

There are some things added to the todo list and based on how many features it's getting, it may not be LITE for long!

Thanks all!

I think this contrib is wonderfull. I have installed it on a site I am working on.

I am trying to figure out the best way to get my attributes and add to cart box to fit under the tabbed products box. Right now they are right at the bottom with lots of white space at inbetween.

http://skintightrubber.myzen.co.uk/s...products_id=91

I also have some products that I have added the

<!--#ProductDetails#-->

into the product desciption but the tabbed box doesn't display. These products have lots and lots of attributes.

Any ideas?

Quote:

---

Originally Posted by mrmarcus66

I think this contrib is wonderfull. I have installed it on a site I am working on.

I am trying to figure out the best way to get my attributes and add to cart box to fit under the tabbed products box. Right now they are right at the bottom with lots of white space at inbetween.

http://skintightrubber.myzen.co.uk/s...products_id=91

I also have some products that I have added the

<!--#ProductDetails#-->

into the product desciption but the tabbed box doesn't display. These products have lots and lots of attributes.

Any ideas?

---

You know, I was thinking about adding an option for moving the add button and attribs inside the tabs too. I'll work on that.

And looking at your source code on that page, I dont see the tag for ProductDetails.

Look at the link below and check the source code on that page, you should see the tag for ProductDetails.

http://skintightrubber.myzen.co.uk/s...products_id=20

For some reason I the tabs do not show.

Quote:

---

Originally Posted by mrmarcus66

Look at the link below and check the source code on that page, you should see the tag for ProductDetails.

http://skintightrubber.myzen.co.uk/s...products_id=20

For some reason I the tabs do not show.

---

Ok, now I see the productdetails tag, but the rest of the tabs have been removed. I guess there is a limitation I didn't think about. You need to have at least one custom tab in order to pass the logic of using tabs. I should add some code to allow having only the hardcode tags if you dont want other custom tabs

Quote:

---

OK, I cleaned up and commented the code the best I could.

---

Wow! Just did a compare on v.2.6 tpl_product_info_display.php and I note some major code changes. Indeed you put in much work implementing all the new features.

Merging previous versions of Tabbed Products ''LITE' mod code into my heavily customized but well documented tpl_product_info_display.php was a straight forward process. But that is no more with v.2.6. I am not complaining and understand that is the price of progress. I think I will remain with the previous Tabbed Products Lite version for awhile longer ;)

Woody

Houston we have a bug!

When I combined the two layout files of main image above tabs and main image inside tabs, I completely lumped the main image loading into the tag check. So currently if you have "show_main_image_in_tabs = true" in the tpl file, but you have a product with no tags at all. It will not show the image.

I'm also going to change the way the main image call works to make it a hardcode tag. If you use the tag, then the image is in the tabs. If you don't use the tag, then the image is out of the tabs.

For now, the fix is below:


FIND (around line 81):

Code:

---

If ($show_main_image_in_tabs == false) {

---

REPLACE WITH:

Code:

---

$chkTabStart = strpos($proddata, "<!--%");
$chkTabEnd = strpos($proddata, "%-->");
If ($show_main_image_in_tabs == false || $chkTabStart === false || $chkTabEnd === false) {

---

That should fix the problem until the next release

Quote:

---

Originally Posted by Woodymon

Wow! Just did a compare on v.2.6 tpl_product_info_display.php and I note some major code changes. Indeed you put in much work implementing all the new features.

Merging previous versions of Tabbed Products ''LITE' mod code into my heavily customized but well documented tpl_product_info_display.php was a straight forward process. But that is no more with v.2.6. I am not complaining and understand that is the price of progress. I think I will remain with the previous Tabbed Products Lite version for awhile longer ;)

Woody

---

Really? I thought I made it easier with 2.6. Well to save you the trouble you should probably hold off until the next patch release. It will include:

• Above Fix for non-tabbed products
• <!--#MainImage#--> hardcode tag for when you want the main image on tabs
• Additional Hardcode tags for 'add to cart' and 'attribute options' being inside the tabs.
• ability to use hardcode tags for things like 'Product Details', 'Additional Images', and 'Customers also Purchased', without having any custom tabs.

That will probably be it for a while then.... until I have more visions.

I am looking at some css based tabs like nifty tabs and ruzee with rounded corners. That will probably be the next big release.. omitting images and transparency problems making them look more like: http://cssplay.co.uk/menus/doors-two.html

I am looking to make the tabs use only 50% of the space and have my attributes next to the tabs. Can anyone advise me how to do this?

Quote:

---

I am looking to make the tabs use only 50% of the space and have my attributes next to the tabs. Can anyone advise me how to do this?

---

contain to tabs in a div that has a width of 50% and give it a class of forward or back this shoulds make all the other stull on the screen that was below the tabs be on the side 'wrapping' the tabs div.

JOsh

Do I need to create a div container or can I adjust one of the tags in the stylesheet_tablitev2.css stylesheet?

Quote:

---

Originally Posted by mrmarcus66

Do I need to create a div container or can I adjust one of the tags in the stylesheet_tablitev2.css stylesheet?

---

That would be a custom layout for your site so it would need to be another div.. or a wrap a table around the tabs table and attribs and put the tabs in one TD and the Attribs in another TD.

OK. I fixed the bug and added the features I mentioned above.

The new file has been added to the downloads section (version 2.7 now). The download is under the Template category btw.

(Gotta wait till the mods approve it)

This should probably be the last update for a while so if you were gonna merge changes into this.. now would be the best time.

Quote:

---

Originally Posted by qhome

Really? I thought I made it easier with 2.6. Well to save you the trouble you should probably hold off until the next patch release.

---

My apologies. My compare application reported change warnings when it identified all the new comments and the new space indents. I printed out code and walked through the logic and found everything is good.

But I see you have made v. 2.7 available so I will go that route.

Several questions:

The new code is commented with "Core Features Tabs" and "Core Contents Tabs". Can you breifly explain the terminology?

Will the new tabs configuration impact how search engines spider/index the product description data.

Wondering if using CSS would be better approach than the new table html code added into the code?

(Sorry if I am showing too much curiosity/ignorance with my questions).

Thanks, Woody

Quote:

---

Originally Posted by Woodymon

The new code is commented with "Core Features Tabs" and "Core Contents Tabs". Can you breifly explain the terminology?

---

The "CORE" parts refer to the "Additional Images", "Product Details", "Customers Also Purchased", and "Add to Cart". As those are tabs for core modules, and not something custom.

Quote:

---

Originally Posted by Woodymon

Will the new tabs configuration impact how search engines spider/index the product description data.

---

New tabs do not change anything with the spidered html. Also see answer to next question....

Quote:

---

Originally Posted by Woodymon

Wondering if using CSS would be better approach than the new table html code added into the code?

---

The reason I used the table tags was used to implement a similar design as the tab switcher design so that if Jscript is turned off, it shows all the content in each section as a whole. The tables really aren't needed, and I dont necessarily implement them the way Tab Switcher uses them as I dont colorize the background or use borders. I mainly used the table tags for keeping things separate so if you don't add <br> code between tag delimiters, it doesn't run into the next section. It was more of a protection from having to make the user work more and think about it. So it was meant to make things easier.

There is one table I added for the Add To Cart inside the tabs to make sure that it didn't overlap the main image and get out of line. So that one is necessary.

Also, referring back to spiders. The spiders can be sure to see all data as it would also ignore the <!-- tags for html.

Hope that clears it up.

I installed v.2.7. I found the page renders fine all the way down to the tabs. However the tab pane now extends to the right margin, and my left column is entirely pushed down to below the tabs and below where "also purchased products" might be displayed (if I had enabled).

If it matters I do not have any "additional images" or any "product details" (qty/weight/model/manuf) to display and display of "also purchased products" is disabled.

And for now I choose to display the "Add to Cart" button below the tabs (default positioning)

Possibly a missing closing div tag or something to do with new table html in the new 2.7 code?

Anyone else observing such?

Note I am using the Future Zen template as basis of my template. But this phenomena did not happen with v2.4 installed.

With the very long tab indents (to help show nested if elses), creating wrapping of long code structures, it is a bit difficult to walk through the code (at least on a 17" monitor or printed on paper). Not a complaint mind you. Just a comment on my working evironment. ;)

BTW what is the standard number of spaces used for tab idents in PHP coding? Or more specifically used/recommended by the Zen Cart dev team for consistency?

Thanks, Woody

Quote:

---

Originally Posted by Woodymon

I installed v.2.7. I found the page renders fine all the way down to the tabs. However the tab pane now extends to the right margin, and my left column is entirely pushed down to below the tabs and below where "also purchased products" might be displayed (if I had enabled).

If it matters I do not have any "additional images" or any "product details" (qty/weight/model/manuf) to display and display of "also purchased products" is disabled.

And for now I choose to display the "Add to Cart" button below the tabs (default positioning)

Possibly a missing closing div tag or something to do with new table html in the new 2.7 code?

Anyone else observing such?

Note I am using the Future Zen template as basis of my template. But this phenomena did not happen with v2.4 installed.

With the very long tab indents (to help show nested if elses), creating wrapping of long code structures, it is a bit difficult to walk through the code (at least on a 17" monitor or printed on paper). Not a complaint mind you. Just a comment on my working evironment. ;)

BTW what is the standard number of spaces used for tab idents in PHP coding? Or more specifically used/recommended by the Zen Cart dev team for consistency?

Thanks, Woody

---

In 2.6 I did a decent job of indenting and usually use 4 ... depending on my mood I may also use 2.. but I usually try to stay consistent within each project. Some of the stuff added to 2.7, I use a deep indent just for my sandbox to help separate code while I work on it.. i didn't reset the indents after working on 2.7.


I will take a look at it the tags to see if i missed one.

Quote:

---

Originally Posted by Woodymon

I installed v.2.7. I found the page renders fine all the way down to the tabs. However the tab pane now extends to the right margin, and my left column is entirely pushed down to below the tabs and below where "also purchased products" might be displayed (if I had enabled).

If it matters I do not have any "additional images" or any "product details" (qty/weight/model/manuf) to display and display of "also purchased products" is disabled.

And for now I choose to display the "Add to Cart" button below the tabs (default positioning)

Possibly a missing closing div tag or something to do with new table html in the new 2.7 code?

---

Found the bug! Had an If statement closing tag closed too early. Here is the fix:
(just move the closing bracket below the echo statments.)

FIND (Around line 458):

Code:

---

}
echo '</td></tr></table>';
echo '<br /></div>';
$a++;

---

REPLACE WITH:

Code:

---

echo '</td></tr></table>';
echo '<br /></div>';
$a++;
}

---

Also, I found a typo I made on line:

Line: 672

Quote:

---

$bCustomerAlsoPurchased should be $bCustomersAlsoPurchased

---

I've attached the fixed tpl file by itself here. I've also uploaded a 2.7a release in the contribs section.

Thanks for lookin out Woody :)

Is there a way to change the font color on tabs ?
i need to make the grey font on unfocused tabs diff. color. ?

Quote:

---

Originally Posted by qhome

Found the bug! Had an If statement closing tag closed too early. Here is the fix: (Around line 458)...(just move the closing bracket below the echo statments.) Also, I found a typo I made on line: Line: 672

---

Very quick and good with your bug fix! All better now. Thanks! I printed the file out and combed thru code with a highlighter ensuring all opening/closing tags for divs, table/tr/td, and nested ifs were properly matched. And all came up fine. I don't think I would have found the logic error. Thanks again.

I need a PHP editor/debugger/developer framework. I understand the Zen Cart devs use Zend Studio. That may be more than I need. But maybe not? What do you recommend?

Woody

Quote:

---

Originally Posted by Alik

Is there a way to change the font color on tabs ?
i need to make the grey font on unfocused tabs diff. color. ?

---

Yes, in the stylesheet_tablitev2.css file there is the class for "unfocused"

Quote:

---

Originally Posted by Woodymon

Very quick and good with your bug fix! All better now. Thanks! I printed the file out and combed thru code with a highlighter ensuring all opening/closing tags for divs, table/tr/td, and nested ifs were properly matched. And all came up fine. I don't think I would have found the logic error. Thanks again.

I need a PHP editor/debugger/developer framework. I understand the Zen Cart devs use Zend Studio. That may be more than I need. But maybe not? What do you recommend?

Woody

---

Good to hear I at least had all the proper tags..especially since I do everything as raw code in UltraEdit.

As far as php editor/debuggers.. I've used the top one.. I liked it.. but it took a bit of work to figure out how to set it all up. But when I finally got it working..it certainly helped.

Nusphere PhpEd - It's a full debugger IDE so you can step through your code and see what it's doing.... They offer a trial period, but the full program is a bit pricey. ($299)

Engine PHP Editor looks nice and has good reviews. It looks to be the same thing.. php debugger IDE. I haven't tried it myself, but they also offer a trial period. It is also far cheaper ($75)


The problem I had with setup was trying to configure my webhost to use the debugger file on their servers. I found just dropping the complete php application into the nusphere project folder and using IIS or apache2triad as your home webserver, it was easiest.

Thanks for info on php dev tools.

I am viewing the CSS information using the Firefox Web Developer extension. But I'm still having a difficult time wrapping my head around the structure of the stylesheet and application of tab class styles.

Are all the classes in the stylesheet_tablitev2.css stylesheet utilized? e.g. wireframe and invisible? It appears if only .ditch-tab-skin-default subclasses are applied in tpl_product_info_display.php?

Also I note two ditchnet-tab-container classes within the stylesheet. Is that correct?

I have a body bg color of light blue and my tab content pane bg color is white. And focused tab is default white and unfocused tab is default grey.

I have updated the tablitev2.css stylesheet as follows:

Quote:

---

.ditch-tab-skin-default .ditch-unfocused {
color:#999;
border-bottom:1px solid silver;
background:transparent url(../images/default_tab_bg_gray_transparent_right.gif) 100% 0 no-repeat;
}

.ditch-tab-skin-default .ditch-focused {
border-bottom:1px solid white;
background:transparent url(../images/default_tab_bg_white_transparent_right.gif) 100% 0 no-repeat;
}

.ditch-tab-skin-default .ditch-unfocused .ditch-tab-bg-left {
background:transparent url(../images/default_tab_bg_gray_transparent_left.gif) 0 0 no-repeat;
}

.ditch-tab-skin-default .ditch-focused .ditch-tab-bg-left {
background:transparent url(../images/default_tab_bg_white_transparent_left.gif) 0 0 no-repeat;
}

---

However both the focused and unfocused tabs still show white in the left corners. But the right corner of both the focused and unfocused tabs indeed correctly appear transparent. Thus is there an issue with the two supplied *transparent_left.gif images?

Or if I'm barking up the wrong tree is there an example of how to apply the transparent tab images?

And how to change tab color without losing rounded corners? Or must we generate our own gifs when wishing to change tab color and maintain rounded corners?

The more I learn what can be done with CSS, the more I learn that I don't know CSS as much as I had assumed ;)

Thanks,
Woody

Hey woody,

A few posts ago I was discussing working on making the images transparent. I seemed to get it to happen, but the problem is actually the way the images overlay. Really its an illusion... the tabs have a "right side" background image that goes all the way across. the "left side" image is then placed on top of the left edge. The problem is that the right image is squared off at the edge. So its like trying to cover a square with a circle.. you see the corners.

I tried making the left edges of the "right side" images transparent, but to no avail. (thought for sure that would work... but it didnt)

The original options I could think ok were:

- Make new images to match the colors better.
- Make designer tabs with flat left sides so you wouldn't even see the corner, as it would be a square covering a square.

But yesterday I actually found an example where they added padding to the right image to prevent this exact problem in css. it was for a different tab set, but I'm looking into how I can add the same padding to this css.

I will keep working on it and let you know what I find out. But it seems that its just a simple padding issue.

Quote:

---

Originally Posted by qhome

The problem is that the right image is squared off at the edge. So its like trying to cover a square with a circle.. you see the corners.

I tried making the left edges of the "right side" images transparent, but to no avail. (thought for sure that would work... but it didnt)

---

Just to know we are looking at this from the same perspecitve ;-) ... It is the right corners which look correct to me and it is the left corners which are not appearing transparent.

Thanks for the explanation in regards to the illusion. I just viewed the gif files and I now understand better.... I think.

Good luck in the CSS padding manipulation research.[/QUOTE]

Heh.. to clarify.

the tabs are made of 2 images. the "left-side" image is very skinny and has a curved left side and a flat right side. The "right-side" image is verrrrrrry long and it actually takes up the whole background image of the tab. The right side of that image is the curved side, and the left side of that image is flat.

The left side image is then placed on top of the right side image to give the look of a curved side... but the left corner cant fully cover up the left side of the "right-side" image because its square.. and it has to be so it can expand and contract as tabs can be named really long or really short.

So there is some way of padding the right image to not go all the way to the left edge of the tab background.. then the "left-side" image will actually be sitting on top of the invisible pad, and you wont see the left edge of that "right-side" image.

Well, I have a strange feeling I may be "barking up the wrong tree" as well, but here goes. I have put the LITE tabbed product into my system. I currently have been playing with two different products. One with tabs, the other without.

My standard product type displays the content correctly in both IE and Firefox. Even when using Firefox with the tabbed product, it displays fine as well.

But as soon as I look at the tabbed product in Internet Explorer, all the content becomes centered and my "additional images" no longer display along side of one another. Instead the images are placed in a vertical order. (Note that this also seems to be the case with the "Home/Main" page and the "New Products" listing.

I noticed that each custom tab had it's own CSS code (id="productDescription1" / id="productDescription2" / etc.) so I put in CSS code as an experiment :

#productDescription1 {
text-align: left;
}

This correctly aligned the content of the first tab from centered to left-aligned. Any clues as to what is going on with this.

You can see the site at: http://www.clf1670.org/cart/index.ph...&products_id=4

Thanks,
Kevin L.

Also, note that the quantity of a product is not displayed. I can look at the source and see the code listed, but it does not show up on the tab in either FF or IE.

I have yet to take a closer look at this particular problem.

Kevin L.

Quote:

---

Originally Posted by qhome

Heh.. to clarify.

---

Q-

You explain things very well. Now I comprehend. Thanks!

woody

Quote:

---

Originally Posted by scubes13

I noticed that each custom tab had it's own CSS code (id="productDescription1" / id="productDescription2" / etc.) so I put in CSS code as an experiment :

#productDescription1, #productDescription2, #productDescription3 {
text-align: left;
}

---

This is actually a bug that I created trying to be "w3c compliant". It gave me errors saying that I couldn't have multiple of the same div ID.. but I didn't think about it being in the CSS like that. Really the class is class="productGeneral biggerText" so I would think that the CSS text-align:left; should fall under that category in the core zen-cart css file.. But Im not a CSS expert. A couple of ways you can fix that:
1. add text-align: left; to the 'productGeneral biggerText' section of the zen-cart css file.
2. In the tabbed tpl file, find all instances of id="productDescription'.$a.'" and change them to id="productDescription". This will throw a minor annoyance in the xhtml validator tho.. but it still shouldn't affect anything
3. Add
#productDescription1, #productDescription2, #productDescription3 {
text-align: left;
}
for all the potential tabs you will need.

I think choice 1 "should" work though.

Quote:

---

Originally Posted by scubes13

Also, note that the quantity of a product is not displayed. I can look at the source and see the code listed, but it does not show up on the tab in either FF or IE.

I have yet to take a closer look at this particular problem.

Kevin L.

---

It looks like you haven't enabled it globally from the admin area. It will only show it if you have that stuff globally enabled from the admin panel first. This is true for all the tabs.

You can enable it in CATALOG->PRODUCT TYPES->Product - General and enable them

As far as the Images lining up weird. This "i dont think" is anything that I'm doing since you are also having that problem on your home page. I have another site that appears fine in IE with regards to Text and additional images. So I'm not sure what the problem is there.

Q -

Well, I had to add the bit of code for "productGeneral biggertext" to my CSS code. That fixed the alignment issue with the text.

#productGeneral .biggerText {
text-align: left;
}

I am still trying to sort out the issue with the alignment of my additional images.

At any rate, in regards to the Product Description information (quantity on hand, etc.) I looked in the Admin area. I did not see anything that would turn that information off. Nor do I really recall ever having made such a change. Anyways, I did a "select all" on my product page after clicking on the "Product Description" tab, and I could see the Quantity information highlighted. So it is actually being output. I am checking further CSS to see if it is being hidden for some reason (although a select all does display it).


Now off to see if I can run down these issues any further.

Thanks,
Kevin L.