[Solved] Remote link to specific tab on product page

[mikecheung]

I have tried searching Google and these forums and have not found a solution. So I am hoping that someone here can help. I am currently on version 1.5 of prestashop and am still using the default idTabs plugin that comes with the package.

 

I have successfully added a custom tab via a module I am creating but cant seem to remotely link to it.

 

To be more specific, I would like to have a anchor tag that I place below the products price and when clicked it will open/activate a specific tab.

 

Does anyone know of a solution for this?

 

Your help is greatly appreciated.

Edited July 17, 2013 by mikecheung (see edit history)

[Krystian Podemski]

The function of this plugin is based on the identifiers of the individual tabs.

 

So link:

<a href="#idTab99">Some tab</a>

 

Open:

<div id="idTab99">content</div>

[mikecheung]

The function of this plugin is based on the identifiers of the individual tabs.

 

So link:

<a href="#idTab99">Some tab</a>

 

Open:

<div id="idTab99">content</div>

 

Correct, but the problem is that the anchor tag needs to be within a class="idTabs" and it will not work if I define two different divs with that class (i've tried). If I take it out of the original tab group, it no longer works.

[Krystian Podemski]

Maybe produtctcomments-extra.tpl example will help you?

 

<script type="text/javascript">
$(function(){
$('a[href=#idTab5]').click(function(){
 $('*[id^="idTab"]').addClass('block_hidden_only_for_screen');
 $('div#idTab5').removeClass('block_hidden_only_for_screen');
 $('ul#more_info_tabs a[href^="#idTab"]').removeClass('selected');
 $('a[href="#idTab5"]').addClass('selected');
});
});
</script>

[mikecheung]

Maybe produtctcomments-extra.tpl example will help you?

 

<script type="text/javascript">
$(function(){
$('a[href=#idTab5]').click(function(){
 $('*[id^="idTab"]').addClass('block_hidden_only_for_screen');
 $('div#idTab5').removeClass('block_hidden_only_for_screen');
 $('ul#more_info_tabs a[href^="#idTab"]').removeClass('selected');
 $('a[href="#idTab5"]').addClass('selected');
});
});
</script>

 

Thanks Krystian, I was thinking about doing it manually as well, but figured i'd ask before I try it. You sharing the code really helps. I was using productComments as a guide as well, but missed this.

 

Appreciate the help. If there is any cleaner way to do this, please do share.

[Krystian Podemski]

You can place this code in function, something like:

 

function changeTab(tabID)
{
$('a[href=#idTab'+tabID+']').click(function(){
 $('ul#more_info_tabs a[href^="#idTab"]').removeClass('selected');
 $('a[href="#iidTab'+tabID+"]').addClass('selected');
});
}
<a href="#" class="changeTab" data-tab="99" title="My Tab">My Tab</a>
$('.changeTab').click(function()
{
changeTab($(this).data('tab'));
});

[mikecheung]

Maybe produtctcomments-extra.tpl example will help you?

 

<script type="text/javascript">
$(function(){
$('a[href=#idTab5]').click(function(){
 $('*[id^="idTab"]').addClass('block_hidden_only_for_screen');
 $('div#idTab5').removeClass('block_hidden_only_for_screen');
 $('ul#more_info_tabs a[href^="#idTab"]').removeClass('selected');
 $('a[href="#idTab5"]').addClass('selected');
});
});
</script>

 

Edited the above code a bit to be more versatile. Just add the class "linkTab" and target ID as the href to any anchor tag and the below code will detect which tab you are referring to.

 

$('a[href^=#].linkTab').click(function(){
tabId = $(this).attr('href');
$('*[id^="idTab"]').addClass('block_hidden_only_for_screen');
$('div' + tabId).removeClass('block_hidden_only_for_screen');
$('ul#more_info_tabs a').removeClass('selected');
$('a[href="' + tabId + '"]').addClass('selected');
});

Edited July 17, 2013 by mikecheung (see edit history)

[ErikSebastia2]

Can you explain it with an exaple? Thanks

 

I want to remote link from product-list.tpl to more_info_tab from Product.tpl.

 

Best regards

[ErikSebastia2]

Edited the above code a bit to be more versatile. Just add the class "linkTab" and target ID as the href to any anchor tag and the below code will detect which tab you are referring to.

 

$('a[href^=#].linkTab').click(function(){
tabId = $(this).attr('href');
$('*[id^="idTab"]').addClass('block_hidden_only_for_screen');
$('div' + tabId).removeClass('block_hidden_only_for_screen');
$('ul#more_info_tabs a').removeClass('selected');
$('a[href="' + tabId + '"]').addClass('selected');
});

 

 

Can you show an example of tpl with this code? Thanks

[ErikSebastia2]

Up!

[ErikSebastia2]

Any idea?

 

Best regards

[Pirate]

Hello. Does anybody know, how to do this thing: when clicked a link it will open/activate a specific tab on a product page (from product page). But. I can use only id, not specific class.