| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
Menu with Tabs for Product page | ||||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
Menu with Tabs for Product page
Here's a tabbed menu for the xcart v4.1.8 product page.
Details regarding this tabbed menu can be found at: http://www.barelyfitz.com/projects/tabber/ Copy the tabber.css file to your /skin1/ directory Code:
Code:
Code:
Code:
Code:
Continued on next post....
__________________
X-CART Gold v4.1.8 |
|||||||
#2
|
|||||||
|
|||||||
Menu with Tabs for Product page (continued)
...continued from previous post.
And delete the following code from the same /skin1/customer/main/product.tpl file: Code:
Open the skin1/modules/Detailed_Product_Images/product_images.tpl file: and add the following code before the very last {/if} statement: Code:
and add the following code before the very last {/if} statement: Code:
That's it. Please note that all changes were done on files that had no previous modifications and these changes were also done on xcart v4.1.8 I've attached all the necessary files for those who don't like to read and modify. Also included is the detailed javascript file for those who like to tinker with the code. Have fun. - MoonDog -
__________________
X-CART Gold v4.1.8 |
|||||||
|
#3
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Another thing,
For those who have a lot of tabs on their product page, you can also nest the tabs. For nested tabs just place the nested tab(s) between the<div class="tabber"> and the </div> code Just replace the code from the first post with the code below to see how nested tabs work. I also placed the 'Related Products' as the default tab. Code:
For example find the tab you want open and edit the code to: <div class="tabbertab tabbertabdefault"> You can see above code how I placed the default tab on the 'Related Products' tab. That's it. Remember, you can get more information here: http://www.barelyfitz.com/projects/tabber/ -MoonDog-
__________________
X-CART Gold v4.1.8 |
|||||||
#4
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Thank you for this, very useful
__________________
4.1.8 Gold (Unix) |
|||||||
#5
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Now, are these tabs customized per product or just overall? Do you have an example used on your site?
__________________
TA Technologies, Inc. ~Implementing Creative Point of Sale Solutions~ http://www.rmspos.net X-Cart 4.1.10 |
|||||||
#6
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Hi Mike,
This tabbed menu is just customized for the product page and not per product. What this tabbed menu does, is it just condenses the product page modules into one convenient menu location. This way the customer just clicks on a tab and doesn't have to scroll all the way down the page to view the other information. Unfortunately, I don't have a live site yet, but I've attached a couple of images to show what it looks like. Because I have a lot of tabs, I decided to nest two tabs inside a folder called 'More...'. This way it doesn't clutter the layout. The first image is what the menu looks like when you open the product page and the second image is after you click on the 'More...' tab, to see the nested tabs. Hope this helps. - MoonDog -
__________________
X-CART Gold v4.1.8 |
|||||||
#7
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Very nice mod, thank you for sharing this.
Can you tell me how I can make a detailed discription tab? Everything in the detailed discription area in product modify should go in this tab.
__________________
Xcart Version 4.19 |
|||||||
#8
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
For Hugo and those that installed this menu, here is the way to create a full detailed description tab.
What this mod does: If you have a full detailed description for your product, then it automatically creates a link that says 'See full description...' when you open the product page . By clicking on this link, the page jumps to the tabbed menu and it opens the 'Full Description' tab. Here's how to modify your code to do this: Open the skin1/tabber-minimized.js and insert the following code to the end of the file: Code:
Now open the file skin1/customer/main/product.tpl and find this line of code: Code:
Code:
Please note that the first tab is 0 and the second tab is 1 etc. For instance, if your 'Full Description' tab is the third from the left than change the code to tabShow(2) Now find the line: Code:
and change it to: Code:
We now need to create a 'Full Description' tab by copying the following code and inserting it in any tab location you want. Code:
Code:
Code:
Make sure that you have full description content for the product in order to see this work in action. And also add a lbl_full_description language variable in the admin area named 'Full Description'. I've attached the product.tpl for you to use. That's it. - MoonDog -
__________________
X-CART Gold v4.1.8 |
|||||||
#9
|
|||||||||
|
|||||||||
Re: Menu with Tabs for Product page
To limit overhead, I wouldn't do the css and javascript include on every page, instead use this code:
Code:
|
|||||||||
#10
|
|||||||
|
|||||||
Re: Menu with Tabs for Product page
Quote:
Moondog thank you very very much! implementation was a 5 minute job and it works like a charm.
__________________
Xcart Version 4.19 |
|||||||
|
|||
X-Cart forums © 2001-2020
|