DIY Tabbed Content Menu for Product Page
Should work in all versions, backup files first!
The code is adapted from http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm 1) Create a file called skin1/tabs.css Code:
#tablist{ 2) Create a file called skin1/tabs.js Code:
/*********************************************** 3) in skin1/customer/home.tpl underneath... Code:
<LINK rel="stylesheet" href="{$SkinDir}/skin1.css"> add... Code:
<LINK rel="stylesheet" href="{$SkinDir}/tabs.css"> 4) find skin1/customer/main/product.tpl add this code to the top of the page... Code:
<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script> then just after... Code:
{/capture} (or wherever you want the tabs to appear) add Code:
Then remove the block of code that this replaces. ie. after... Code:
{/capture} remove... Code:
5) I have assumed you have all the above modules enabled. Add or remove tabs if neccessary, adjust the theme colours and styles in tabs.css to suit your website. Hope you find this useful. Please share code for the good of the forum :wink: |
Nice Phil 8)
Thanks |
Beautiful Phil!
We already had this mod installed when we created our site, but we used tabs images rather than letting CSS do it. Which we might switch to the css boxes as these are much faster loading. The fact you share the code is great. Feels more like Open Source here every day! :lol: I hope X-Cart haven't censored the word: Open & Source if used together. :wink: Thanks again. |
hrmf, looks awfully familar to my tabs mod. 8O
|
But based on free source...
Quote:
|
Thanks allot
I was looking for somthing like that for my site I have added it looks sweet even just need to make some color changes.
By the way were do I go to change the color of the content area from that purplish color to white. you can see it working here on my site http://pixellab.biz |
Wow, that looks cool.....
Deonya, the word rateing is misspelled....just fyi...should be rating. Louise |
Quote:
Thanks I was wondering if any one knows how I can make the tabs show if that tab is need or relevant to that product so if I don't have a detailed image no tab for that will show so people don;t have to waste time clicking tabs and getting no content if anyone can help me figure that out I would appreciate it. |
PhilJ,
Thank you so much for the code. I implemented in my site. Thanks again, Louise (Dalmuti) www.birdshopper.com/xcart/home.php |
deonya, take out the persistence block of code and add
Code:
class="current" to the particular tab. Should do the trick. |
Wow, thanks for the hard work in setting this up. I hope that the source is truly coming from the open and not just modified from someone like Boomer.
I am all for open source and it really adds to the value of xcart to be able to modify the source to your liking. I was about to buy a javascript menu from apycom for about $30 but then found an open source one that was much better www.ricom.co.uk |
Quote:
I tried doing this but it's not what I am looking for I was thinking of somthing more like an if statment some of my products will have detailed images and some wont some have recamended products and some don't I wanted to try and come up with an if statment that will show tabs only if it's need by that product. |
Quote:
I tried doing this but it's not what I am looking for I was thinking of somthing more like an if statment some of my products will have detailed images and some wont some have recamended products and some don't I wanted to try and come up with an if statment that will show tabs only if it's need by that product. |
:arrow: http://www.cart-lab.com/Tabbed_Product_Menu-p-56.html
Is setup to only display tabs with content relative, if conditions. There is also an extra field by default that can easily be setup to display any other extra fields without hassle. :wink: |
Quote:
Put simply, if the content does not exist, then don't display the tab(s). Solution... Wrap an IF statement around the individual tab code. For example with upselling products... Recommended products... etc. Detailed Images is slightly different... So is Customer Reviews... |
Heres What I tried
Code:
Now only the Send To friend & Customer Review will show up. There could be a cople resonse for this on my part one I have changed the way the tabs look see what I mean http://www.pixellab.biz/product.php?productid=16141&cat=1&page=1 Next is I have moded a few things in my cart but that might not be the reason still what do you think after looking over my code. |
The other tabs don't appear, probably because you don't have a detailed image or upselling product, plus you may have not enabled the recommended products module.
Otherwise the code looks fine. |
I think the reason why my detailed images are not showing on the products that have them is becuse I have that moded here's a mod I have on my images I am quoting it from another post I made.
Quote:
So everything is correct but I think this mod is preventing my detailed images from showing up |
It isn't working for me either, deonya... :(
And i don't use a mod for the Detailed Images. Same thing happens with Recommended Products - they won't show, untill i remove the IF statement for it. Anyone know how to solve this? Furthermore; i like to add a extra tab where i can put a full description/overview for the product. Anyone who can point me in the right direction? Many thanks in advance!! |
Yup same problem here. I had to lose the IF statements also in order to get the other tabs to show.
Quote:
I just did this last night. I'm a newb at X-Cart but it worked for me. If there's a better way please post it. In product.tpl, AFTER Code:
<a name="tabs"></a> ADD AFTER: Code:
{/if} ADD: Code:
<div id="sc0" class="tabcontent"> Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl. Code:
{* $Id: overview.tpl,v 1.6.2.2 2004/12/10 13:14:52 max Exp $ *} You can edit this file to change the look of the box and add product titles, images whatever. You can also edit the tabs.js file and change it so the overview tab shows automatically on the page. Hope that helps. |
Thanks alot soleaq - that works great!!
Not bad for a "newb"... :wink: Any ideas yet how to deal with the IF statements? I think it's very important that the tabs without content don't show so that customers don't click on empty tabs. Thanks again for sharing your code! |
PhilJ,
I have a question for you or anyone sle posting in this thread. I am trying to implement a copy of Boomers Product Enquiry and his send to friend add ons into this script. Boomer has these scripts set up in stages so that the fiorst stage is the base email setting, the second would show what the email will appear as and the third is letting customer know if the email was sent successfully. For some reason, when I add these into the tab script, it jumps straight to the sent notification of the add on as if it was already completed with info added etc. Any idea what I may be doing wrong here? I love the tab script, it works great. Problem is after I add the two email scripts. I know this can be done, I have seen it in action, just don't know the scripts well enough to know what I am missing here. Thanks to all that may help. 8O |
markwhoo, I wouldn't advise using those mods within the tabs mod. The 'send to friend' in v4 should work fine in the tabs. I can help you with the 'enquire about this product'. PM if interested.
|
Quote:
Thanks for the kind words! Thanks PhilJ for the original code! Just a note, someone sent me a message asking how to turn the "persistence" on the tabs off. In tabs.js, find the line below and change "true" to "false" Code:
//Dynamicdrive.com persistence feature add-on This will turn persistence off, so when your customer hits a new product page, the default tab you selected at the top of the tabs.js file will show. I have it set so the "Overview" tab always shows first. |
This might sound silly, but will it hurt search engine ranking because the recommended product list for example is hidden? Thanks.
|
Quote:
Actually I do not think so. This mod will work in php base AND it is functional as HTML, so it will just be another link as it already is on the main page. Just looks cleaner is all. Pages will load faster, switching between tabs is lightening fast. great addition I think |
Thanks for sharing a great mod. Works fine for me
Cheers |
Quote:
Thank you. :) |
Quick Question about adding product descriptions.
All my descriptions are set in the "short description". Instead of using this: Quote:
Would it be this: {if $product.descr ne ""}{$product.descr}{else}{/if} I would like to add the short description to the product summary tab.....anyone give me a hint. I am just learning. Thanks, Louise |
Code:
{$product.descr} will suffice :) |
Quote:
Since it uses DHTML the content is there for the spiders to see, you just won't until the layer is made visible. |
Quote:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm Quote:
|
Thanks Phil,
Worked like a charm.... Thanks again, Louise |
Thanks Boomer
|
I know this is probably a whole other mod, but it's linked to this. Does anyone know how to add another piece of information? For instance, another tab with "Additional Information" or "Part Numbers," to a specific product. I know how to add another button and link, but I'd like to add information to each product.
Thanks |
Quote:
One solution to this would be to add all of the additional information under the product details. then modify the product details page to only displat the short description, then add the tab in the tabs menu, make a detail.tpl, call the detail.tpl via the tabs. In the detail.tpl, is where you would have your product detail description. Start off with the short description adding all additional info. This is one way I have done this and it seems to wirk quite well. |
I'm not quite sure how to call the information via the template. What would be an example inside the detail.tpl?
|
Quote:
This is basic description: {$product.descr} the detailed description is: {$product.fulldescr} Place this inside of a small table on your detail.tpl file: Code:
<SPAN class=>{if $product.fulldescr ne ""}{$product.fulldescr} remember to pull out the full line of code in the description area of the product.tpl, and just leave the {$product.descr} This way you have a shot description, yet all of the details will show in your detail.tpl. the array is set up so that if there are NO details, then it will display a repeat of the short description. Clear as mud? :wink: |
Thanks, I will get started. :)
|
Worked like a charm, thank you very much. :)
|
All times are GMT -8. The time now is 06:08 PM. |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.