Joomla Templates Club 406,261 posts

[memo12 Friend memo12Join date: May 2013Posts: 2Downloads:0Uploads:0 Thanks: 2]

#190931

Hi,

I am using the Hawkstore template, and would love to know how to add extra tabs in the product pages. There is one tab for the description, and the second one for reviews. How do I add more tabs for ingredients etc?

Thanks 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#507207

To create additional tabs on your Virtuemart product pages . . . .

THE CODE:
Place in “/templates/YOUR_TEMPLATE/html/com_virtuemart/productdetails/default.php”


<div id="tabContainer">

<ul>
<li><a class="active" href="#tab1">Details</a></li>
<li><a href="#tab2">Reviews/Comments</a></li>
<li><a href="#tab3">Related Products</a></li>
</ul><!-- //Tab buttons -->

<div class="tabDetails">

<div id="tab1" class="tabContents">
YOUR CONTENT CODE FOR DETAILS GOES HERE
</div><!-- //tab1 -->
<div id="tab2" class="tabContents">
YOUR CONTENT CODE FOR REVIEWS/COMMENTS GOES HERE
</div><!-- //tab2 -->
<div id="tab3" class="tabContents">
YOUR CONTENT CODE FOR RELATED PRODUCTS GOES HERE
</div><!-- //tab3 -->

</div><!-- //tab Details -->

</div><!-- //Tab Container -->
<script type="text/javascript">
jQuery(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").click(function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});
</script>

THE CSS STYLE: (for example – can be customized as you need)

div#tabContainer {
margin:30px 0 0 0;
padding:0;
position:relative;
}
div#tabContainer ul {
overflow:hidden;
height:35px;
position:absolute;
z-index:100;
}
div#tabContainer li {
float:left;
list-style:none;
margin-right:1px;
}
div#tabContainer li a {
background:#ddd
color:#666;
cursor:pointer;
display:block;
padding:5px 9px;
text-decoration:none;
font-size:12px;
}
div#tabContainer li a:hover {
background:#eee;
}
div#tabContainer li a.active {
background:#fbfbfb;
color:#333;
}
.tabDetails {
margin:0;
padding:28px 0 0 0;
}
.tabContents {
padding:10px;
border-top:2px solid #ddd
}

Now, assuming you can see/understand the basic idea, you can create unlimited amounts of tabs… (obviously as much as your browser width will dictate). If not, here’s an extra little tip:

TO CREATE MORE TABS . . .
1. Create more LIST ITEMS (‘<li><a href=”#tab4″>CONTENT</a></li>’)
2. Match it to a corresponding div (‘<div id=”tab4″ class=”tabContents”>CONTENT</div><!– //tab4 –>’)
3. Make sure you get the tab name correct for both (‘#tab4’)

Hope That Helps

😎

5 users say Thank You to TomC for this useful post

1. marklimonbay
2. Giannis Maroulis
3. phong nam
4. memo12
5. maldo

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#510876

Hi TomC and thanks for the threat, but i will need more details if u are able to give me.

In my case i will need one more tab, lets say the “Details” tab, so the code will be

<div id="tabContainer">
<ul><li><a class="active" href="#tab1">Details</a></li></ul>
<!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
YOUR CONTENT CODE FOR DETAILS GOES HERE
</div><!-- //tab1 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->

The “YOUR CONTENT CODE FOR DETAILS GOES HERE<<<<What is that CODE>>>>“??

And in the END of the above code i will continue with this script??

<script type="text/javascript">
jQuery(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").click(function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});
</script>

Thats it??

I dont want to change my templates layout so i will not use the CSS code you mention is that right?

I appreciate your answer and it would be great if you can help me out with my project…..
I put a screenshot of what i want to accomplice

Thanks in advanced
Giannis Maroulis

---

Attachments:

1. 

Giannis Maroulis

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#510970

The best way on this case is customizing them from php code and not css files

Open ja_hawkstore/html/com_virtuemart/productdetails/default.php file

find

<div class="productdetails-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#desc" data-toggle="tab"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></a></li>
<li><a href="#review" data-toggle="tab">Reviews</a></li>
</ul>
<div class="tab-content">
<div id="desc" class="tab-pane fade active in">
<?php
// Product Description
if (!empty($this->product->product_desc)) {
?>
<div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
</div>
<?php
} // Product Description END
?>
</div>
<div id="review" class="tab-pane fade">
<?php
echo $this->loadTemplate('reviews');
?>
</div>
</div>
</div>

and Add new tab


<div class="productdetails-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#desc" data-toggle="tab"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></a></li>
<li><a href="#review" data-toggle="tab">Reviews</a></li>
<li><a href="#newtab" data-toggle="tab">New Tab</a></li>
</ul>
<div class="tab-content">
<div id="desc" class="tab-pane fade active in">
<?php
// Product Description
if (!empty($this->product->product_desc)) {
?>
<div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
</div>
<?php
} // Product Description END
?>
</div>
<div id="review" class="tab-pane fade">
<?php
echo $this->loadTemplate('reviews');
?>
</div>
<div id="newtab" class="tab-pane fade">
<?php
echo "Add data new tab";
?>
</div>
</div>
</div>


1 user says Thank You to Ninja Lead for this useful post

1. Giannis Maroulis

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#511012

You are more than Ninja You are my Super Support Hero……

One more thing how do i import data in this new tab….I cant find a way from backend of joomla >virtuemart>products…..Do i miss something

Thanks a lot friend

Regards
Giannis M

Giannis Maroulis

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#511263

Anyone can help with that please…?? :((

Thanks

Giannis Maroulis

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#511311

Hi Giannis,

our experience is limited when it comes to 3rd party components such as Virtuemart. I am sure you will get better answers for the functions and how to questions in the VM forum.

I found this solution about import/export from VM component while searching on google (even we have to use google when it comes to 3rd party extensions) link. Hope it helps you to solve this issue

Regards

[Author]

Posts