X-Cart forums - Menu with Tabs for Product page

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Menu with Tabs for Product page (https://forum.x-cart.com/showthread.php?t=33942)

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:

 

/* $Id: tabber.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------

  REQUIRED to hide the non-active tab content.

  But do not hide them in the print stylesheet!

  --------------------------------------------------*/

.tabberlive .tabbertabhide {

 display:none;

}

/*--------------------------------------------------

  .tabber = before the tabber interface is set up

  .tabberlive = after the tabber interface is set up

  --------------------------------------------------*/

.tabber {

}

.tabberlive {

 margin-top:1em;

}

/*--------------------------------------------------

  ul.tabbernav = the tab navigation list

  li.tabberactive = the active tab

  --------------------------------------------------*/

ul.tabbernav

{

 margin:0;

 padding: 3px 0;

 border-bottom: 1px solid #778;

 font: bold 12px Verdana, sans-serif;

}

ul.tabbernav li

{

 list-style: none;

 margin: 0;

 display: inline;

}

ul.tabbernav li a

{

 padding: 3px 0.5em;

 margin-left: 3px;

 border: 1px solid #778;

 border-bottom: none;

 background: #DDE;

 text-decoration: none;

}

ul.tabbernav li a:link { color: #448; }

ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover

{

 color: #000;

 background: #AAE;

 border-color: #227;

}

ul.tabbernav li.tabberactive a

{

 background-color: #fff;

 border-bottom: 1px solid #fff;

}

ul.tabbernav li.tabberactive a:hover

{

 color: #000;

 background: white;

 border-bottom: 1px solid white;

}

/*--------------------------------------------------

  .tabbertab = the tab content

  Add style only after the tabber interface is set up (.tabberlive)

  --------------------------------------------------*/

.tabberlive .tabbertab {

 padding:5px;

 border:1px solid #aaa;

 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed

    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a

    scrollbar when necessary */

 /* overflow:auto; */

}

/* If desired, hide the heading since a heading is provided by the tab */

.tabberlive .tabbertab h2 {

 display:none;

}

.tabberlive .tabbertab h3 {

 display:none;

}

/* Example of using an ID to set different styles for the tabs on the page */

.tabberlive#tab1 {

}

.tabberlive#tab2 {

}

.tabberlive#tab2 .tabbertab {

 height:200px;

 overflow:auto;

}

Now copy the tabber-minimized.js file to your /skin1/ directory

Code:

 

/* Copyright (c) 2006 Patrick Fitzgerald */

function tabberObj(argsObj)

{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}

this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}

tabberObj.prototype.init=function(e)

{var

childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}

if(e.id){this.id=e.id;}

this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}

DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}

if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}

break;}}}

if(!t.headingText){t.headingText=i+1;}

DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}

DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}

e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}

return this;};tabberObj.prototype.navClick=function(event)

{var

rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}

self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}

rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}

self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()

{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)

{var div;if(!this.tabs[tabberIndex]){return false;}

div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}

this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)

{var div;if(!this.tabs[tabberIndex]){return false;}

this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}

return this;};tabberObj.prototype.navSetActive=function(tabberIndex)

{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)

{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)

{var

tempObj,divs,i;if(!tabberArgs){tabberArgs={};}

tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}

return this;}

function tabberAutomaticOnLoad(tabberArgs)

{var oldOnLoad;if(!tabberArgs){tabberArgs={};}

oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}

if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}

Add to the /skin1/customer/home.tpl file the following lines of code under the <head> tag:

Code:

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

Open the /skin1/customer/main/product.tpl file and after the line:

Code:

 

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}

add the following code:

Code:

 

<div class="tabber">

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Product Magnifier</h2>

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

</div>

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>Send to Friend</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Detailed Images</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }

</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab">

<h2>Recommended Products</h2>

{include file="modules/Recommended_Products/recommends.tpl" }

</div>

{/if}

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>Reviews</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

</div>

{/if}

</div>

Continued on next post....

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:

 

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<p />

{include file="customer/main/send_to_friend.tpl" }

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

{if $active_modules.Upselling_Products ne ""}

<p />

{include file="modules/Upselling_Products/related_products.tpl" }

{/if}

{if $active_modules.Recommended_Products ne ""}

<p />

{include file="modules/Recommended_Products/recommends.tpl" }

{/if}

{if $active_modules.Customer_Reviews ne ""}

<p />

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

{/if}

And in order to notify the customer if there are no detailed product images or no related products when they click on the tab, just modify the two modules below.

Open the skin1/modules/Detailed_Product_Images/product_images.tpl file:

and add the following code before the very last {/if} statement:

Code:

 

{else}

{capture name=dialog} 

No detailed images.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

And do the same with skin1/modules/Upselling_Products/related_products.tpl

and add the following code before the very last {/if} statement:

Code:

 

{else}

{capture name=dialog} 

No related products.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"}

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 -

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:

 

<div class="tabber">

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>Send to Friend</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

 

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Detailed Images</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }

</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab tabbertabdefault">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

 

<div class="tabbertab">

<h2> More... </h2>

<div class="tabber">

 

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab">

<h2>Recommended Products</h2>

{include file="modules/Recommended_Products/recommends.tpl" }

</div>

{/if}

 

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>Reviews</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

 

</div>

{/if}

 

</div>

</div>

</div>

If you want a certain tab to be open when you go to the product page, then just place 'tabbertabdefault' to the 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-

Re: Menu with Tabs for Product page

Thank you for this, very useful :)

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?

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 -

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.

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:

function tabShow(i){

document.getElementById('mytabber').tabber.tabShow(i);

}

Now open the file skin1/customer/main/product.tpl and find this line of code:

Code:

 

<td>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}</td>

and change it to:

Code:

 

<td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(3)">See full description...</a>{else}{$product.descr}{/if}</td>

Note!!! - Change the number 3 in the tabShow(3) code to the number of the tab you want to open.
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:

<div class="tabber">

and change it to:

Code:

 

<div class="tabber" id="mytabber">

This will allow the page to jump to the menu when clicking on the 'See full description...' link.

We now need to create a 'Full Description' tab by copying the following code and inserting it in any tab location you want.

Code:

 

<div class="tabbertab" id="description">

<h2>Full Description</h2>

{include file="customer/main/full_description.tpl" }

</div>

For instance, in my case I added it after the 'Related Products' tab; so I inserted the code right after this code:

Code:

 

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

Now create a full_description.tpl file by using the following code:

Code:

 

{* $Id: full_description.tpl v1.0 2007/09/30 *}

{if $product.fulldescr ne ""}

{capture name=dialog}

{$product.fulldescr}

{/capture}

{include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra='width="100%"'}

{else}

{capture name=dialog} 

No full description

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_full_description content=$smarty.capture.dialog extra="width=100%"}

{/if}

and saving this file to the skin1/customer/main folder

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 -

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:

{if $main eq "product"}

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

{/if}

Re: Menu with Tabs for Product page

Quote:

Originally Posted by MoonDog

For Hugo and those that installed this menu, here is the way to create a full detailed description tab.

What this mod does:...

Moondog thank you very very much! implementation was a 5 minute job and it works like a charm.:lol:

Re: Menu with Tabs for Product page

Quote:

Originally Posted by Jon

To limit overhead, I wouldn't do the css and javascript include on every page, instead use this code:

Code:

{if $main eq "product"}

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

{/if}

I'm not sure what I have to change in the original script. What exactly does your mod of Moondogs code do?

Re: Menu with Tabs for Product page

The tabber.css and tabber-minimized.js loads code. Any coded loaded to your pages makes the page take longer to load. To reduce page load times, it's best to load code only when it's needed. In this case, the mod only applies to the product pages, so the code change I implemented only loads the code on product pages.

Re: Menu with Tabs for Product page

Thanks for the tip Jon.

To reduce page load, I've modified my home.tpl code now too.

Hugo, glad to see you got it working.

- MoonDog -

Re: Menu with Tabs for Product page

O.K., one last thing.

If your full description requires a large amount of text, then you can also add a scrollbar to limit the height of the tab. You can set the height of one or any number of tabs. Here's how to do this.

First, open your /customer/main/product.tpl file and locate the code for the tab that you want to add a scrollbar to and add an id name.

For instance, I need to limit the height of the 'Full Description' tab and place a scrollbar there. So I need to find the following code below and add id="description" to it. I can give it any id name I want, but to make it simple I called the id "description". So the code will look like this:

Code:

 

<div class="tabbertab" id="description">

<h2>Full Description</h2>

{include file="customer/main/full_description.tpl" }

</div>

I've highlighted in red the code that I added.

Now open the skin1/tabber.css file and add the following code to the end of the file:

Code:

 

.tabbertab#description {

 height:300px;

 overflow:auto;

}

You can set the height to any number you want. And if the amount of text exceeds that height, then it automatically places a scrollbar on the tab.

And that's all there's to it.

By the way, you can also put icons on your tabs.
Unfortunately, I haven't figured out yet how to put a different icon on each tab. But if you want the same icon placed on each tab, here's how you can do that:

Open your skin1/tabber.css and find this code:

Code:

 

ul.tabbernav li a

{

padding: 3px 0.5em;

margin-left: 3px;

border: 1px solid #778;

border-bottom: none;

background: #DDE;

text-decoration: none;

}

and replace it with this:

Code:

ul.tabbernav li a

{

 padding: 3px 1.3em;

 margin-left: 3px;

 border: 1px solid #778;

 border-bottom: none;

 background: #DDE url(images/star_4.gif) no-repeat fixed left;

 text-decoration: none;

}

And find:

Code:

ul.tabbernav li a:hover

{

color: #000;

background: #AAE;

border-color: #227;

}

Replace with this:

Code:

ul.tabbernav li a:hover

{

color: #000;

background: #AAE url(images/star_2.gif) no-repeat fixed left;

border-color: #227;

}

And finally, find this:

Code:

ul.tabbernav li.tabberactive a:hover

{

color: #000;

background: white;

border-bottom: 1px solid white;

}

And replace with this:

Code:

 

ul.tabbernav li.tabberactive a:hover

{

 color: #000;

 background: white url(images/star_4.gif) no-repeat fixed left;

 border-bottom: 1px solid white;

}

Well, that should be it. Have fun.

- MoonDog -

Re: Menu with Tabs for Product page

MoonDog,

One way to get different icons on the tabs is to add additonal classes for the ones with different icons. Then use smarty if statements in the class call of the DIV class.

Example: <DIV class="{if $active_modules.Upselling_Products ne ""}TabberUpselling{else}TabberNormal{/if}">

I am sure there are other ways, but that's just one way to be smarty....

- Mike

Re: Menu with Tabs for Product page

I can't seem to get this to show up correctly (http://sentimentalist.net/store). I have followed the install instructions to the tee *i think*. Is it because of the skin I am using?

Re: Menu with Tabs for Product page

Hi there

Wonder if anyone can help - for me this works in firefox but not in ie (the page hangs on V6.0.29)

trial site
http://d776516.i86.quadrahosting.com.au/product.php?productid=18350&cat=276&page=1

thanks so much - seems a great mod.

Vivienne

Re: Menu with Tabs for Product page

Hi vivienne,

I think that you might have made a mistake in correctly installing this mod. I noticed that on your web page that the content is not surrounded by the tabber frame. If you look at the left thumbnail of post #6, you can see that there is a frame from the tabs surrounding the content. On your website there is no tab frame around your content, it just barely hangs right below the tabs.
By the way, that screenshot was made from V6.0.29 of Internet Explorer and it works OK in that version.
Try re-installing this mod and let me know if you have any problems.

- MoonDog -

Re: Menu with Tabs for Product page

Hi Moondog

I tried to just copy in the files you uploaded and then also to try reinstalling myself. Now I am sure that I am doing something stupid but can't for the life of me figure out what. I wonder if you could tell me which file you would think would be the problem for it to hang on the detailed product page? Then maybe I can double check that one by getting the original x-cart one and remaking that mod. I expect its product.tpl?

Also I just wanted to say I have actioned quite a lot of your posts on here and in a day my site has really moved on. I previously set up using an old version but this 4.1.8 plus the css mods have made it a nicer experience. I especially like the rounded corner css thing - appreciate it.

Vivienne

Re: Menu with Tabs for Product page

I actually just copied the files from your zip over just to double check and it doesn't seem to make a difference so I guess I must have done something else wrong which is affecting it. Does anyone know how to debug php/tpl smarty files locally - do you need a particular tool?

Re: Menu with Tabs for Product page

Hi Vivienne,

I deleted and re-installed this mod using the code I posted just to make sure that those files were not corrupted and it still works OK. I'm not really sure what it could be.

I installed x-cart on my laptop with Windows XP since I don't have a live site so I do all of my x-cart expermenting locally. Eventually when I get my site, I will probably work on my files locally and then upload it to the live site.

There are several programs where you can install your own web server on your computer and you can do all of your editing locally. The one that I use is AppServ v2.4.9 and it will install Apache, PHP, MySQL and phpMyAdmin on your computer. Once you have this setup you can then install x-cart and do all of your editing locally. The program is free and you can download it here.

Hope this helps.

- MoonDog -

Re: Menu with Tabs for Product page

MoonDog,

I sent you a PM reguarding a typo I found. It may be just for my situation or it may be a reason why some others are/could be having trouble.

Re: Menu with Tabs for Product page

Thanks for the find SystemSkins

From post#8 edit the following line:

Code:

<td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(3)">See full description...</a></td>{else}{$product.descr}{/if}</td>

and remove the </td> tag before the {else} statement. It's not needed.
The edited code should now look like this:

Code:

<td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(3)">See full description...</a>{else}{$product.descr}{/if}</td>

This code only affected the product description layout of some browsers, and not the tab menu itself.

Post #8 has been edited to reflect this change.

- MoonDog -

Re: Menu with Tabs for Product page

Has anyone had the issue where fancycat breaks this mod? When I disable fancycat, it works great.

Re: Menu with Tabs for Product page

Is anyone seeing the plain text before the javascript loads the tabs. It is only for a brief second but it is annoying. Is there a fix or should you not leave the product tab open.

Re: Menu with Tabs for Product page

ProMuscles,

Quote:

Is anyone seeing the plain text before the javascript loads the tabs. It is only for a brief second but it is annoying. Is there a fix or should you not leave the product tab open.

Find the following code you placed into your skin1/customer/home.tpl file

Code:

 

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

And underneath this code, add the following code:

Code:

 

{literal}

<script type="text/javascript">

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

</script>

{/literal}

Hopefully, this should take care of the problem.

- MoonDog -

Re: Menu with Tabs for Product page

Works for me, thanks. I noticed this too but I guess it wasn't as big of deal for me since I have a pretty fast internet connection so it didn't bother me as much.

Code:

{if $main eq "product"}

<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen" />

<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>

{literal}

<script type="text/javascript">

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

</script>

{/literal}

{/if}

Re: Menu with Tabs for Product page

Quote:

Originally Posted by harveyev

Has anyone had the issue where fancycat breaks this mod? When I disable fancycat, it works great.

harveyev

Yes disabling fancy cats makes it work but I need to have fancy cats working as well - any ideas moondog?

Re: Menu with Tabs for Product page

This is for who need this MOD with Multi-language option. you might like it. Just a little contribution for such a great work.

MoonDog, thanks again for this MOD. Has help me a lot.

================================================== =========

This include the following parts: Product Magnifier (Not translated), Send to a Friend, Detailed Images, Related Products, Recommended_Products, Customer Reviews and Full Description. For any other TAB that you may need or has been post on this thread you got do yourself once i do not the time do do now. Put full description as MoonDog says on post #14.

1. Ad a new label for US language (Automatically will generate the same for each country already installed on your X-Cart Shop) named as "txt_
no_detailed_images" and other named as "txt_no_detailed_images".

or on Admin > Patch/Upgrade execute the following code:

Code:



INSERT INTO xcart_languages VALUES ('US','txt_no_related_images','No Related Products','Text');

INSERT INTO xcart_languages VALUES ('US','txt_no_detailed_images','No detailed images','Text');

INSERT INTO xcart_languages VALUES ('US','lbl_more_tabs','More...','Text');

2. After the installation you will need go to Languages on Admin and translate each for the language related that you want. EX.: As in English will be "No detailed images.", in Portuguese

will be "Sem imagens detalhadas" and so on. Do the same for the other "VALUES".

3. Where was in the begin of this post (/skin1/customer/main/product.tpl):

instead this... (Before implement "Full Description")

Code:



<div class="tabber">

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Product Magnifier</h2>

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

</div>

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>Send to Friend</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Detailed Images</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }

</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>Related Products</h2>

{include file="modules/Upselling_Products/related_products.tpl" }

</div>

{/if}

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab">

<h2>Recommended Products</h2>

{include file="modules/Recommended_Products/recommends.tpl" }

</div>

{/if}

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>Reviews</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }

</div>

{/if}

</div>

change for this:

Code:



<div class="tabber" id="mytabber">

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Product Magnifier</h2>

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

</div>

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>{$lng.lbl_send_to_friend}</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>{$lng.lbl_detailed_images}</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }</div>

{/if}

{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>{$lng.lbl_related_products}</h2>

{include file="modules/Upselling_Products/related_products.tpl" }</div>

{/if}

<div class="tabbertab" id="description">

<h2>{$lng.lbl_full_description}</h2>

{include file="customer/main/full_description.tpl"}</div>



<div class="tabbertab">

<h2>{$lng.lbl_more_tabs}</h2>

<div class="tabber" id="mytabber">

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab tabbertabdefault">

<h2>{$lng.module_name_Recommended_Products}</h2>

{include file="modules/Recommended_Products/recommends.tpl" }</div>

{/if}

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab">

<h2>{$lng.lbl_customer_reviews}</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }</div>

{/if}</div></div>



</div>

4. Where was in the begin of this post (/skin1/customer/main/product.tpl):

instead this...

Code:



{else}

{capture name=dialog} 

No detailed images.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

change for...

Code:



{else}

{capture name=dialog} 

<strong>{$lng.txt_no_detailed_images}</strong> {/capture} 

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

5. Where was in the begin of this post (skin1/modules/Upselling_Products/related_products.tpl):

instead this...

Code:



{else}

{capture name=dialog} 

No related products.

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"}

change for...

Code:



{else}

{capture name=dialog} 

<strong>{$lng.txt_no_related_images}</strong>{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"}

=========================================

And done. Enjoy!

Re: Menu with Tabs for Product page

One thing. When i activate this this MOD, and the the FancyCat. at the same time the MOD will make not show my TABs. how can i change that? Any ideas?

Re: Menu with Tabs for Product page

Wow, really cool add-on, thanks.

I am having an issue however as I want to have a Warranty tab and a Shipping tab specific to each product. I wish to include a file based upon its SKU (from a code I came across from RyanDesignStudios, http://forum.x-cart.com/showthread.php?t=28266&highlight=SIFR which is well worth a look !!)

So, I have created folders and in them put my content SKU(whaterver it is).tpl.

I am then trying to use the include file to fetch them.

<div class="tabbertab">
<h2>Full Description</h2>
{include file="$product.productcode.tpl" }
</div>

And here is my issue. No matter how I try and escape the variable it seems to throw an error. I am new to this code, but have scoured over the internet and used the suggestions for this include (http://www.smarty.net/manual/en/language.function.include.php)

The error, if it helps is:
Smarty error: unable to read resource: "Array.productcode.tpl" in..... etc, so it seems that it is not resolving the variable.

Help would be appreciated.

Many Thanks

Re: Menu with Tabs for Product page

will this help?

Code:

<div class="tabbertab" id="description">

<h2>Full Description</h2>

{include file="customer/main/full_description.tpl" }

</div>

Thats what my "Full Desription" tab looks like

Re: Menu with Tabs for Product page

Quote:

Originally Posted by chadweston

Wow, really cool add-on, thanks.

I am having an issue however as I want to have a Warranty tab and a Shipping tab specific to each product.

My guess is if you want it specific to certian products is you will need {if} statements for those products.

This is an example for a specific category and not an individual product, but you get the picture.

Code:

{if $cat eq "282"}

 <div class="tabbertab" id="description">

<h2>Full Description</h2>

{include file="customer/main/full_description.tpl" }

</div>

  {/if}

Re: Menu with Tabs for Product page

chadweston,

Quote:

So, I have created folders and in them put my content SKU(whaterver it is).tpl.

I am then trying to use the include file to fetch them.

<div class="tabbertab">
<h2>Full Description</h2>
{include file="$product.productcode.tpl" }
</div>

And here is my issue. No matter how I try and escape the variable it seems to throw an error. I am new to this code, but have scoured over the internet and used the suggestions for this include (http://www.smarty.net/manual/en/lang...on.include.php)

The error, if it helps is:
Smarty error: unable to read resource: "Array.productcode.tpl" in..... etc, so it seems that it is not resolving the variable.

The most likely culprit for that error would be the period after $product.

See if this works. Change your code so it looks like this:

Code:

 

{assign var="SKU" value=$product.productcode}

 

<div class="tabbertab">

<h2>Full Description</h2>

{include file="$SKU.tpl" }

</div>

Hope that works. Let me know if it doesn't.

- MoonDog -

Re: Menu with Tabs for Product page

Thanks heaps MoonDog :D

I am incredibly grateful for your help. I was starting to suffer from word blindness staring at that one. Fabulous contribution.

Just for future, was it the dot notation or the double variable or just smarty rules that i am not familiar with.

Thanks again, have a great great great day

Re: Menu with Tabs for Product page

Hi chadweston,

Quote:

Just for future, was it the dot notation or the double variable or just smarty rules that i am not familiar with.

I'm not really sure if it was the dot notation or the double variable.
It works ok if you use that notation for a graphics file. But for a .tpl file it just doesn't seem to work correctly.

Anyway, I'm glad you got it working and thanks for the compliments.

- MoonDog -

Re: Menu with Tabs for Product page

Doesn't work with the version 4.1.9
NOt sure if your mod conflicts with the 'recently viewed' mod or something wasn't right about the home.tpl code?

Re: Menu with Tabs for Product page

I am not quite sure why there MythNReality.

I have upgraded to 4.1.9, and it still works, however I have noticed that not all of the files have upgraded properly.
If you want to look at any of my files just let me know.

Thanks

Chris

Re: Menu with Tabs for Product page

Quote:

Originally Posted by chadweston

If you want to look at any of my files just let me know.
Chris

May I? Please. I really love this mode. I have freshly installed V4-1-9, not patched or upgrades from other version.