Did some tweaking. It wasn't the cross sell. This was what fixed it:
.ditch-tab-skin-default .ditch-tab-wrap
width: auto
Does that sound logical to you? Thanks for your help.
Printable View
Did some tweaking. It wasn't the cross sell. This was what fixed it:
.ditch-tab-skin-default .ditch-tab-wrap
width: auto
Does that sound logical to you? Thanks for your help.
Well its probably an IE Fix, like most browsers, they all need little tweaks to display correctly under certain instancesQuote:
Originally Posted by styledata
Update on the new version:
- XHTML Validation passed
- GLOBAL enable/disable of header bars in tabs
- header bars will be present if javascript is disable on customers browser regardless of above variable. This is so the customer can see the different sections
- got add to cart button back on the tab.
OK, I've attached the first beta for you guys to test:
I've included a cross sell version again as well, but remember don't use it unless you have cross sell installed.
If you don't have any Cross Sell items or Customer Also Purchased items, it will auto-hide the tab for you even if you have it set to true. Also there are a bunch of other features in the read me. I will work on getting other ones like Additional Images to not show up if you dont have any but haven't yet.
Let me know how you like it (or hate it)
I really like how it is shaping up! The instant pull in for cross sell is great. What I don't like, on my site, is the white background in all of my tabs except crosssell. I want the background to show through. I imagine these are minor formatting issues in css???
You are the best!
btw styledata... if you are not going to use the <br /> on the custom tabs, you should edit the tpl file and remove it from the Additional Images tag name so it looks right.. i.e. http://www.photoimprints.com/custom-magnet-p-27.html
Also, i forgot to mention.. You should only use one of the included CSS files at a time. Now that I think about it, I didnt test background with those white/orange tabs.. but im pretty sure the silver tabs work fine on the background.
Also not sure why you have that space on the first tab header title always.. ill take a look at your source code.
wow, rapid development i might say... :thumbsup: very interesting to try out these mod! good job, Q... :DQuote:
Originally Posted by qhome
ghome,
I installed this latest version into my shop and i must say it's an awesome mod. The jscript is also way smaller in size which is a very good thing.
I do have some questions though,
1. Is it possible to change the orange color into something else without doing the image?
2. Can i put a border to left and right?
3. Can the tabs be moved to the edge so that they are aligned with the bar (the purple thing)?
4. Can i merge the 2 stylesheets together?
Thanks
You can see what im talking about from here
http://www.animestrike.co.uk/shop/in...&products_id=1
I am using the v3.1b cross-sell version of the template file.
From the settings for v.3.1beta
Quote:
//This will put the add to cart button and Options on the Product Description tab unless there are no custom tabs. If you are using only the core hardcode tags, then it will create a new tab for the add to cart as well
1. I have set the Globals for Add to Cart to true. The Add to Cart tab is generated but the add to cart button is still showing up below the tabs as previous (not within the tabs box as expected). Except for products with attributes, then both the attributes (options) and the add to cart button correctly appear within the tabs box.
2. And the Product Details tab is generated even when I do not have any product details. Even if Product Details global is on, should the Product Details tab not render, if no product details for a particular product?
3. The Product Description shows up on all products ABOVE the tabs, except for products where overriden by inserting product desciption tag.
And related I see no Product Description Global so must Product Description tag be set for each product so product decription is rendered within the tabs box? I did not think this would be the case?
4. I have ShowHeaders set to false, so that the 'title bar' will not appear for any of the tabs. But for most tabs the header bar still appears. For tabs generated by custom tags the title bars do not display.
5. For products which have Cross Sell (We Also Recommend) products designated, the We Also Recommend tab displays but the box below the tabs does not display and so no x-sell products display.
6. Using XP style tabs. Discovered the outer background of the tab is not transparent.
Some of these issues may be my own so I'm continue to troubleshoot but I thought I would post here if anyone observes the same and has found workarounds.
I am testing on a dev server not connected to the net so no URL to provide.
Woody
Only option is to use the other image set i included or change the image. There may be some way to do a roll over top border color, but you'd still probably want all white tabs then for your images.Quote:
Originally Posted by Berserker
Yes, in the CSS files, the last part:Quote:
Originally Posted by Berserker
.tabcontent{
border-bottom: 1px solid;
background: white;
color: black;
display:none;
}
remove the "-bottom" and it will. border the whole thing.. or add border-left and border-right how ever you like it.
Yes, in the CSS:Quote:
Originally Posted by Berserker
#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}
Change margin-left to 0px
I will work on that for the next release, i will have to do some renaming. Also, I might have a few more CSSs that I'm working onQuote:
Originally Posted by Berserker
That's great!!! You're awesome ghome. By the way, when you mention the CSS file and other image you included, which one are you talking about? There are 2 CSS, are you supposed to upload both of them?
Hmm I hadn't tested it without options. I will take a look at that today. I was having some problems when the options were above the AddToCart button, it would still kick the button outside of the frames. I can't understand why tho. But when i list the button first, it was fine. Quirky little ############## it is.Quote:
Originally Posted by Woodymon
Ya I stated I only added the ability currently for "Customers Also Purchased" and "Cross Sell" to auto-check if something exists. I will try to add Additional Images and Product Details to the next one.Quote:
Originally Posted by Woodymon
Well I only added globals for the Hardcode tabs. I guess since all products will have a product description I could do that as well, I'll have to look into it.Quote:
Originally Posted by Woodymon
Well, the header bar is a bit of a hack. It just clones the code that the normal modules like Customers Also Purchased and Cross Sell. So for "REAL" module calls for those two, I still call the php module file which handles the title bar. I added the title bar code to the rest of the tabs to make them match better with the real modules. So unless I move the entire code base into the page, I can't remove it for the module based sections. And that would be a bad idea in case they change something in a new zc release.Quote:
Originally Posted by Woodymon
I'll look into this as well. I thought I had ironed the bugs out but I slapped that code in quickly to get the beta released.Quote:
Originally Posted by Woodymon
Ya, I mentioned above I made a mistake. The xp style tabs are white background. The silver tabs work on all colors. I will try to make the silver tabs look like the XP tabs if I can so people can have that same look still.Quote:
Originally Posted by Woodymon
Upload one or the other. If u use the silver css file, it will use the Silver image tabs, if you want the tabs you have now you can upload the XPstyle CSS. If you upload them both, they load alphabetically, so you will still see the XPstyle ones cuz the CSS variables will be overwritten by the file named lower on the alphabet.Quote:
Originally Posted by Berserker
Thanks!!! AWESOME Mod!!! :) :) :)
RE v.3.1b,
I have the following settings:
$bGblAddToCart = true;
$bGblCrossSell_Tab = true;
(all other Globals false)
$bShowHeaders = false;
In my product description in admin I have inserted two custom tags as follows.
Text above.
<!--%Tag1%-->
Text
<!--%Tag2%-->
Text
The store product info pages display with following issues:
1. The Add to Cart button is not showing in the box below the Tabs (for lack of a better term I will call this the TabBox).
Iinsterad the The Add to Cart button shows up below the TabBox, that is, whenever the first tab is selected. When the second or third tabs are selected the Add to Cart does not display at all. :(
However when a product has attributes, then the AddtoCart button shows up in the TabBox for the first tab.
That is unless I have no custom tags in the product description. It that is the case then a AddToCart tab is rendered... but even then the Addtocart button is still rendered below the TabBox.
Hope this makes sense.
2. And as previously mentioned a title bar shows up only in some TabBoxes (e,g, CrossSell, AddToCart) but not others. Not sure but this seems to apply only to the tags which are set true globally?
On another note I was able to succesfully integrate the AskAQuestion button mod into the tabs system (thanks to good commenting provided by qhome).
I'm thinking I want to include the "For more info vist this products webpage string", and the Reviews and the Tell a Friend buttons in the same TabBox. And will title the tab "More Information". Then everything will be showing up in the tabs!
Also I notice in the TabBox the left & right border and padding are no longer present as in previus version. I'm sure easy to fix in CSS.
But first I need to figure out how to make the AddToCart Button show up in the TabBox when the product has no attributes/options or when I have no custom tags in the product description.
If anyone figures out the program logic to do this please do drop a post. ;-)
Woody
I would love to add the quantity disocounts box to a tab, but I'm no coder (yet!). I added the following to tpl_product_info_display file, but I guess something is not quite right yet:
$bGblProductQuantityDiscounts = true;
$productQuantityDiscounts = 'Qty. Discounts'; // If using the tabbed view for this info, set the tab title
$bProductQuantityDiscounts = strpos($proddata, "<!--#productQuantityDiscounts#-->");
if ($bProductQuantityDiscounts == true) {
$bProductQuantityDiscounts = 1;
}
Did I miss anything, and did it goof any syntax?
Thanks much!
Mods. to last, with no result yet:
$bGblProductQuantityDiscounts = true;
$productQuantityDiscounts_tab_name = 'Qty. Discounts'; // If using the tabbed view for this info, set the tab title
//########################################
$productQuantityDiscounts_header_name = 'Qty. Discounts'; // If using the tabbed view for this info, set the tab title
$bproductQuantityDiscounts = strpos($proddata, "<!--#productQuantityDiscounts#-->");
if ($bGblProductQuantityDiscounts == true) {
$bProductQuantityDiscounts = 1;
}
Am I getting any closer?? :)
Scroll up a few posts wood, I answered both of these in your original post and in BerserkersQuote:
Originally Posted by Woodymon
Well the first question is, do you really want it on its own tab? or do you want it to be in the same place as the Add To Cart tab?Quote:
Originally Posted by styledata
Q- Yep saw that after I posted. ;-)Quote:
Originally Posted by qhome
Had my thread reply window open for several hours, while I was testing away, taking notes, troubleshooting, hacking, and editing my reply as I went along, then finally submitting. Guess I should be checking the thread more often between posts. Thanks for the prompt and helpful replies. You support your mod very well!!!
BTW I now have the Reviews, Ask A Question, and Tell A Friend buttons and the More Info URL string all in one Tab Container, with a tab titled "More Information". That works well.
Also I disabled JavaScript to test if everything fell back gracefully. Only catch I found was, again, the Add To Cart Box stays right where it always is, out of place. With JS off it overlays on top of of some product description info :(
Wondering if some CSS tricks could put it where it's suppose to be?
If I cannot hack so the Add To Cart Box is placed in a tab container I will instead reloacte it above the tabs adjacent to the product name and price. After all that is where it was by default in ZC 1.2x before the upgrade to 1.3x
UPDATE: I've onl;y been testing in Firefox 1.5 Just tested in IE6 and found the AddTo Cart box does show up in the container for the first tab, in the lower right hand corner. And looks fine with JavaScript disabled.
So it appears the tab content container for the first tab is not stretching down to include the Add To Cart box in Firefox but is in IE. Possibly a class/div conflict?
I don't have another browser loaded so cant test in Opera or similar. (I should install Opera I guess).
BW I'm using stylesheet_tablitev3_xpstyle.css stylesheet.
I see the class applied to AddToCart box is #cartAdd. From my main stylesheet I find:
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}
And I see the div applied to the Tab Content container is #tabcontentcontainer
I assume class applied is .tabcontent
As displayed in stylesheet_tablitev3_xpstyle.css
.tabcontent{
border-bottom: 1px solid;
background: white;
color: black;
display:none;
}
Anyone see anything in the CSS above which may be contributing to the Content container not including the AddTo Cart box in Firefox?
Another note is the XP style buttons behave a bit funky/sluggish in IE.
I think it is time to test stylesheet_tablitev3_xpstyle.css
Woody
The problem with the Add to Cart exists on both CSS i included. I do nothing do control the location of the add to cart box. In fact, all tabs aside, the Add to Cart box has never really made sense to me. The default Zen-Cart core way has the Add to cart box above the options, So I initially put my add to cart button lower so it was Attribute Options first, the Product Details was inside that, then the Add to cart button.Quote:
Originally Posted by Woodymon
I attempted to remove the product details so that the options could be on the right and the add to cart on the left, but that mucked up the alignment of the options and there was this big gap in between the options. I think that is where some of the problem is now with the tabs, cuz of the way I was trying to get it to work.
I think the best thing to do would be to leave that whole chunk: Attribute Options, Product Details, Add to Cart, and Qty Discounts as a whole as a single tab. Then the product details will be enabled/disabled as they are currently via the admin panel and wont require a whole separate tab for those 3 dinky lines. Plus, if so desired you could move that into another tab like More Information pretty easily without having to change any code logic.
This should fix a few of the problems with add to cart, qty discounts, and prod details showing a tab whether they exist or not.
One last comment then will give it a rest.
Just played with stylesheet_tablitev3_silver.css, I found I like the display of the silver tabs more than the XP style tabs (although a color foreground tab would be cool, even for the silver tabs).
The silver CSS by default displays the text on the tabs at a smaller size and is more difficult to read than the text on the XP style tabs. Bumping up the font size and decreasing the leading might be good. And moving the base of text on the tabs down a bit as the darker tone at the edge of the relection at top of the tab somewhat interferes with readability. Maybe I can do all this via CSS?
I really like this tab system. Definitely cool! Thanks again.
Woody
I think you are on the right track. At the very least Attribute Options, Add to Cart, and Qty Discounts should stay on the same tab, and should be on the initial tab.Quote:
Originally Posted by qhome
The Add to Cart button is everything. I wan t customers to click it. And to do that they need to easily find it and not easily lose it. Almost back to my point that it maybe should appear above the tabs, not on a tab. But the attreibutes/options need to stay with the add to cart and for those with many options, displaying all that above the tabs can be a bit messy.
Isn't user interface design fun. Especailly when you have to design for multiple browsers, and if JS is disabled or not ;-)
Yep all the tab stuff is CSS based, font size, padding, colors, hover color, etc.Quote:
Originally Posted by Woodymon
If you want a diff color background u can easily edit the image files in something as simple as MSPaint to change the silver to something else. Its only 2 files, and you'll notice there both colors in the same file.. They are 2 tiered images and the way the images work are by sliding them up and down when the mouse hovers on them. So it's much simpler to work with.
I also have a blue/white colored one that i've been playing with that has 3 tiers that can be different for currently clicked tab, currently unclicked tab, and mouse hover.
Quote:
Originally Posted by Woodymon
oh yes.. now excuse me while i reload my gun.... :P
I think I do want it on a tab. The add to cart button MUST be at the end of all the attributes.Quote:
Originally Posted by qhome
When I set $bGblMainImageOnTabs = true;
it looks SUPER, tabs at the top, everything lined up nicely. But the qty price breaks table disappears from the layout.
just thought about your question again. Yes, the quantity price break table MUST appear at the top of the page. The first thing customers want to know (from years of exp. on my previous site), is what the prices are! I have never understand why ZC layout has it at the bottom as default. But then I do have long pages of options that make the prices not visible in the first screenful. And it never fails to amaze me how many people still don't know how to scroll down the screen!Quote:
Originally Posted by qhome
Thanks...
Well I would just assume either way that you'd want the price table to appear at the same time as the add to cart button.. so either all on the same external tab, OR price table above tabs with the main image and the add to cart button on the first tab. The price table at the top is something you could easily modify for your own customization (i think I can help you with that) .. for now i will just include the Qty price table, the attrib options, add to cart, and product details on the same tab.Quote:
Originally Posted by styledata
ghome,
Im getting an "Error on page" on the bottom left hand side of the page when this is installed. I removed this mod and the error disappeared and when i put it back, it's back there again. Is this normal?
Site reference is www.animestrike.co.uk
Hmm i dont see any error on that page. The only spot you should be gettin an error would be if you were using the CrossSell version of the template without actually having the CrossSell contrib installed.
Hi,
On the main page, i get the error below:
Line: 48
Char: 1
Error: 'null' is null or not an object
Code: 0
URL: http://www.animestrike.co.uk/shop/
On the product page, i get the error below:
Line: 278
Char: 9
Error: Object Required
Code: 0
URL: http://www.animestrike.co.uk/shop/in...29055f86cfe5e2
These errors are all in IE. They're not showing in Firefox
Considering that quantity price breaks are one of my biggest draws, that needs to be up top and prominent. And considering I have a long list of options to select, it's important that the Add to Cart button be at the bottom so that folks don't jump the gun and get an error message.Quote:
Originally Posted by qhome
Thanks,
I see the same on ALL my shops pages in IE. Appears to be JavaScript related errors.Quote:
Originally Posted by Berserker
Honestly I don't know if this was occurring before the update of the TPL v.3.1b mod from previous 2.7c.
But everything appears to be working.
Right thats what i said.. for the contrib im going to put them all together so that they are together either in tab or out of tab, but for you i will help you put the qty box up top separately.Quote:
Originally Posted by styledata
Zen Cart devs and Q have commented the product info code very well. You can move things around within each tab container fairly easily.Quote:
Originally Posted by styledata
OH u mean in the error debugger icon at the bottom left... hm well its definitely related to the javascript file for the tabs. Looks like something the code is trying to get but its non-existant.. its not really effective anything, but it looks ugly.. Ill take a look.Quote:
Originally Posted by Berserker
OK, the problem is that the zenmagic loads the javascript files in the template folder for all pages. The script is looking for a certain tag variable which it isn't finding on any of the pages that dont have the tab code, so it can't do the function call its trying to do so it errors out.
Im not a big javascript programmer, but I hope with a little code logic I can make it not load if that value is null.
Stay tuned....
Will stay tuned. Good luck and hope you get it sorted :)
Ok i got the javascript fixed.. wasn't too bad. ;)
I also got the add to cart stuff fixed up. cleaned up a little.. but still needs a final cleaning.
Woody, I have been workin on your "Global Products Description Tab" for a few hours now and I'm really close but it's a real sunavagun. I will try to release it with the next beta but for now test out this one and see if everything is workin for you.
For style data, I will try to help you re-position that qty box as I dont have that on my site so im not sure what it looks like by default.
here ya go.. lemme know :)
(3.1 beta 2)
Hey Q-Quote:
Originally Posted by qhome
Can you detail what has been fixed and which are outstanding issues and/or on the latest to do list? Unless the issue of the add to cart box not showing up within an assigned tab is really repaired I wiill hold off installing the new beta as I have done extensive changes to the template file and merging can be a very time consuming ordeal.
With the new version is it also possible to render the Add to Cart box ABOVE the tabs? I think this is where I need it to go for some products. So I actually need the option of putting it on a tab or above the tabs).
Can you explain exactly what you plan for that tab. That is, how does the logic work?Quote:
Originally Posted by qhome
The ovearll tabs logic is getting advanced with all the nested if else logic it is difficult to test all the possible permutations. That is understanding what happens if the tab is a integrated into the system (core), or it is set by hardcoding a tag, and at the same time what happens if global is set for the core tabs. Observing some unexpected results on v.3.1b.
So the quantity box is not included in the "Add To Cart box"? (the add to cart button and the qty box makes up the Add To Cart box). The Qty box is really a must have.Quote:
Originally Posted by qhome
If you happen to get it figured out and put up a demo with the Qty box included please let me know the URL.
Woody
ghome,
I still get the same errors in IE even with the new jscript. The error in product page disappeared after i uploaded the new tpl_product_info. The error in the index page is still there even will all the new files.
OK I see readme history shows:
With this known I will redefine my question a bit.Quote:
07/17/2006 - v3.1(beta 2) - qhome
- fixed javascript null errors.
- fixed and merged Add to cart, Attribute Options, Product details (Stock, Model, etc), and Qty Discounts. Now all on same tab.
I don't use the product details or qty discounts. And only my softgoods (downloadable products) have attributes (and just a single attribute).
So if I understand the updated readme correctly, in my case, the Add To Cart button would display all alone by itself on one tab? (I think you recently stated the quantity box does not show up correctly yet with the Add to Cart button, in the new beta anyway).
Or can the Add To Cart box (with quantity edit field) be placed on the first tab along with some product description text?
And/or can the Add To Cart box be placed above the tabs?
Need to know above before I decide or not to install/merge new beta version template file.
Did you receive the PM with code and javascript to insert into /admin/product.php file?
Woody
LOL .. i see i've thoroughly confused you all! And in my haste to get this out before noon (I had a half day at work and wanted to get this out) I seem to have forgotten to upload the new javascript file. So lets see if we can straighten this mess out.....
The add to cart stuff is totally fixed. THe "cleaning up" was in reference to general tabbing and commenting, but for the most part that is also pretty good. Keep in mind tho that these are betas and you shouldn't be doing too much to merge them around or use them on live store. I am first trying to get a feel for what the majority wants in terms of features and straighten them all out first.Quote:
Originally Posted by Woodymon
As you mentioned above, the Zen-cart team commented their code pretty good and I've left their comments in. So its really more of a personal customization, not related to the tabs. If you want to move the <!--bof Add to Cart box--> contents around then feel free to do so. Simply disable it from being on the tabs and it will spawn in its normal core spot. Then move that code to the top by the main image and it will be up there. If you need help with that, I can show you, and I've done it myself to test it.Quote:
Originally Posted by Woodymon
Based on what you mentioned previously, I set it so that if you set the Global Products Description variable to TRUE, then it autocreates a Product Description tab and puts the product description in that tab. I have it working fine, its just the combination of that and image inside the tabs and add to cart in the tabs that needs to be tweaked.Quote:
Originally Posted by Woodymon
Not sure what you are seeing on your site. But the only "odd feature" was this:Quote:
Originally Posted by Woodymon
If there IS at least one custom tab, and the Add to Cart variable is true, then it will add that add to cart button to the first tab automatically. If there is NOT at least one custom tab, then the Add to cart stuff will autocreate its own tab, and it will always be the first tab, since the main product description will not be in a tab and will be above the tabs. By custom tabs i mean you actually put <!--%Tabname%--> into the actual product description in the admin area. This was done so that no matter what, customers could see your add to cart button without having to navigate around.
I really confused you here.. the "Quantity Discount" box is what styledata is talking about. See his site has a table that shows if you buy larger quantities, you get more of a discount on price. so 1-5 for $5 each, 6-10 for $4 each, 11+ for $3.50 each. he wants that table to be at the top so I told him I'd help him put it there as a side item, but the actual TabbedLite contrib would keep all "Add to Cart" functionality as a whole including the Add to cart button, the Product details (model #, stock, etc), the Attribute options, and the Quantity Discount table just as they are laid out in the core Zen-Cart.Quote:
Originally Posted by Woodymon
Yes.. its the exact layout that Zen-Cart core uses. So if you ahve them disabled in the normal admin area, then they will be disabled here as well.Quote:
Originally Posted by Woodymon
You can see it at my demo site.
--------
I've attached the updated javascript changes to fix the errors in IE.
Forgot one...
Yes this has been possible since verstion 2.0.. read up above where i mention the "odd feature" to see how it behaves.Quote:
Originally Posted by Woodymon
ghome,
Thanks for the new jscript. The error in the index page is no longer there, but in the product page it still show up when the header is FALSE. If you turn this header to TRUE, it disappear. I don't know why it errors when false but i would prefer to hide this header (extra image to load). Can this be deleted in the jsript or css?
Its just a logic check to see "if exists.. then do it".. Currently it doesnt check if it exists first and it just tries to do it. I will add some logic to check on all jscript parts to verify they are there first in the next release.Quote:
Originally Posted by Berserker
here is a fix if u dont want to wait.
find:
Replace with:Code:if ($bShowHeaders != true) {
// Hide tab header if JavaScript is available/active but they are set to false
echo ("<script type=\"text/javascript\">
<!--
document.getElementById('ProductDescriptionHeader').style.display = \"none\";
document.getElementById('DetailedSpecsHeader').style.display = \"none\";
document.getElementById('AddToCartHeader').style.display = \"none\";
document.getElementById('AdditionalImagesHeader').style.display = \"none\";
document.getElementById('ProductDetailsHeader').style.display = \"none\";
-->
</script>");
}
Code:if ($bShowHeaders != true) {
// Hide tab header if JavaScript is available/active but they are set to false
echo ("<script type=\"text/javascript\">
<!--
if (document.getElementById('ProductDescriptionHeader') != null) {
document.getElementById('ProductDescriptionHeader').style.display = \"none\";
}
if (document.getElementById('DetailedSpecsHeader') != null) {
document.getElementById('DetailedSpecsHeader').style.display = \"none\";
}
if (document.getElementById('AddToCartHeader') != null) {
document.getElementById('AddToCartHeader').style.display = \"none\";
}
if (document.getElementById('AdditionalImagesHeader') != null) {
document.getElementById('AdditionalImagesHeader').style.display = \"none\";
}
if (document.getElementById('ProductDetailsHeader') != null) {
document.getElementById('ProductDetailsHeader').style.display = \"none\";
}
-->
</script>");
}
ghome,
The errors all gone now :) Thanks a lot!!!!!!!!
Hi got a strange problem and not sure if it is this or the css flyout addon.
With the css flyout menu it places the submenu links under the window of the tabs(floats under). If no tabs are used the flyout menu is fine. So it is as if the tabs have priority of display (on top) and the rest renders under.
Any ideas ?
Perhaps a Z-order thing with the flyout is needed. I dont think they were designed to flyout over an image.. but Im not sure how all that works.. does it happen the same on ALL browsers ?Quote:
Originally Posted by IntelCos
Yep, all browsers (fox and ie)Quote:
Originally Posted by qhome
got a link? I could play with some settings to see if i can see in the source where the problem is.
For products without attributes the Add to Cart box still does not display in the tab container in Firefox.
I'm parsing thru the logic right now to see what's up.
GRR.. That add to cart box is a real ##############. If I put that add to cart at the bottom of the of the order it also shows up off the tab.. even tho it is actually associated with the tab, (i.e. if you click a new tab, it will hide the add to cart box. For some reason, because of the way it floats, I think it runs out of room on the screen or something and floats below the line. Not sure why it didn't do that do that on the old tablite version.Quote:
Originally Posted by Woodymon
I know if the older version there was more div nesting, I wonder if that did it, or if maybe there was some CSS in one of the outer divs that prevented things from floating outside of it. I will look into it more. Maybe if the addto cart box isn't set to float but I really want to avoid having to make core css changes.
Should we be moving over to that new V3 Javascript file?
if so, do we just replace the current one, or is there more too it?
any help would be great.
thanks
Benjamin
use the v3 file with the v3.1b versions. You can delete the v2 version or you can leave it. they wont conflict eachother, but I wont support th v2 anymore as the code was too bloated for simple tabs.Quote:
Originally Posted by wickedklown
and UPDATE about that damn add to cart button. It seems the diagnoses is known as a "FloatDrop"
see here: http://nemesis1.f2o.org/aarchive?id=11
Its seems floats do not have definite mass and simply "float" over things, which makes sense. It appears the best fix is to surround the float by a table which has a definite mass to it. If you remember I added a table and td tags to the last version for something else and I guess that indirectly fixed this problem too so thats why you didnt see it then.
So I tried it out and I got it working. its a minor fix and it seems to work on all 3 main browsers (Opera, IE, FF) But i'd have to add table tags around the add to cart stuff.
Alright. it seems to work pretty good actually.
its a simple table putting the product details, attrib options, and Qty Discount table on one side, and the add to cart button on the other side. In fact, this is what the core zc template SHOULD have looked like even without tabs.
see all 3 demo products at the demo link in my signature.
Very good! Has the download been updated with the fix?Quote:
Originally Posted by qhome
3.1 Release Candidate 1!
Here you go. Give it a whirl.
- Fixed more javascript errors. That should be all of them now
- added ability to hide headers when javascript is on OR off
- Merged the Cross Sell version with the main version to make it easier to maintain. Now you can set a flag if you have CrossSell installed. Don't enable it if you don't have it installed or you will get errors.
- Made the whole Add to cart, Attribute Options, Product details (Stock, Model, etc), and Qty Discounts in a table now to fix the floating problem. Looks and works 10 times better now :)
- Enabled Additional Images, Customers Also Purchased, and Cross Sell to check if there is any content for them. If not, then don't load the tabs for that product even if the global is set to true.
- If there are no tabs at all I hide the entire tab container to prevent extra border lines from the empty shell.
Hi Q,
I was going to download this newer version but noticed something on your test site...
Above one of the tabs is . "\n" which I believe shouldnt be there.
HTH
LOL CRAP
was trying to make it look better when looking at html source code from the browser and once again my last second change screwed me.
Fixed.....
Dont worry, its not crap! :wink2:
Any idea why the tab dissapears when rolled over, leaving just the text?
Ahhhhh I figured it out, its not dissapearing, its just reloading.
hmm shouldn't reload.. its just an image that when u mouse over, it shifts up and when u mouse out, it shifts down.
Yea it does that in FF, but reloads (or appears to reload) in IE6.
not seeing that on IE either. 56k modem? and 486 pc ? :P :D
Not quite, its a spectrum 48 ;)
Not really... what I do have is..
Optical fiber internet connection, bloody fast dell, and a central Tokyo location :)
Ahh.. so ... slow :D TabbedLite requires a minimum OC48 connection. :PQuote:
Originally Posted by Reesy
...sigh....
It's funny how AFTER i release things, I find all the small bugs...
Had some hardcoding for headers that I needed to loop with a variable.
Fixed.. AGAIN. This time it's good.. I SWEAR!! :)
Just the tpl file has changed btw
About to install RC1.
One item for wishlist. Add a "More Info" tab to include More Info URL, and Reviews, Tell A Friend, and Ask A Product Question buttons (if any of these items are enabled).
I have found that feature very useful.
Woody
3.1 Final Released!!!
OK I've tweaked a few more things.
I added the ability to add text below the tabs now :) It was ridiculously simple. Other than that I just cleaned up a few spaces and I think its time for this to go Final.
I've uploaded the 3.1 Final to the downloads section. Here is the link (might take time for mods to approve the file so be patient)
http://www.zen-cart.com/index.php?ma...roducts_id=146
I've also cleaned up my Demo site a bit to show more examples of what can be done and what it looks like. Click Demo link in my signature.
Here is a complete list of all the changes in 3.1 for those just joining us:
- Completely new tab code and setup. Much smaller code and css.
- Completely new images and css. Also using image shifting now so there are less images to load.
- Two Different stylesheets/image sets for different tab looks. Also easy to make your own. The silver style (default) has complete transparent backgrounds so the bg color of your page doesn't matter.
- Complete CSS control on tab text, rollover, and more.
- Added GLOBAL enable/disable of hardcode tabs as well as individual
- Added GLOBAL enable/disable of header bars in tabs. Also added ability to hide headers when javascript is on OR off seperately
- Added ability to add text below tabs. Add <!--@EndTabs@--> to your product description and all text after that will be after tabs :)
- Merged the Cross Sell version with the main version to make it easier to maintain. Now you can set a flag if you have CrossSell installed. Don't enable it if you don't have it installed or you will get errors.
- Merged Add to cart, Attribute Options, Product details (Stock, Model, etc), and Qty Discounts. Now all on same tab in a table. Looks and works 10 times better now and prevents the Add to Cart button from floating off the tab container :)
- Enabled Additional Images, Customers Also Purchased, and Cross Sell to check if there is any content for them. If not, then don't load the tabs for that product even if the global is set to true.
- If there are no tabs at all I hide the entire tab container to prevent extra border lines from the empty shell.
- Added some "\n" to make the HTML source code from the browser look cleaner
- Cleaned up some comments and spacing.
THANK YOU TO ALL OF YOU THAT HELPED ME TEST THE NEW VERSION! I HOPE YOU LIKE IT
@Woody, I will look into adding the More Info and Global Product Description tabs in the next version. I'm not sure yet if I want to make separate tabs for reviews and tell a friend and put the actual form code inside there instead of just the link.
NOTE!! The version I uploaded has the Cross Sell stuff set to true, so if you don't have it, you will get errors right after copying the file. Edit the TPL file and set those settings to false. Sorry. I meant to do that before I uploaded it.
Hi Q!
I just wanted to say, nice work sir.
Ive added simple buttons to the admin to add the tab code into the product description and will upload it soon (tomorrow somewhen).
Ive also changed the X sell setting you forgot to change for you.
Great. ya I just got some checkbox buttons from woody that help me a great deal put snippets of text in place for me on my admin->orders page so im sure a similar setup for this would be great.Quote:
Originally Posted by Reesy
Woody, I rearraged the AaQ button just on top of the tabs and doesn't look bad, if you want to know what and how to rearrage, let me know.Quote:
One item for wishlist. Add a "More Info" tab to include More Info URL, and Reviews, Tell A Friend, and Ask A Product Question buttons (if any of these items are enabled).
I have found that feature very useful.
ghome,
im using this final version 3.1 but im just wondering if i could use the tpl_product from beta 2 instead of the one here in the final version? if yes, do i have to change anything to the other files in this new version?
Thanks for this awesome mod!!!
RC1 changed quite a bit from beta2. Is there any reason why?Quote:
Originally Posted by Berserker
here was change list from beta2 to RC1
Its up to you, but the supporting files will work with it.Quote:
Fixed more javascript errors. That should be all of them now
added ability to hide headers when javascript is on OR off
Merged the Cross Sell version with the main version to make it easier to maintain. Now you can set a flag if you have CrossSell installed. Don't enable it if you don't have it installed or you will get errors.
Made the whole Add to cart, Attribute Options, Product details (Stock, Model, etc), and Qty Discounts in a table now to fix the floating problem. Looks and works 10 times better now :)
Enabled Additional Images, Customers Also Purchased, and Cross Sell to check if there is any content for them. If not, then don't load the tabs for that product even if the global is set to true.
If there are no tabs at all I hide the entire tab container to prevent extra border lines from the empty shell.
Qhome, I am not sure if you're aware or not that something is wrong with the images on your demo site. Your site is loading the same image for small, medium, large (size-wise) although it's resizing the width and height correctly, it's not truly resizing the images. I am assuming that this has nothing to do with the contribution right?
qhome,
it's nothing really. i just thought that since im not going to use some of it's other features that you have added, i might use the old one since size wise it's a bit less. but i guess i'll stick to this one :)
thanks again
hmm I dont have medium or large images for my demos so it would automatically load the same image.. thats a zencart feature. But I do notice the small is smaller than the default size of the image, the medium is also smaller than the actual image, and the large= the actual size of the image.. so it still appears to be working size wise as well.. but dont expect huge pics as i only have the one in the main folderQuote:
Originally Posted by BlessIsaacola
BTW.. are you still lookin to get this on your music product type? Now that I've finalized it, I can work on converting a music version.
If the size bothers you, you could remove all the comments, but really, most files are much larger than even this one, they fool you by their size, but they do so many php requires and includes that when they load, they are quite large. Most of the size in my file is just comments tho, so they wont slow down rendering on a browser.Quote:
Originally Posted by Berserker
This last update is not working nice for me. :schmoll:
The "add to cart" box is floating on the right side besides the attributes. Is there a way to change this? just the way it was before...
Hmm that last update forces the add to cart button to be on the right side of the attributes. Its a feature. Just like the core zen-cart has. Only difference now is it's all in a table. if you want the add to cart button customized you can move it just as you would on your own core template, set Add to Cart on tabs = FALSE which would put the add to cart stuff under the tabs and it would look like the normal zen-cart template. Then, starting after the linesQuote:
Originally Posted by ideasgirl
everything after that is the Core Code. So now find the <!--bof Add to Cart Box --> and move it to where you want.Code://-------------------------------------------------------------------
//-------------------------------------------------------------------
//-------------------------------------------------------------------
//--------------------- End of Tab Parse Code -----------------------
//--------------- (some code below for tab checking) ----------------
//-------------------------------------------------------------------
//-------------------------------------------------------------------
Or if u want it on the tabs to be moved around, then you'd need to go around line 524 and move them around within the tab. but u'd need teh tables to stay so the button doesnt float off the page.
Not sure if this is ZC default because I haven't changed it. Only added the AaQ module... Maybe showing you?
Here are the pics of the old version, and the new version...
I added that table there because if you dont' have attribs.. then it would break the floating add to cart button. I was trying to make it look better but I didnt take all looks into consideration. You can simply remove the table tags from around the add to cart section.Quote:
Originally Posted by ideasgirl
To fix, open the TPL and find on line 517:
// ------------------------------------------------------------
// ------------------- Core Contents Tabs ---------------------
// ------------------------------------------------------------
about 15 lines down, delete (line 536):
then find and delete (line 570):Code:<table border="0" width="100%"><tr><td align="left">
then find and delete (line 596):Code:</td><td align="right" width="35%">
that should fix it but be sure you dont delete any thing above that first line I showed aboveCode:</td></tr></table>
Maybe in the next version ill check the table view to show only if u don't have options
Quote:
Originally Posted by ideasgirl
Wait..
im sorry.. i looked at the pics wrong..
i will look into helping you make it the way u like it.. its a minor table thing that changed from the old version.
Did you want the Qty discount table out of the tabs?
Installed latest rev, but results found were that ask a question was now not been seen and as for the xcross-sell, the tab showed but no products were shown.
Previous version works as product info box shows my ask a question and my x-sell group shows with products, so have no clue whats up on that. Reverted back...snif:sleepy:
Also, this is not a very friendly addon to multi-lingual sites. Should make this more friendly towards dual or multi-lingual sites.
Still having issues with this and css flyout-menu, for the moment I've added text above and shifted a few things down to avoid this, not really what I want for this though.
Ask a question? hmm that is a contrib if im not mistaken, you'd have to manually merge that as I never supported that... maybe in the future but the only third party contrib I support is Cross Sell and that was just to see how hard it would be to do. There is a Add on readme file i included to help add your own.. I will assist the best I can. But that one shouldn't be more than a simple snippet of code to be addedQuote:
Originally Posted by IntelCos
There should be no reason this couldn't work on a Multilingual site. All tab names are variables listed at the top of the tpl file, as well as the tag text in the Product Description.Quote:
Originally Posted by IntelCos
Simply change "<!--%Product Description-->" to <!--%Descripción Del Producto%--> and change the names for the hardcode tags from "We also recommend" to whatever that is is your language of choice.
This contrib is completely multilingual.
I will look into the crosssell problem. DO you have a link i can check?
No, I want it in the tab, just besides the "Add to Cart" (where is the logic place to put it).Quote:
Did you want the Qty discount table out of the tabs?
Thanks! This wasn't working neither. :unsure:
Hey Q-Quote:
Originally Posted by qhome
The Ask A Question (AAQ) mod renders a button on the product info page just like Tell A Friend (TAF) or Reviews.
I do understand that you don't have the time to integrate support for every mod out there which customizes the product info page.
However since supporting AAQ in TabbedLite i(TL) s a bit more involved than just adding a single snippet of code, I also previously requested AAQ be integrated into the TL mod, as X-Sell is. Otherwise every time a TL update comes out, even betas for testing purpose, I have to remerge the AAQ logic into the mod, which makes me not want to test ;-)
For those whom are interested I will take my custom code which renders AAQ, TAF, Reviews buttons and the More Info URL onto a single tab in TL 3.1beta 2 and integrate into the final 3.1.
Then if you would like I can provide for inclusion into your next version.
Woody
Hmm ask a question is really only a snippet of code on the TPL page. There is supporting code in the read me if you choose to add it to the default style, but the button link is a simple 2 line piece of code. But yea if you want to share yours woody, or anyone else thats fine.Quote:
Originally Posted by Woodymon
when u say this wasn't working, what do you mean? the add to cart button or the qty discounts? Cuz in the old version i didnt have qty discounts, but the new version i definitely do. . actually a quick fix for you would probably be:Quote:
Originally Posted by ideasgirl
on line 484 find:
</td><td align="right" width="35%">
replace with"
</td><td align="right" width="35%" valign="bottom">
That should put the add to cart button in line with the Qty Discount box. as you have the place holder in the images u showed
Quote:
Originally Posted by qhome
Make that line 570, not the one on 484, (although u could do that to all of them if you like, there are 3 lines like the one above)
What I mean is that they are not aligning how it's supposed to with any of the directions. :dontgetitQuote:
when u say this wasn't working, what do you mean?
There's something wrong the the table/s code that's not right, it's all messed up. I've been 3 hours on this, :frusty: they don't align or work how it's supposed to. When I finally got them aligned, the tabs don't work. :down:
One of the reasons I'm upgrading is to take advantage of this great module, I'm almost giving up. :unsure:
hmm i must not understand what you want exactly. You want the top of the Quantity Discount box to be aligned with the top of the add to cart box?Quote:
Originally Posted by ideasgirl
This Demo looks much like what you want
http://www.unbannable.com/zen/index....&products_id=2
The Add to cart button is lined up with the bottom Qty Discount table.
or am I missing something?
Just installed new release.
I found if one of tab's description has 2 lines, the left tabs will have 1 white strip on the bottom.
any idea?
attached pictureQuote:
Originally Posted by ericpeng
ya, you need to edit your tpl file and remove the <br /> from theQuote:
Originally Posted by ericpeng
$cust_also_purchased_tab_name and the other hardcode tab nameswhich are located at line 60-64
I left all of the hard code tabs word wrapped like that, so if u don't plan on using word wrap like I have on the demo, you simply can remove the <br /> tag from all the hard code tab names in the tpl file.
There are a lot of settings in the top of the TPL file, I tried to document them really well, but maybe I should group them all together more... or maybe add it to the admin section.
Also, note that my demo site has improved and you should actually read the Demo Product's information because I am showing different features with each product and I explain about how they work within the description.
Quote:
Originally Posted by qhome
Thank you, it works. I'll look at your demo too.
ERIC
Is it diffcult to set "Product Description" only globally just like "AdditionalImages".
Thanks
Yes, but if you look to yours, the Add to Cart is in another column out of the table of all the attributes and Qty Disc Box. And if you have many attributes and/or pictures they are going to be all james on the left side of the tab/page. I want it as in my sample picture, where you can see everything is in 1 table perfectly aligned and there's also space available to fit in the QDB. Managing and twisting the tables I got to do it but then the tabs weren't working. All the secret is on the table/s code (as said before) but I'm not good with all this coding thing.Quote:
The Add to cart button is lined up with the bottom Qty Discount table.
or am I missing something?
Maybe tomorrow starting fresh, I'll get it. :sleepy: >>if you don't beat me at it<<.
Thats on the todo list for the next version. Its almost working, but needs some tweaking when combining with the add to cart and main image settings.Quote:
Originally Posted by ericpeng
Well thats how it WAS.. but on my latest demo, i have the attribs table cell set to the full width of the page, and the qty discount and add to cart in a whole new row, so if you have a lot of wide attribs it wont be squished now.Quote:
Originally Posted by ideasgirl