Glad to hear it.

Now if only I can get my "More Info" or "product enquiry" to work in these tabs.

I know it can be done. I see it everywhere. For some reason it runs through the script on me and seems as though an email has been sent when clicking on the tab. AAARRRR!

No One out there have any ideas? Or is this a huge secret? lol

Wish I could help on that. I just double checked on mine, and it works fine. :?

Were you referring to your addition of the details in tabs, or do you have a more info type email submission within the tabs that is working?

I gotcha, I read it wrong. I don't have mine set up for that. :(

I am trying to modify the tab mod to access the complete product.tpl , as the default/first tab. I have integrated the tab mod into a unique dialog.tpl called from the product.tpl and have the {title} as the first tab, but the problem is:

• 1. I am trying to call the product.tpl from the product.tpl, where the unique dialog.tpl is in order to have the default product details (without having to click to see it)
  2. Whenever I attempt to call the inserted prioduct details, my products won't load/reload.

Ideas? Has anyone successfully worked this or something very similar and could share the code?

Thanks,

- Mike

this works very well.

thanks!

I had some problems for the images if then statement on X-Cart 4.0.11

Here is what I did to fix it



HTH

Thanks for this really great mod and free too!!!!

Regarding the if statements to only show the tabs when they have content I amended Phils code in the product.tpl to this:


and it works well. The only exception is if you are allowing review but there aren't any yet, it will then show the tab but with no content.

To fix that I changed the skin1/modules/Customer_Reviews/reviews.tpl to move the first /if statement down a bit and added an else to say 'there are no reviews yet'. Just going to paste the whole reviews.tpl file again as I can't work out how to bold within code blocks.

is there a way to changes images instead of text links?

thanks

If you are speaking about the tabs and ability to change them from text boxes to rounded corners, or tab images, I would say yes, you would need to mod the tab script as it is diplayed.

there is code floating around the forum right now on how to change tabs to rounded corners using images, in custom mods area
This is same code type to make it all images, code needs to be tweaked a bit to make it happen.

Just do not destroy the call tags for the sections when making changes in the way it is displayed.

You could even make this verticle not hrizontal if you wanted. It is all in the way you tweak the code.

You could try modifying this code...

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm

thanks for your help! :D

thanks for your help! :D

Hi all,

Here are Boomer codes and the reason why i am posting here because i have sent him many many emails regarding his help/assistant.
He returned me with a solution that does not solved... and disappeared.
Really disappointed.

I hope people in this forum can help me out what's going on wrong:

I tried to put 'pricematch' under his tab but whatever i do it just never sync/connect.... Please see in 'bold'


my website is http://www.directav.com.au/product.php?productid=301&cat=0&page=1
As you can see it does work under "review" and it shown up but does not with it own tab... any ideas plesae?

***I'm sorry boomer for publish your code but i have to get my business going.***

First off thanks to PhilJ. This is an excellent mod. Also thanks to Bella Forma for the if statement code to only show the tabs when they have content and to soleag for the main details code.

mffowler was looking for complete code for this mod so here it is. I have taken PhilJ and Bella Forma's code and made a few changes to the CSS to go with my site.

I have only used this in v4.0.11

This will open the complete Product Details as the fist tab
This will also only show the tabs when they have content.

1) Create a file called skin1/tabs.css


2) Create a file called skin1/tabs.js


3) Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl



4) in skin1/customer/home.tpl

underneath...


add...


5) find skin1/customer/main/product.tpl

add this code to the top of the page...


then right above... (this is to have the main details show)

Add:


Then remove the block of code that this replaces. ie.


Once again.. Awesome mod and thanks to everyone who contributed on it. I hope compiling it all in one spot will help a few people out.


:D

I made a few changes to this mod to suit my needs. Instead of having the mod be part of the product page, I had the product page show up under the product details tab (book details in my case). Here's an example: http://www.thecrackedbook.com/xcart/customer/product.php?productid=19880&cat=253&page=3
If anyone is interested, here is what I did. Follow the steps stated previously in creating the tabs.css file and a tabs.js file in your skin1 directory. Also add the link in home.tpl to the tabs.css file. Then instead of creating the overview.tpl file, create a file named "custom_product.tpl" with the following code and save it as customer/main/custom_product.tpl

Open customer/home_main.tpl and find:
and replace it with this:


Then you still need to remove this code from product.tpl


That's it. If you have installed the previous version of this mod in your product.tpl file then you would need to uninstall it before you install this version.

Hi, longhorn.
I really like the changes you made to this mod and will give it a try this evening. It sure does look good in your shop.

Another thing I noticed in your shop is the way you have the page navigation displayed - really, really awesome looking!
Any chance you could share this mod...?

Thanks in advance!

The page navigation mod is something I purchased from Boomer at cart-lab. Here is link for the mod: http://www.cart-lab.com/lab/customer/product.php?productid=5&cat=0&page=1.

Thanks for the reply, longhorn.
I knew about the mod from CartLab, but I thought/hoped you made it yourself.
Another thing for my own wishlist...

Thanks!

Thanks for this
Got it working well, and did not take much effort at all. It makes a lot of sense to have the Tabs setup like that rather than seperate.
Regards Adam

Thanks to all for sharing the knowledge!


Thanks to CopperB for putting all together. I am sure it is a big help to many members. I will give it a try this week.

Hi Longhorn

I was wondering whether the fancy looking edges you have on the product box is acheived by tweaking the existing CSS file or have you added some bits to it?

I have a pin stripe blue line and quite frankly it looks very plain.

Regards Adam

I changed the background and border colors in the css file. I also changed the text color too.

Just wondering if anyone knows what CSS code I would change so that only the actual tab and not the entire box is a solid color?

IE: I want the main box to have no backgroung colour and just the actual tab itself (recommends, reviews etc..) to be a solid color.


Thanks

Hello

In the tabs.css file you would have created for this mod located in the skin 1 directory, you should find the following

#tablist li a{
padding: 1px 0.5em;
margin-left: 1px;
border: 1px solid #778;
border-bottom: none;
background: #9cb9bf;
}

The above bold bit changes the tab background colour.

Now if only I could work out how to get the add to cart control buttons up the top like Long horn has, I would be completely satisfied.
Regards Adam

Thanks for the reply Adam. I tried that before but it changes the entire tab "box". I only want the very top of the tabs to change color.

As an example it would be like Longhorns. His tabs are white (active) and blue (not active) yet the rest of the box remains the same color.



Do you mean how he has the shopping cart at the top of the page because his add to cart is still at the bottom of the product details.

PhilJ, you are a legend mate! :P A legend for being so kind to have us all share this great mod and a legend for just being a legend! Well done. I wish I had something to offer but unfortunately, being a newb, I can only take and give nothing back at the moment :( . I'll get there one day I suppose.

Anyway, really love this mod. I never knew what I needed until I saw what it could do. Works great, looks great, and hits the spot bang on! However, I am having one very minor problem and I am not sure if anyone else if affected. Recently I included the favicon.ico feature into my website which was working flawlessly. Link: http://forum.x-cart.com/viewtopic.php?t=16812&highlight=favicon I had the icon show up in the URL address window, task bar, and in the favourites menu. Now, after including this fantastic mod, when I click on one of the tabs (any tab) the icon disappears in the task bar. Like I said, minor problem but as usual I just want to get to the bottom of it. Any ideas?

CopperB, what you're looking to change are the border colors. Go back into the tabs.css file and look for these:

and this:


just change the color to whatever you want where you find border. The #tablist dviion is the actual tab istelf and the #tabcontent container would be the division for the main box.


Adam, what controls are you talking about? Are you talking about the minicart or the tabs at the top of the page.

I am thinking to implement this on my shop. Could someone share with me the benefits? Besides it looks better, does it also improves the speed? Any other benefits?

Thanks!

I doubt there are any speed benefits as you are still loading the same amount of information you are just displaying it differently, I certainly didn't notice a speed increase.

The only benefit I can think of is the fact that it looks better, but that's a major benefit (in my mind) as instead of having a great big long page that your customers have to scroll down you can display all the information they need to see in one screen. It just makes it much more customer friendly and that means happy customers :)

Thanks for explaining it to me... I agree with you that it looks better. So you think customers rather click 4 or 5 times than scrolling down once? :)

Hi Pengrus

I like it (as a user) much better than scrolling down a long way. I seems like a lot of the larger sites prefer tabs.

I have read a few times that a basic rule of web page design is not to have a page that is too long.

Most definately!!!! Users HATE scroll bars, we are basically lazy creatures and I bet the vast majority of users won't even bother to scroll down a great big long page it's just too much effort. Much better to have a tab they can see and click on if they want to, the popularity of this mod speaks for itself :)

Ok, I've had some time to play around with this mod and nothing will change my opinion of it (it's a fantastic mod). However, anything that is good can always be better or improved upon and this is what I'm thinking:

Instead of a tab disappearing when the 'Detailed Image' tab, as an example, has no detailed image, wouldn't it be better to just disable it? The reason this would be better is simple... if a first time customer can't see this tab, they are likely to search for it and when they canБ─≥t find it they will be so jacked off and frustrated that they could possibly leave the store. But a disabled tab is more likely to indicate to the customer that no detailed image is available. No frantic searching needed.

I'm no programmer, but I canБ─≥t see this being too difficult to implement. Just substitute the link within the tab with grey coloured text (no link). I'm sure the customer would rather have this than a disappearing trick that tells them nothing at all.

I just wish I knew how to do it. I think its worth while doing, don't you?

One hour later, and I think I have a pretty good solution. This being my first code contribution to this forum, I think it's time to celebrate. \:D/

Anyway, in order to disable the 'Detailed Image' tab, as mentioned above, all I did was create an else statement and pointed the tab back to the 'Product Detail' tab, renamed the tab to "No Images" and shaded it red for good measure. Now, the code below is the code longhorn180
posted (he used a custom_product.tpl file which is also the tab method I adopted too). So here is what I did in the custom_product.tpl file relevant to 'Detailed Images':

Changed this:
[*]Product Details
{if $images ne ""} [*]More Images
{/if}

To This:
[*]Product Details
{if $images ne ""} [*]More Images
{else}[*]No Images
{/if}

So as you can see, whenever the customer clicks on "No Images", they will be sent back to the "product Detail" tab while the tab itself will glow red.

Naturally, you will need to adapt the above changes to your own tab situation (your tabs may be in a different order to mine). Should be easy to do though. If I could do it (being a newb 'n all), and trust me on this, anyone can do it!

Hope you like it.

Great one Micheal!
I surely will give this a try, one of these days (when I find the time...)

:D :D :D

I put it in however I still have the Detailed description in the top part of the page.
How do I remove that?
http://onlinemacs.com/product.php?productid=116&cat=109&page=1

Did you also create an overview.tpl ?

Yes I put that in. Here is what it looks like.
http://onlinemacs.com/product.php?productid=116&cat=292&page=1

Sorry about that jmell. I didn't notice the duplicate.

Post your product.tpl file and I can try to help you find the duplicate code.