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

implementing jQuery tabs to product-collateral section
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

I wanting to use jQuery tabs for product-collateral section. In page.xml I added jQuery JS files.

In the view.phtml I added the necessary markup.

<div class="product-collateral" id="tab">
<ul> <li><a href="#p_specs"><?php echo $this->__('Product Description') ?></a></li>
<li><a href="#extra_info"><?php echo $this->__('Additional Information') ?></a></li>
</ul>

<div id="#p_specs">
<p class="product-specs"><?php echo nl2br($_product->getDescription()) ?></p>
</div>

<div class=” attribute-specs” id="extra_info">
.....
<?php endif; ?>
</div>

In the ‘head.phtml’ I call the js script function :

<script type="text/javascript\">
$(document).ready(function(){
$("#tab > ul").tabs();
});
</script>

It should works but nothing happens when I click on the “Product Description” or “Additional Information” tab, I think it doesn’t pick up the :

<script type="text/javascript\">
$(document).ready(function(){
$("#tab > ul").tabs();
});
</script>

My question, can I not call the JS function directly from the ‘head.phtml’.?

Anybody implemented jquery? please help.

Many thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Never mind!

 
Magento Community Magento Community
Magento Community
Magento Community
 
karynn
Member
 
Avatar
Total Posts:  70
Joined:  2008-02-07
 

Were you able to get things working with jquery?

I’m trying to use a jquery script and my script runs fine. The only problem is that now my dropdown navigation menu is not working (not dropping) and there seems to be a conflict. I’ve narrowed it down and the conflict occurs with the call to the jquery.js file.

Is jquery not compatible somehow? Any ideas?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

See this thread, look for my reply at #24: http://www.magentocommerce.com/boards/viewthread/5826/P15/#t22333

Bascially Jquery has its namesapce for ‘$’ and is conflicting with with JS library.

In Jquery site, it’s well documented with various methods to solve the conflict, and this is my code:

<script type="text/javascript\">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(’#tab > ul’).tabs({ fx: { opacity: ‘toggle’ } });
});
</script>

Note: don’t simply copy and paste my code though as you need to modify the ‘ $j(’#tab > ul’).tabs({ fx: { opacity: ‘toggle’ } }); ‘ to suit yours.

Upon testing, I also found that the Jquery files have to place AFTER the prototype script in the page.xml.  I didn’t pay attention whether the dropdown menu was working or not, but it’s working now after I got the Jquery tabs working, so I guess it doesn’t matter whether you place the Jquery files before or after the menu.js.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi firespire, you are most welcome. Glad that I can help a bit smile

Re the issue you have:

1) ‘#’ is a symbol for ID, not class. With class, we use ‘.’ (dot).
2) This “$("#collateral-box > ul").tabs();" ask jQuery tab to look for the child/children of the #collateral-box.
3) However, with your code in the view.phtml , it’s not correct though. I have not tested it, but I quite believe this will resulting 2 set of jQuery tabs, if, it works at all.

You should call the outer div which is the ‘product-collateral’:  ‘ $(”.product-collateral > ul").tabs();.

I have not used the new jQuery UI code, therefor am not sure ‘id="ui-tabs-nav" is the correct ID for your version. Another thing is that, you really should use ID once only in the entire page, so I think it’s something like this “‘id="ui-tabs-nav-1" (first tab), ‘id="ui-tabs-nav-2" (2nd tabs, and you need to reference each tab ID.

I use a very simple version ones, and attached my jquery tab file.
http://docs.jquery.com/UI/Tabs

Here is my code in the view.phtml
( I called the ‘#tab’ :
jQuery("#tab > ul").tabs({ fx: { opacity: “toggle” } });,

So in the below code I simply added a “<div id="tab” class="product-collateral"> “

<div id="tab" class="product-collateral">    
  
  <
ul id="tabnav">  
        <
li><a href="#fragment-1"><span><?php echo $this->__('Product Description'?></span></a></li>    
        <
li><a href="#fragment-2"><span><?php echo $this->__('Add your Tags'?></span></a></li>
        </
ul>    
        
 
<?php if ($_description $this->getChildHtml('description')):?>
           
<div id="fragment-1" class="collateral-box">
                
<?php echo $_description ?>
            
</div>  
         
<?php endif;?>
    
<div id="fragment-2" class="collateral-box">
        
<?php echo $this->getChildHtml('product_additional_data'?>
         
</div>
      
<?php echo $this->getChildHtml('upsell_products'?>  
   
</div><!-- /end tab-->

last note, I do not see you using noConflict. you need that in order for it to work in Magento. There is a Wiki article regarding using noConflict, and also see my very recent post regarding jquery.

Oh, another thing, I also noticed you have <il> in your code in view.phtml. It should be <li>...</li>, this is tiny yet very very important detail that one needs to pay close attention in order for it to work smile

File Attachments
ui.tabs.pack.js  (File Size: 7KB - Downloads: 399)
 
Magento Community Magento Community
Magento Community
Magento Community
 
pdxwebhead
Jr. Member
 
Total Posts:  27
Joined:  2008-07-16
Portland Oregon
 

Hi,

I am trying to implement a jquery solution for tabs that is slightly different than the example in this thread. I am about 90% of the way to the solution but I can’t seem to get the CSS right.

Here’s my example page: http://www.synaptech.biz/steep/index.php/example.html

When I try to drop the existing code in from the default view.phtml page into my tab areas, nothing shows - no text, no tables, nothing. If you look at the page source, the information is loading, but not displaying.. CSS seems to be the culprit. Specifically a class style “display: none;”
is added and I can’t figure out why.

So at the moment, I have placed the code I want to show in my tab panels, below to try and get it integrated.

Any help would be greatly appreciated - I’ll post the entire how-to if I can get this sorted out!

 
Magento Community Magento Community
Magento Community
Magento Community
 
l781
Sr. Member
 
Total Posts:  109
Joined:  2008-11-09
 

maybe this link helps you:
http://wiki.github.com/madrobby/scriptaculous/tabs

 
Magento Community Magento Community
Magento Community
Magento Community
 
pdxwebhead
Jr. Member
 
Total Posts:  27
Joined:  2008-07-16
Portland Oregon
 

Hey thanks for the link!  It really helps to have another example to try. However, it puts me in the same position, the class styling of the collateral-box, etc, isn’t coming through from the dependent files (attribute.phtml, description.phtml, addto.phtml, etc) I still am missing something about how the existing css is working, and I am not sure where to fix it.  :(

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