Tabbed Products ''LITE'' version - Delimiter based

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

mrmarcus66:

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

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

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

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

(Gotta wait till the mods approve it)

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

qhome:

Really? I thought I made it easier with 2.6. Well to save you the trouble you should probably hold off until the next patch release.
My apologies. My compare application reported change warnings when it identified all the new comments and the new space indents. I printed out code and walked through the logic and found everything is good.

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

Several questions:

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

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

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

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

Thanks, Woody

Woodymon:

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

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

Woodymon:

Will the new tabs configuration impact how search engines spider/index the product description data.
New tabs do not change anything with the spidered html. Also see answer to next question....
Woodymon:

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

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

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

Hope that clears it up.

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

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

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

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

Anyone else observing such?

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

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

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

Thanks, Woody

Woodymon:

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

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

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

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

Anyone else observing such?

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

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

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

Thanks, Woody

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

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

Woodymon:

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

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

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

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

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

FIND (Around line 458):

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

REPLACE WITH:```
echo '</td></tr></table>';
echo '<br /></div>';
$a++;
}

Also, I found a typo I made on line:

Line: 672 > $bCustomerAlsoPurchased should be $bCustomer**s**AlsoPurchased

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

Thanks for lookin out Woody :)

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

qhome:

Found the bug! Had an If statement closing tag closed too early. Here is the fix: (Around line 458)...(just move the closing bracket below the echo statments.) Also, I found a typo I made on line: Line: 672
Very quick and good with your bug fix! All better now. Thanks! I printed the file out and combed thru code with a highlighter ensuring all opening/closing tags for divs, table/tr/td, and nested ifs were properly matched. And all came up fine. I don't think I would have found the logic error. Thanks again.

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

Woody

Alik:

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

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

Woodymon:

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

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

Woody

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

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

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

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

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

Thanks for info on php dev tools.

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

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

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

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

I have updated the tablitev2.css stylesheet as follows:

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

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

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

.ditch-tab-skin-default .ditch-focused .ditch-tab-bg-left {
background:transparent url(../images/default_tab_bg_white_transparent_left.gif) 0 0 no-repeat;
}
However both the focused and unfocused tabs still show white in the left corners. But the right corner of both the focused and unfocused tabs indeed correctly appear transparent. Thus is there an issue with the two supplied *transparent_left.gif images?

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

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

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

Thanks,
Woody

Hey woody,

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

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

The original options I could think ok were:

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

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

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

qhome:

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

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

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

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

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

Heh.. to clarify.

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

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

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

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

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

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

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

#productDescription1 {
text-align: left;
}

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

You can see the site at: http://www.clf1670.org/cart/index.php?main_page=product_info&cPath=1&products_id=4

Thanks,
Kevin L.

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

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

Kevin L.

qhome:

Heh.. to clarify.
Q-

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

woody

scubes13:

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

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

This is actually a bug that I created trying to be "w3c compliant". It gave me errors saying that I couldn't have multiple of the same div ID.. but I didn't think about it being in the CSS like that. Really the class is class="productGeneral biggerText" so I would think that the CSS text-align:left; should fall under that category in the core zen-cart css file.. But Im not a CSS expert. A couple of ways you can fix that:

1. add text-align: left; to the 'productGeneral biggerText' section of the zen-cart css file.
2. In the tabbed tpl file, find all instances of id="productDescription'.$a.'" and change them to id="productDescription". This will throw a minor annoyance in the xhtml validator tho.. but it still shouldn't affect anything
3. Add
   #productDescription1, #productDescription2, #productDescription3 {
   text-align: left;
   }
   for all the potential tabs you will need.

I think choice 1 "should" work though.

scubes13:

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

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

Kevin L.

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

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

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

Q -

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

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

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

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

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

Thanks,
Kevin L.