I’m sure you have seen a number of sites that have just under the ‘Add to Cart’ a number of tabs that let you show extra text and whatever for customers. The problem I found was they are far to complex and never easy to install. So this left me thinking of a short cut solution. I must warn you in advance, it’s very basic, but is a good starting point and can be quickly improved.
This ‘mod’’ then assumes for each product on your site, you have NO information below ‘Add to Cart’ button, just white space !!
The javascript is simply a way to switch between <div>’s identified by the standard <div id= and made to be as flexible as your requirements. If want to add more tabs, simply append to the line - var ids=new Array('a1','a2','a3'); In this example I have used pointers a1 through a3. Save this as ‘tabs.js’ and save into the yoursite/javascript folder.
Code: Select all
var ids=new Array('a1','a2','a3');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
To keep a level of control if you are looking to match colours schemes with your own site, I have used CSS that you should append to your template style sheet.
Code: Select all
#centeredmenu {
float:left;
width:100%;
background:#fff;
border-bottom:2px solid #a92b5b;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:5%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background:#b4b4b4;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#centeredmenu ul li a:active {
background:#b4b4b4;
color:#fff;
}
The code that ‘holds’ the tabs together and places them to the correct position on site, is a <div calling from the CSS - <div id="centeredmenu". You place this within yoursite/yourtemplate/panels/ProductDetails.html under the line %%SNIPPET_ProductAddToCart%% totally overwriting whats already there, and replacing the removed code at the same time.
Code: Select all
<div id="centeredmenu" style="width:440px;"><ul>
<li class="current"><a href="javascript:switchid('a1');">Page 1</a></li>
<li><a href="javascript:switchid('a2');"">Page 2</a></li>
<li><a href="javascript:switchid('a3');"">page 3</a></li>
</ul></div>
<div id='a1'class="content" style="display:block;width:418px;height:82px;">
This is page 1
</div>
<div id='a2' class="content" style="display:none;width:418px;height:82px;">
This is page 2
</div>
<div id='a3' class="content" style="display:none;width:418px;height:82px;">
This is page 3
</div>
%%GLOBAL_AddThisLink%%
<br class="Clear" />
</div>
</div>
Fianlly, add to the very top of ProductDetails.html the link between tabs.js and the code above -
Code: Select all
<script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/tabs.js"></script>
On my test site this looks like -
