Tabbed Products ''LITE'' version - Delimiter based

Woodymon:

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?

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.

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

qhome:

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.

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.

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 ;-)

Woodymon:

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

Yep all the tab stuff is CSS based, font size, padding, colors, hover color, etc.

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.

Woodymon:

Isn't user interface design fun. Especailly when you have to design for multiple browsers, and if JS is disabled or not ;-)

oh yes.. now excuse me while i reload my gun.... :P

qhome:

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?

I think I do want it on a tab. The add to cart button MUST be at the end of all the attributes.

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.

qhome:

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?

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

styledata:

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

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

These errors are all in IE. They're not showing in Firefox

qhome:

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.

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

Berserker:

These errors are all in IE. They're not showing in Firefox

I see the same on ALL my shops pages in IE. Appears to be JavaScript related errors.

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.

styledata:

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

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.

styledata:

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

Zen Cart devs and Q have commented the product info code very well. You can move things around within each tab container fairly easily.

Berserker:

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

These errors are all in IE. They're not showing in Firefox

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.

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)