Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

tabs.phtml questions
 
Bryan S.
Jr. Member
 
Total Posts:  12
Joined:  2009-04-10
Dallas, TX
 

I hope someone might be able to help me. Ive been working on this for too long.

I am trying to make anchors that can link directly to the tabs (product description, we also recommend etc...) on the product into page. I want to have a anchor link like <a href="#productdescription"> and have that tab light up. I think the link would have to change from the page URL its is at to http://www.mymagentosite.html#productdescription. Right now, the script in tabs.phtml calls [removed]void(0). I think this is causing me to have problems. If anyone might know this, I would greatly appreciate some help.

Here is the javascript (prototype) from tabs.phtml:

<script type="text/javascript"
Varien.Tabs = Class.create();
Varien.Tabs.prototype {
  initialize
: function(selector{
    
var self=this;
    $$(
selector+' a').each(this.initTab.bind(this));
  
},
 
  
initTab: function(el{
      el
.href '[removed]void(0)';
      if ($(
el.parentNode).hasClassName('active')) {
        this
.showContent(el);
      
}
      el
.observe('click'this.showContent.bind(thisel));
  
},
 
  
showContent: function(a{
    
var li = $(a.parentNode), ul = $(li.parentNode);
    
ul.getElementsBySelector('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        new 
Effect.Appear(contents);
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
}
}
new Varien.Tabs('.ddcolortabs');
</script>

Thanks
--Bryan

 
Magento Community Magento Community
Magento Community
Magento Community
 
blakew
Sr. Member
 
Total Posts:  107
Joined:  2008-06-20
 

I am looking for this also.

 
Magento Community Magento Community
Magento Community
Magento Community
 
David Oliver
Sr. Member
 
Avatar
Total Posts:  177
Joined:  2008-04-16
Cologne, Germany
 

Me too. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
chri-s
Jr. Member
 
Total Posts:  3
Joined:  2010-02-15
 

hey guys

if someone is still interested in a solution, here is a hint:

Thats the way you can remote control your tabs:

Extend the Varien.Tabs Class ( in tabs.phtml ):

Find this:

showContent: function(a{
    
var li = $(a.parentNode), ul = $(li.parentNode);
    
ul.getElementsBySelector('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
  
  
}

And add a new method, so it should look like:

showContent: function(a{
    
var li = $(a.parentNode), ul = $(li.parentNode);
    
ul.getElementsBySelector('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
  
  
remoteTabs: function(b{
    
var controlledLink = $$("#"+b+" a")[0];
    
this.showContent(controlledLink);
  
}
  
}

Now change:

new Varien.Tabs('.tabs');
to
var csTablist = new Varien.Tabs('.tabs');
You can call the var whatever-you-want.

That’s all. You can now remote controll your tabs by executing this line of code:

csTablist.remoteTabs("product_tabs_sendtofriend");
while the word in the qoutes is the id of the <li> element of the tab you want to trigger.

Now you can easily open the tab you want by reading your url (parent.document.URL ) and splicing the string.

best, chris.

 
Magento Community Magento Community
Magento Community
Magento Community
 
wonwiz
Jr. Member
 
Total Posts:  7
Joined:  2010-08-05
San Francisco Bay Area, California
 

wonwiz plaform replaced all ProtoType.js with jQuery

 
Magento Community Magento Community
Magento Community
Magento Community
 
sterling
Jr. Member
 
Avatar
Total Posts:  13
Joined:  2007-12-20
San Francisco
 
chri-s - 30 August 2010 09:20 AM

hey guys

if someone is still interested in a solution, here is a hint:

Thanks Chri-s.  Very helpful.  I was able to get product review link to open tabbed area using Easy Tabs extension thanks to your solution.

 
Magento Community Magento Community
Magento Community
Magento Community
 
skicrave
Member
 
Total Posts:  51
Joined:  2007-12-02
 

I just wanted to say thanks to chri-s for enlightening us on how to solve this problem, it makes reviews in a tab much more functional.

 
Magento Community Magento Community
Magento Community
Magento Community
 
webscot
Sr. Member
 
Total Posts:  192
Joined:  2009-05-12
 

How do you use csTablist.remoteTabs("tab-name") to construct the full URL for the hyperlink?

 
Magento Community Magento Community
Magento Community
Magento Community
 
bbatten
Jr. Member
 
Total Posts:  18
Joined:  2010-03-17
 

Add this to the bottom of chri-s code and then you can link to the product with the tab open.

So the url would be the product url plus #pruduct_tabs_???????

var query location.href.split('#');

if (
query[1] != ''{
    csTablist
.remoteTabs(query[1]); 
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
sof_bl
Jr. Member
 
Total Posts:  1
Joined:  2011-11-20
 

Super smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
davidyv
Jr. Member
 
Total Posts:  1
Joined:  2012-02-14
 

[Update] Thanks! The following problem have solved.

I using EasyTabs, I like it can form a link pointing to a selected tab.

I have extend the EasyTabs Class use the code of chri-s and added these code of 14ner, but it still can not work. If anyone might know this, I would greatly appreciate some help.

Here is my javascript from tabs.phtml:

<script type="text/javascript">
var 
EasyTabs = Class.create();
EasyTabs.prototype {
    initialize
: function(selector{
        
$$(selector).each(this.initTab.bind(this));
    
},

    
initTab: function(el{
        el
.href '[removed]void(0)';
        if ($(
el).up('li').hasClassName('active')) {
            this
.showContent(el);
        
}
        el
.observe('click'this.showContent.bind(thisel));
    
},

    
showContent: function(a{
        
var li = $(a).up('li'),
            
ul = $(li).up('ul');

        
ul.select('li'/*, 'ol'*/).each(function(el{
            
var contents = $(el.id '_contents');
            if (
el.id == li.id{
                el
.addClassName('active');
                
contents.show();
            
else {
                el
.removeClassName('active');
                
contents.hide();
            
}
        }
);
    
},
  
  
remoteTabs: function(b{
    
var controlledLink = $$("#"+b+" a")[0];
    
this.showContent(controlledLink);
  
}
}
var csTablist = new EasyTabs('.tabs a');

var 
query location.href.split('#');

if (
query[1] != ''{
    csTablist
.remoteTabs(query[1]); 
}
</script>

Thanks
David

 
Magento Community Magento Community
Magento Community
Magento Community
 
paradoxthecat
Jr. Member
 
Total Posts:  2
Joined:  2012-01-10
 

I have followed this solution and it mainly works really well. On visiting the page http://www.foo.com/bar.html#tab_li_id , the page loads with the correct tab open. However, I have placed a button (in this case “Write a Review") on the product page near the top, and set the href to http://www.foo.com/bar.html#tab_li_id as above. Clicking the button jumps the page to the tabs, but does not open the correct tab.

Can anyone help with whether this is maybe a caching issue or maybe the link thinking the # is a page anchor?

Many thanks

James

Code currently as follows:

Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+’ a’).each(this.initTab.bind(this));
},

initTab: function(el) {
el.href = ‘[removed]void(0)’;
if ($(el.parentNode).hasClassName(’active’)) {
this.showContent(el);
}
el.observe(’click’, this.showContent.bind(this, el));
},

showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select(’li’, ‘ol’).each(function(el){
var contents = $(el.id+’_contents’);
if (el==li) {
el.addClassName(’active’);
contents.show();
} else {
el.removeClassName(’active’);
contents.hide();
}
});
},
remoteTabs: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
}

var csTablist = new Varien.Tabs(’.tabs’);

var query = location.href.split(’#’);

if (query[1]) {
csTablist.remoteTabs(query[1]);
}

 
Magento Community Magento Community
Magento Community
Magento Community
 
paradoxthecat
Jr. Member
 
Total Posts:  2
Joined:  2012-01-10
 

Solved the above problem by adding a function in tabs.phtml to handle links outside of the tabs:

<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype {
  initialize
: function(selector{
    
var self=this;
    $$(
selector+' a').each(this.initTab.bind(this));
  
},

  
initTab: function(el{
      el
.href '[removed]void(0)';
      if ($(
el.parentNode).hasClassName('active')) {
        this
.showContent(el);
      
}
      el
.observe('click'this.showContent.bind(thisel));
  
},

  
showContent: function(a{
    
var li = $(a.parentNode), ul = $(li.parentNode);
    
ul.select('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
  
  
showContentExternalButton: function(c{
    
var li = $(document.getElementById(c)), ul = $(li.parentNode);
    
ul.select('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
 
  
remoteTabs: function(b{
      
var controlledLink = $$("#"+b+" a")[0];
    
this.showContent(controlledLink);
    
}
}

/* new Varien.Tabs('.tabs'); */
var csTablist = new Varien.Tabs('.tabs');

var 
query location.href.split('#');

if (
query[1]{
    csTablist
.remoteTabs(query[1]);
}
</script>

You can now place lniks such as

<a href="<?php echo $_product->getProductUrl() ?>#product_tabs_review_tabbed" onClick="csTablist.showContentExternalButton('product_tabs_review_tabbed');">LINK TEXT</a>

anywhere on the page to jump to a tab and open it.

 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  88
Joined:  2008-03-26
france moselle
 
paradoxthecat - 27 November 2012 04:33 AM

Solved the above problem by adding a function in tabs.phtml to handle links outside of the tabs:

<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype {
  initialize
: function(selector{
    
var self=this;
    $$(
selector+' a').each(this.initTab.bind(this));
  
},

  
initTab: function(el{
      el
.href '[removed]void(0)';
      if ($(
el.parentNode).hasClassName('active')) {
        this
.showContent(el);
      
}
      el
.observe('click'this.showContent.bind(thisel));
  
},

  
showContent: function(a{
    
var li = $(a.parentNode), ul = $(li.parentNode);
    
ul.select('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
  
  
showContentExternalButton: function(c{
    
var li = $(document.getElementById(c)), ul = $(li.parentNode);
    
ul.select('li''ol').each(function(el){
      
var contents = $(el.id+'_contents');
      if (
el==li{
        el
.addClassName('active');
        
contents.show();
      
else {
        el
.removeClassName('active');
        
contents.hide();
      
}
    }
);
  
},
 
  
remoteTabs: function(b{
      
var controlledLink = $$("#"+b+" a")[0];
    
this.showContent(controlledLink);
    
}
}

/* new Varien.Tabs('.tabs'); */
var csTablist = new Varien.Tabs('.tabs');

var 
query location.href.split('#');

if (
query[1]{
    csTablist
.remoteTabs(query[1]);
}
</script>

You can now place lniks such as

<a href="<?php echo $_product->getProductUrl() ?>#product_tabs_review_tabbed" onClick="csTablist.showContentExternalButton('product_tabs_review_tabbed');">LINK TEXT</a>

anywhere on the page to jump to a tab and open it.

Thanks for this. It works fine in 1.7.0.2 and beautyshop theme

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sleepers
Member
 
Total Posts:  32
Joined:  2010-10-21
 

Thanks a lot!!

Search for the solution for a long time. Works perfectly!
Im using magento 1.8.1

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top