Tabbed Products ''LITE'' version - Delimiter based

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.

styledata:

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 instances

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.

qhome:

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)

wow, rapid development i might say... :thumbsup: very interesting to try out these mod! good job, Q... :D

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/index.php?main_page=product_info&products_id=1

I am using the v3.1b cross-sell version of the template file.

From the settings for v.3.1beta

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

Berserker:

1. Is it possible to change the orange color into something else without doing the image?

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.

Berserker:

2. Can i put a border to left and right?

Yes, in the CSS files, the last part:

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

Berserker:

3. Can the tabs be moved to the edge so that they are aligned with the bar (the purple thing)?

Yes, in the CSS:
#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}

Change margin-left to 0px

Berserker:

4. Can i merge the 2 stylesheets together?

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 on

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?

Woodymon:

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.
   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 bastard it is.
   Woodymon:

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?
   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.
   Woodymon:

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?
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.
Woodymon:

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

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

6. Using XP style tabs. Discovered the outer background of the tab is not transparent.
   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.

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?

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.

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.

Text

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?? :)

Woodymon:

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

Scroll up a few posts wood, I answered both of these in your original post and in Berserkers

styledata:

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?? :)

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?

qhome:

Scroll up a few posts wood, I answered both of these in your original post and in Berserkers

Q- Yep saw that after I posted. ;-)

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