DEMO
Both dynamic and fixed height tabs are supported (dynamic is shown)
Printable View
DEMO
Both dynamic and fixed height tabs are supported (dynamic is shown)
it's working for me now, the test site wasn't working probably because not everything was uploaded correctly, but it is working on the one I really needed it for, great mod :D
thanks
Steve
Hi all,
As can be see on my product page link http://www.its-digital.com/index.php...&products_id=9 i have 3 tabs, however i would like to add an extra tab called "features" after the "product description" tab, is there a way to do this? Also, is there a way to place the tabs below the product image rather than above it? Many thanks.
^^
For the custom tab, you would add a tag in the product description for each product you wanted to have the "feature" tab (See readme). Custom tabs are always after the Product Description tab and before the module based tabs.
You can change the image location with Admin->Configuration->TPP Config->Main Image on Tabs to 0
Thanks alot, your help has got it working, now i have the tabs below the image and i can have a "features" tab on my product pages as can be seen http://www.its-digital.com/index.php...products_id=36 the only thing is i have to do this for every single item manually unlike the fixed tabs, but thats cool :)
Well there are waya to hardcode the features tab in if u want it on every page. But will the features always be the same for each product?
No the product features wont be the same for all products, so i guess its pretty useless hardcoding the features tab in.
When ZC 1.4 comes out I might make one with admin support tabs. Each Tab on the admin side would correspond to a tab on the front end. This would make adding new tabs easier, but we shall see how it all works out
Great mod.. Installed and worked on the 1st try! I only have one question: The reviews tab includes the "Write a Review" button.. However there is also a "Write a Review" button at the bottom of the product page. How do I get rid of one or the other of these buttons.. I think I'd prefer that the reviews tab not contain the "Write a Review" button.. I think I'd like the reviews tab for just displaying product reviews..
^^
Yea, there is supposed to be some script there to hide the second button, but it also has to check for a Read Reviews button if there are already reviews, so I think I confused something there. Ill take a look
Thanks.. I guess while you're looking in to it:smile: the mod should be flexible enough to allow us to decide which "Write a Review" button should stay and which should go.. that said for now, I'll settle for the one inside the tab disappearing!:D Thanks for looking into this.. I don't want to have to turn the reviews tab off..:no:
I highly doubt potential customers are leaving your store due to an extra write button
ZC 1.3.8a TTP 1.5
All is working fine but I need to customise things.
Client knows nothing abut html and needs to use wysiwyg to enter product descriptions.
Client also needs to enter extra info - 'care instructions' and 'returns info' for example - and wants this on tabs.
Is there a solution to add the extra info required whilst using wysiwyg editor?
Also these details are different for each product.
Sorry if this has been asked/ answered before but I must have read this thread 3 times already!
Cheers in advance.
Hi,
I'm just curious if using this contribution causes any problems with the site being indexed? Will it cause errors and/or will the descriptions be read the same with or without the tabs?
Thanks in advance,
Kelly
It shouldn't cause any problem per se as the tab content is included in the page, it's just hidden.
Depending on how you've set up meta tags, the info is sometimes also included as well.
I thought so, (and that works fine).
Possibly an option would be to create a new text field that references a new tag ...
Hi qhome!
Thank you for this cool contribution. Its really great contr.
Please tell me is it possible to write reviews,when client login in "reviews tab" ?I mean that client can write in review tab :)
Thanks
I could tell you that, but I'd be lying :P
Writing reviews goes through other checks to see if you are logged in so it just makes it easier for it to leave the page and handle it the normal way
qhome,
please tell me how I can override the stylesheet_tpp.css for different languages? language_stylesheet_tpp.css doesnt work :(
Never designed the tabs to be languaged based. Are you saying you have different colors on your site depending on the language?
No,
I just want use it also with a hebrew (RTL language). and it demands that tabs will align to the right side, I did changes:
#slidetabsmenu {
float:RIGHT;
width:100%;
font-size:93%;
border-bottom:1px solid #E276A7;
line-height:normal;
}
and its wonderful,
but for english and russian it need to be align to the left side:
#slidetabsmenu {
float:LEFT;
width:100%;
font-size:93%;
border-bottom:1px solid #E276A7;
line-height:normal;
}
I want use same alt_tpp_tabs8.css, but how I can include in it code for different languages?
sorry for my bad english :smartalec:
Can't we just train hebrews to read left to right? Would probably be easier :P. Ill see if I can do it easily
This really nagged at me..:laugh: My client really liked the reviews tab.. (which we ended up turning off because regardless of whether it's presense would likely not hurt sales, two "Write a Review" buttons just looked odd esthetically)
Anyway I did some sleuthing, and realized that editing the "tpl_product_reviews_default.php" file was the solution to my issue. I commented out the last "Write a Review" button (near the bottom of this file), and TADA!!!! The "Write a Review" button no longer appears on the "Reviews" tab..
Wanted to share in case anyone else needed this particular answer..
This is a GREAT mod.. There are so MANY tab options.. I browsed through the various stylesheets, and found one that match my clients custom/profesionally designed template PERFECTLY.. I'm going to make this mod a part of all my future Zen Cart builds..:clap:
This is a fantastic mod. That said, maybe you can shed a little light on how I can move the tabbed box down, below attributes.
I've played a bit with the tpl_product_info_display.php but the tabbed section wants to default to it's original position. Placing attributes on a tab is an option, but I'd much prefer to adjust the position.
Thanks in advance,
Doug
www.broadwayfloral.com
ok...I tried to comment out the line with //. But did not work.
Where do I put it?
<div class="buttonRow forward"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array('reviews_id'))) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
Thanks, Kim
hi,man, thanks for the great module. Our site is using it and it is working great.
We are trying to add sth like the attached image to the product info page:
http://www.88oceans.com/index.php?ma...roducts_id=528
The attached image is from :
http://www.globalsourcesdirect.com/s...nlocked/Detail
We are willing to pay for this. Pls contact me by [email protected] for further dicusssion.
HA! I missed your cries for help.. but I see you figured out that it is the HTML comment that you needed..
This thread is probably not the place to post this.. There is a forum here for these specific types of requests..
http://www.zen-cart.com/forum/forumdisplay.php?f=137
HTH
I must be missing something simple. I've got the mods installed and seems to be all be working, with one exception. I'm trying to find a css to compliment my site but no matter which css I select, nothing changes.
I'm editing stylesheet_tpp.css I've got several css in the /tpp/ subfolder. All the gifs are in the /images/tpp/ folder within my template.
You can see http://customcreationsunltd.com/test...roducts_id=340 as an example, if it helps.
Thanks. I'm looking forward to getting this set-up. I think it's a great mod.
In the stylesheet_tpp.css file change the highlighted part to reference the tab stylesheet # you want to use (from the /css/tpp folder)..orCode:@import "tpp/alt_tpp_tabs13.css";
Create your own tab stylesheet, and edit the highlighted section with the name of your custom template.
The template images should be stored in:Code:@import "tpp/alt_tpp_tabs13.css";
/images/tpp/
and the stylesheet should be stored in:
/css/tpp
I know this sounds silly, but did you upload your modified stylesheet file? I say this because when I go to your site and view the stylesheets that ZenCart is loading, I see that the stylesheet_tpp.css file still reflects that the #13 stylesheet is the stylesheet that is being called..
Somehow your changes aren't being saved or your modified file is somehow not being uploaded. I don't think this has ANYTHING to do with this mod.. Sounds like something funky is happening with your local files and settings..
I'm okay with silly. I figured out what it was. I've got a copy of my zen install in /test_shop/ but using the same database. Somehow, it's pulling the css from the live shop, in /shop/. So when I change the stylesheet_tpp.css in the /test_shop? install, it has no effect. When I change the one in /shop/, bingo.
Thanks for the help!
Happens to all of us.. My silly moments are usually accompanied by a late night work session. Sleep deprivation and a glass of merlot is USUALLY involved..:yes:
I'm sorry, but I really new to all this. I downloaded Tabbed Products Pro, and cannot open the installation instructions on the read me file...
Where can I find installation instructions?
Thanks!
Candy
Hi qhome,
Thanks again for great mod :smile:
I resolve problem with different stylesheet_tpp.css for different languages. I add in html_header.php :Now it's accept hebrew_stylesheet_tpp.css for hebrew pages.PHP Code:
$sheets_array = array('/' . $_SESSION['language'] . '_stylesheet',
'/' . $_SESSION['language'] . '_stylesheet_tpp',
But when I use it very often when I click "next product" in product info page in FireFox, Firebug show me error: queue[i] is undefined tabContext.js (line 329) null
and this is the line 329 : queue[i].apply(queue[i+1], queue[i+2]);
please help to resolve it.
http://www.bestfashion.me/tops-c-8/s...lack-top-p-696
I'm ready to upgrade from version 1.02 to 1.05.
Is there any gotchas I need to know about? I have custom tabs on all of my products descriptions. Will this be broken with the new global tabls?
If I remember correctly in 1.02 default product options are not selected (at least in my site they weren't). Any idea if this is still the case or is it fixed?
Thank Qhome for a great mod.
All should be fine. The changes from 1.02 to 1.05 were only a few bug fixes and cleaned up code. If you have custom tabs that you hard-coded into the tpp files, then you will need to merge those over. but the file structure hasn't really changed so it should be fairly simple to do.
Quote:
2-Aug-2008 - v1.05 (Release) - qhome
* Added new admin option to merge attributes and add to cart on the same tab.
* Files Modified:
o TabbedProductsPro.sql
o modules/tabbed_products_pro.php
o doc/readme_tabbed.html
12-May-2008 - v1.04 (Release) - qhome
* Added more conditional logic from the preload section to cut down unnecessary queries
* Files Modified:
o modules/tabbed_products_pro.php
o doc/readme_tabbed.html
25-Mar-2008 - v1.03 (Release) - qhome
* Fixed bug where default attribute radio button wasn't checked on tabs.
* Files Modified:
o jscript/jscript_tpp.js
o doc/readme_tabbed.html
:bigups:Looks good:bigups:
Thanks for fixing the default option value glitch.
I have not custom tabs, so it was a cinch.
The options aren't loading on any tab, just are just below the tabs. You are sure you have "Global Attributes on Tab" set?
On the LIVE site, don't you see the attributes under each tab?
There under the product description tab after the product info, under the More Images tab under the additinal images and so on.
My TPP Config looks like this.
TPP - Global Enable Tabs 1
TPP - Global Main Image On Tab 0
TPP - Global Product Description Tab 1
TPP - Global Attributes on Tab 0
TPP - Global Attributes on Add-to-Cart Tab 0
TPP - Global Details On Tabs 0
TPP - Global Add To Cart Tab 0
TPP - Global Additional Images Tab 1
TPP - Global Customers Also Purchased Tab 1
TPP - Global Cross Sell Tab 1
TPP - Global Reviews Tab 1
TPP - Show Tab Headers 0
Yea, like I said:
TPP - Global Attributes on Tab 0
needs to be 1. The attributes aren't on all the tabs.. they aren't on any tabs.. they are completely below the tab box.
I now understand what my confusion was with the settings.
I now have TPP - Global Attributes on Tab set to 0 on both my TEST site and my LIVE site.
What I don't understand is why do the attributes display only on their own tab in TEST, but in LIVE they display below the tab section (so that they always show).
What could be missing?
Ok, some further information...
I use this code to define custom tabs on each product description so that I can display NOTICE of the attribute tab.
I've removed this code above from one of my products and turned Global Tabs ON. Now the options display on the attributes tab for this product (without my important notice of course).Code:<!--%Options & Sizes%-->
<script type="text/javascript">
var mydomain='http://'+window.location.hostname;
HttpRequest(mydomain + '/boutique/content/sizing_notice.htm');
</script>
<!--*sub_AttributeOptions(2)*-->
So I guess I don't need the code above, but how can I display some extra text or instructions on the attributes tab?
I understand this, but if you see test (which has Global Turned Off). My attributes display the way they always have. I just not sure why TEST and LIVE aren't the same since they are set the same.
If you see this product, they should display the same but there are different in TEST and LIVE
Thanks for the time you've taken to respond to this thread.
Each product description has the following TPP code for a custom tab:dontgetit
Is the compatible with the new version?Code:<!--%Options & Sizes%-->
<script type="text/javascript">
var mydomain='http://'+window.location.hostname;
HttpRequest(mydomain + '/boutique/content/english/sizing_notice.htm');
</script>
<!--*sub_AttributeOptions(2)*-->
After hours of failing to find why I was getting the following in IE:
Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
I finally identified the culprit. We had a user generated tab 'Multimedia' that we had placed YouTube video's in. After removing the YouTube embed code this now works properly in IE. It totally and completely sucks because we built the site in FireFox and QC'd IE6-8, but we never checked the products that had videos (which is a lot of them). FireFox (and pretty much all other browsers) handle TPP and YouTube embeds without issue.
This is not a minor issue where an exception is quietly thrown, IE6/7 will fatal error and throw up a 404, IE8 will load the header only, in compatibility mode it loads the entire page and will throw a quiet 'Done with errors on the page'.
TPP is great, I have to find a way to deal with getting videos to the users that does not include a tab.
I was somewhat disappointed that placing the embed outside <!--@EndTabs@--> did not help.
Qhome,
can you confirm if variation_tabbed_products_pro_reverse.zip
has been updated to the 1.05 version ? This is the version of your i use and i want to upgrade to the newer version.
Thanks
Shane
qhome,
Ive just downloaded it an it doesn't appear to have been updated ?
ive compared the v 1.05 with the variation which ive just downloaded and bits like :
$bGblAttribsOnATCTab = GLOBAL_ATTRIBUTES_ON_ATC_TAB; // adds Attribute Options to the Add-To-Cart tab. Overrides the standalone tab.
are missing. and none of the dates or version numbers have changed ?
this is where i downloaded it from
http://unbannable.com/zc/index.php?m...products_id=10
Thanks
Shane
Works a treat. Thanks qhome !
Does anyone else have an issue with the product options continuing to show up even if you disable the Product Options tab AND set the product options (weight, quantity, etc) to not display?? I can simply update the stylesheet and set the "productDetailsList" to not display, but I'd like to get a feel for why the admin options are not working..
**deleted**
My admin settings in case it helps..
Code:Product Listing
Display Product Image - 1
Display Product Manufacturer Name - 0
Display Product Model - 0
Display Product Name - 2
Display Product Price/Add to Cart - 3
Display Product Quantity - 0
Display Product Weight - 0
Code:TPP - Config
TPP - Global Enable Tabs - 1
TPP - Global Main Image On Tab - 0
TPP - Global Product Description Tab - 1
TPP - Global Attributes on Tab - 0
TPP - Global Attributes on Add-to-Cart Tab - 0
TPP - Global Details On Tabs - 0
TPP - Global Add To Cart Tab - 0
TPP - Global Additional Images Tab - 1
TPP - Global Customers Also Purchased Tab - 1
TPP - Global Cross Sell Tab - 0
TPP - Global Reviews Tab - 1
TPP - Show Tab Headers - 0
Nevermind.. I'm an idiot..:laugh:
Shoulda been here: Admin - Catalog - Product Types - Edit Layout - Show Date Added
WOW is this is in a strange non-intuitive place.. (IMO it's not intuitive..)
Hi All,
I have just installed tabbed products pro and it has changed the layput of my product descriptions (Which i dont like :(
Here is the current layout
Link
I would like the product heading to be at the top. Also i just noticed that the product descriptions are different in firefix and ie7 how come?
Any assistance would be good
Thanks in advance
The default layout of the TPP is based on the default zen-cart layout.. In all of my demos the product heading IS at the top. Perhaps your template has some additional CSS that is moving the main image up.
As far as IE7 vs FF... IE7 is unfortunately a cancer that resides on our PCs and is horrible with styles. You will need some additional css hacks to make IE7 work better on your site. I don't believe TPP has the problem tho.... did you site look different in IE7 before adding the tabs?
Looks to be a width problem in the middle column
And also fix the compatiblity issue with ie7
I posted earlier regarding some help in moving the tabbed section to be below the attributes section.
I guess I'm pretty dense in all this still - I'm modifying the tpl_product_info_display.php file, moving either the attribute section higher or the tabbed section lower to no avail.
Sure I can move things but can't seem to get the layout that I'm after -
Product Description/Details
Attributes
Tabbed Area
Any help is appreciated.
Thanks
:frusty:
Are you sure you are changing the right version of the file? That is the right file but should work fine if you move it. Be sure you have "Global Attribs on Tabs" disabled in the TPP config
Here are the settings in TTP:
TPP - Global Enable Tabs 1
TPP - Global Main Image On Tab 1
TPP - Global Product Description Tab 0
TPP - Global Attributes on Tab 0
TPP - Global Attributes on Add-to-Cart Tab 0
TPP - Global Details On Tabs 0
TPP - Global Add To Cart Tab 0
TPP - Global Additional Images Tab 1
TPP - Global Customers Also Purchased Tab 1
TPP - Global Cross Sell Tab 1
TPP - Global Reviews Tab 0
TPP - Show Tab Headers 1
I'm moving this block of code:
<!--bof Attributes Module -->
<?php
if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
* display the product atributes
*/
require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
}
?>
<!--eof Attributes Module -->
to a point just above the end of free shipping block which is just above where we insert the TTP block.
At that point the layout changes completely. When I move the TTP block after the original position of the attribute block of code it still doesn't display right.
I'm the first to admit that I really, really new to all this.
Thanks
I love this mod! Installed very easily and the defaults are pretty much exactly what I'm looking for.
I just have a couple questions:
1) I wanted the current tab to blend in with the title of what it covers. By creating my own gifs, I have gotten close to this, but I cannot, for the life of me, get the text for the current tab to change to white.
I'm sure I'm just being stupid, but what CSS do I need to put into alt_tpp_tabs8.css to turn the current tab's text to white (and perhaps a nice pink on hover)?
2) Also, I have modified my tpl_document_product_info_display.php file with the three sections of new code, but I am for some reason getting duplicate product descriptions. It's as if the third section of code isn't working (if I'm understanding the purpose of that....)
Here is a link to a product page on my site (be warned it is Not Safe For Work, has cartoon guys kissing in the banner and is intended for a female demographic)
https://store.yaoi911.com/index.php?...&products_id=7
Really what I want is all that text that is currently appearing underneath the horizontal line of each tab-- the Product Description and the Free Comics instructions -- to just appear under the Product Description tab with no duplication.
Here is a link to the text of my tpl_document_product_info_display.php file in case that is helpful:
http://alexwoolfson.com/tpl_document...fo_display.txt
Any help you could offer would be greatly appreciated. I've been banging my head over this for the last four hours... Thanks!
Alex
Under:
#slidetabsmenu a span {
Change:
color:#333;
To:
color:#fff;
The javascript uses the classes from tpl_display_product_info.php. In the "document" version of that file, it has different css tags (i.e. class="docProduct biggerText") so its not hiding the duplicates
I'll look to see what needs to change for that.
Oh, my gosh! You are awesome with your fast and helpful reply! :D
The page definitely is improved by changing all the text to white. Thank you! But... is there a way to just change the CURRENT tab's text to white? I think that would be the most legible.
I'm sorry -- I guess I'm not being very clear. Yep, right now ALL tabs are white -- which is OK. But I want just the CURRENT tab's text to be white -- the tab that is active -- the one tab that has the different color behind it. On my site, it is the one tab that has the darker red behind it, not the pink.
In the CSS, this tab seems to be referred to as "a.current" -- that's how I was able to add that darker red gif behind just that one tab using
But I can't figure out how to change the text and the hover for just that one tab and not the others to a different color. I've tried every variation of "a.current span" I can think of and I can't seem to get it to work.Code:#slidetabsmenu a.current {
background:url("../../images/tpp/tableft100.jpg") no-repeat left top;
background-position:0% 0px;
}
#slidetabsmenu a.current span {
background:url("../../images/tpp/tabright100.jpg") no-repeat right top;
background-position:100% 0px;
}
Is there a way to change the text and hover color for just that one, active tab?
Code:#slidetabsmenu a.current span {
background:url("../../images/tpp/tabright100.jpg") no-repeat right top;
background-position:100% 0px;
color: #FFF;
}
Thank you -- that works perfectly. (Honestly, I feel a bit foolish because I thought I tried that several times -- I guess it's just one of those things that magically works when you have the expert looking over your shoulder. Who knows what I was screwing up... Well, I very much appreciate your patience. :blush:)
Thank you very much for your excellent support. I very much look forward to the new tpl_display_product_info.php code.
Alex
Actually I just tried it on my test site with the document code and it worked fine, with only 1 product description. I was wrong about the class thing. TPP actually uses the id, which is the same in all display files so there are no changes needed for TPP.
(outsmarted myself :) )
Try my version of the file and see if it works.
Also what is your setting for the "Global Product Description Tab"?
Are you using any custom tag codes?
OK. So I tried your version of the file and I'm still getting the duplicate Product Descriptions.
(I'm leaving your version of the page up for the moment to help you with the troubleshooting. You can see it here:
https://store.yaoi911.com/index.php?...&products_id=6
FYI, for people just joining this thread, this link is Not Safe For Work and shows cartoon guys kissing.)
Here are the settings I'm using for TPP:
http://www.alexwoolfson.com/TPP_Settings.jpg
And there are places in my site where I use custom CSS tag codes, but you mean in this file, right? I don't think so and if your file still has the same problem, then that probably confirms it's not any weird tags I put into tpl_display_product_info.php, right?
Thank you very much for helping me troubleshoot this.
EDIT: ACTUALLY WAIT: I just looked over the page with my Firefox WebTools and for my description I see the tag "biggerText". Not sure where this would be coming from if I'm using your file, but maybe that's causing the problem? I would have wanted "bigger text" for this. Perhaps I added that tag somewhere and that is causing the problem. But if I didn't add it to this file, where would it be? I didn't add it to the Product Description HTML field in Zen Cart Admin for this product... Maybe it's a Zen Cart tag and I didn't add it?
Nevermind that last EDIT. It's in your file too. I just couldn't see it in Firefox because it scrolled off the screen.
Ah, well, thought it might be a simple solution... :blush:
So, don't ask me what I did, but somehow in editing my tpl_document_product_info_display.php and main_template_vars.php files, now the duplicate product descriptions aren't showing...
So, I guess, problem solved. :cool:
great mod... all installed and working great...
one question though, I've just changed my template width and think that the info would be better in line with the product image now... but can't figure out how to move tpp to this position.
I can get it above the main image, but not level with it?!
if it makes it easier site is here: www.ukbikegear.com
cheers
john
Easiest way is just to make a table and have the main image in one td and the tpp in another td.
hi qhome
that worked a treat, once i realized i had to get the image to be aligned to the top of the cell to stop everything jumping around when a tab was clicked... Thanks! :)
would using another table further down the page be the best way to arrange my Ask a Question button, Attributes etc?
it's official, i'm back in love with tables! all sorted now, thanks for your advice :)
Hi There,
i install the tabbed products pro v1 05 and everything work fine in the english lenguage. When i change the language into italian doesn't work properly anymore. can anyone help me on this?
eg: http://www.your-italian-weddings.co.uk/shop/avantgarde-p-1.html
Thank
Emily
You need to create a language file for italian for the tabs. I only included an english language file