X-Cart forums - DIY Tabbed Content Menu for Product Page

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

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

- - DIY Tabbed Content Menu for Product Page (https://forum.x-cart.com/showthread.php?t=11094)

Quote:

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

You could try modifying this code...

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

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'

Quote:

{if $product_links[0]}[*]Related Products{/if}
{if $active_modules.Customer_Reviews ne ""}[*]Reviews{/if}
{if $images[0]}[*]Images{/if}
{if $recommends}[*]Also Bought{/if}
{if $product.param00 ne ""}[*]Additional Info{/if}
{if $config.version gt "4.0"}[*]Refer{/if}
[*]Price Match
[/list]</div>

{* TABS CONTENT *}
<DIV id="accessories" style="display:block;">
{capture name=dialog}
{if $active_modules.Upselling_Products ne "" && $product_links[0]}

{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Related Products" content=$smarty.capture.dialog extra="width=100%"}
</DIV>

<DIV id="reviews" style="display:none;">
{capture name=dialog}
{if $active_modules.Customer_Reviews ne ""}

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

{include file="cartmods/pricematch/pricematch.tpl" productid=$product.productid extra="width=100%" target="_blank"}
{/if}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Reviews" content=$smarty.capture.dialog extra="width=100%"}
</DIV>

<DIV id="pricematch" style="display:none;">
{capture name=dialog}
{include file="cartmods/pricematch/pricematch.tpl" productid=$product.productid extra="width=100%" target="_blank"}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Price Match" content=$smarty.capture.dialog}
</DIV>

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

Code:

  

#tablist{ 

padding: 3px 0; 

margin-left: 0; 

margin-bottom: 0; 

margin-top: 0.1em; 

font: bold 12px Verdana; 

} 



#tablist li{ 

list-style: none; 

display: inline; 

margin: 0; 

} 



#tablist li a{ 

padding: 3px 0.5em; 

margin-left: 3px; 

border: 1px solid #6666FF; 

border-bottom: 1px solid #6666FF; 

background: white; 

} 



#tablist li a:link, #tablist li a:visited{ 

color: #6666FF; 

} 



#tablist li a.current{ 

background: #FFFFFF; 

} 



#tabcontentcontainer{ 

width: 90%; 

/* Insert Optional Height definition here to give all the content a unified height */ 

padding: 5px; 



} 



.tabcontent{ 

display:none; 

}

2) Create a file called skin1/tabs.js

Code:

/*********************************************** 

* Tab Content script- б╘ Dynamic Drive DHTML code library (www.dynamicdrive.com) 

* This notice MUST stay intact for legal use 

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 

***********************************************/ 



//Set tab to intially be selected when page loads: 

//[which tab (1=first tab), ID of tab content to display]: 

var initialtab=[1, "sc0"] 



////////Stop editting//////////////// 



function cascadedstyle(el, cssproperty, csspropertyNS){ 

if (el.currentStyle) 

return el.currentStyle[cssproperty] 

else if (window.getComputedStyle){ 

var elstyle=window.getComputedStyle(el, "") 

return elstyle.getPropertyValue(csspropertyNS) 

} 

} 



var previoustab="" 



function expandcontent(cid, aobject){ 

if (document.getElementById){ 

highlighttab(aobject) 

detectSourceindex(aobject) 

if (previoustab!="") 

document.getElementById(previoustab).style.display="none" 

document.getElementById(cid).style.display="block" 

previoustab=cid 

if (aobject.blur) 

aobject.blur() 

return false 

} 

else 

return true 

} 



function highlighttab(aobject){ 

if (typeof tabobjlinks=="undefined") 

collecttablinks() 

for (i=0; i<tabobjlinks.length; i++) 

tabobjlinks[i].style.backgroundColor=initTabcolor 

var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor 

aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor 

} 



function collecttablinks(){ 

var tabobj=document.getElementById("tablist") 

tabobjlinks=tabobj.getElementsByTagName("A") 

} 



function detectSourceindex(aobject){ 

for (i=0; i<tabobjlinks.length; i++){ 

if (aobject==tabobjlinks[i]){ 

tabsourceindex=i //source index of tab bar relative to other tabs 

break 

} 

} 

} 



function do_onload(){ 

var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1 

collecttablinks() 

initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color") 

initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color") 

if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){ 

var cookieparse=get_cookie(window.location.pathname).split("|") 

var whichtab=cookieparse[0] 

var tabcontentid=cookieparse[1] 

expandcontent(tabcontentid, tabobjlinks[whichtab]) 

} 

else 

expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) 

} 



if (window.addEventListener) 

window.addEventListener("load", do_onload, false) 

else if (window.attachEvent) 

window.attachEvent("onload", do_onload) 

else if (document.getElementById) 

window.onload=do_onload 









//Dynamicdrive.com persistence feature add-on 

///////////////////////////////////////////// 



var enablepersistence=false //true to enable persistence, false to turn off (or simply remove this entire script block). 



function get_cookie(Name) { 

var search = Name + "=" 

var returnvalue = ""; 

if (document.cookie.length > 0) { 

offset = document.cookie.indexOf(search) 

if (offset != -1) { 

offset += search.length 

end = document.cookie.indexOf(";", offset); 

if (end == -1) end = document.cookie.length; 

returnvalue=unescape(document.cookie.substring(offset, end)) 

} 

} 

return returnvalue; 

} 



function savetabstate(){ 

document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab 

} 



window.onunload=savetabstate 



//Dynamicdrive.com persistence feature add-on 

/////////////////////////////////////////////

3) 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 $ *}

<table width="100%" border="0">

  <tr>

    <td><SPAN class=>

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

</SPAN></td>

    <td></td>

  </tr>

</table>

4) in skin1/customer/home.tpl

underneath...

Code:

<LINK rel="stylesheet" href="{$SkinDir}/skin1.css">

add...

Code:

<LINK rel="stylesheet" href="{$SkinDir}/tabs.css">

5) 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 right above... (this is to have the main details show)

Code:

{/capture}

Add:

Code:



 

<a name="tabs"></a> 

<ul id="tablist"> [*]Product Details[*]Send to Friend 

{if $images ne ""}[*]Detailed Images

{/if}

{if $active_modules.Upselling_Products eq ""} [*]Related Products 

{else} 

{/if}[*]Recommended Products

 {if $active_modules.Customer_Reviews ne ""}

  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"}[*]Customer Reviews

{/if}

{/if}[/list]<DIV id="tabcontentcontainer"> 

<div id="sc0" class="tabcontent"> 

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

</div> 

<div id="sc1" class="tabcontent"> 

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

</div> 

<div id="sc2" class="tabcontent"> 

{if $active_modules.Detailed_Product_Images ne ""} 

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

{/if} 

</div> 

<div id="sc3" class="tabcontent"> 

{if $active_modules.Upselling_Products ne ""} 

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

{/if} 

</div> 

<div id="sc4" class="tabcontent"> 

{if $active_modules.Recommended_Products ne ""} 

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

{/if} 

</div> 

<div id="sc5" class="tabcontent"> 

{if $active_modules.Customer_Reviews ne ""} 

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

{/if} 

</div> 

</DIV>

{/capture}

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

Code:

remove...



Code:










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

{if $active_modules.Detailed_Product_Images ne ""}








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

{/if}

{if $active_modules.Upselling_Products ne ""}








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

{/if}

{if $active_modules.Recommended_Products ne ""}








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

{/if}

{if $active_modules.Customer_Reviews ne ""}








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

{/if}

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

Code:

{* $Id: custom_product.tpl,v 1.78.2.4 2005/04/03 18:47:00  Exp $ *}

<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>

{capture name=dialog}



 

<a name="tabs"></a> 

<ul id="tablist"> [*]Product Details [*]Send to Friend 

{if $images ne ""} [*]Detailed Images 

{/if} 

{if $active_modules.Upselling_Products ne ""} [*]Related Products 

{else} 

{/if} [*]Recommended Products 

{if $active_modules.Customer_Reviews ne ""} 

  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"} [*]Customer Reviews 

{/if} 

{/if} [/list]<DIV id="tabcontentcontainer"> 

<div id="sc0" class="tabcontent"> 

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

</div> 

<div id="sc1" class="tabcontent"> 

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

</div> 

<div id="sc2" class="tabcontent"> 

{if $active_modules.Detailed_Product_Images ne ""} 

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

{/if} 

</div> 

<div id="sc3" class="tabcontent"> 

{if $active_modules.Upselling_Products ne ""} 

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

{/if} 

</div> 

<div id="sc4" class="tabcontent"> 

{if $active_modules.Recommended_Products ne ""} 

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

{/if} 

</div> 

<div id="sc5" class="tabcontent"> 

{if $active_modules.Customer_Reviews ne ""} 

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

{/if} 

</div> 

</DIV>

{/capture} 

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

Open customer/home_main.tpl and find:

Code:

{elseif $main eq "product"}

{include file="customer/main/product.tpl" product=$product}

and replace it with this:

Code:

{elseif $main eq "product"}

{include file="customer/main/custom_product.tpl" product=$product}

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

Code:



 

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

{if $active_modules.Detailed_Product_Images ne ""} 





 

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

{/if} 

{if $active_modules.Upselling_Products ne ""} 





 

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

{/if} 

{if $active_modules.Recommended_Products ne ""} 





 

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

{/if} 

{if $active_modules.Customer_Reviews ne ""} 





 

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

{/if}

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