Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

jQuery Product Tabs


PupStar

Recommended Posts

Hi Guys,

 

I am playing with jQuery tabs but for the life of me can not get the tabs to function correctly

 

The code I have is this

 

<script>
$(function() {
	$( "#tabs" ).tabs({
		event: "mouseover"
	});
});
</script>


<div class="tabs">
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"><?php echo TEXT_PRODUCT_DESCRIPTION_TAB_TITLE; ?></a></li>
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-2"><?php echo TEXT_PRODUCT_DOWNLOADS_TITLE; ?></a></li>
   </ul>

  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?>

  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2">

  <div id="sidebar_documents">
  <?php
    if (tep_session_is_registered('customer_id')) {
     //Document Manager
        if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') {
          include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS);
        }
    }else{
         echo tep_customer_greeting();
    }
  ?>
   </div>
</div>
</div>

 

Now I know first instincts people will say well he aint closed the <div>'s on these 2 lines

 

   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?>

  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2">

  <div id="sidebar_documents">
  <?php
    if (tep_session_is_registered('customer_id')) {
     //Document Manager
        if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') {
          include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS);
        }
    }else{
         echo tep_customer_greeting();
    }
  ?>
   </div>

 

but if I do it screws up the layout completely urgh :blink:

 

So the issue is that the content aint inside each tab and when I do click on a tab it is acting as a proper link and redirecting to index.php

 

The original code and instructions come from here.

 

Would someone mind casting an eye over and see if they can see what I have done wrong/missed.

 

Thanks

 

Mark

Link to comment
Share on other sites

I adapted the code below from the same link. Do it like this and it will match the themeroller theme you are using as well:

 

on product_info.php about line 187 just below the </div> (it will work just about anywhere, but that spot seems to be a logical place) add this:

 

<!--tabs-->
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="fragment-3">
Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<!--/tabs-->

 

I have a demo and instructions for this at:

 

www dot css-oscommerce dot com/jquery-themeroller-tabs-for-oscommerce-2-3/

 

(Ideally you would paste the javascript snippet , the <script>etc etc </script>, in the head of product_info.php and the html in the body. However, that’s not easy to do in OSCommerce 2.3. You could paste the snippet in the head located in template_top.php, but then it would appear on all catalog pages. In any case it will work fine as I have posted it here)

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Do it like this:

 

on product_info.php about line 187 just below the </div> (it will work just about anywhere, but that spot seems to be a logical place) add this:

 

<!--tabs-->
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>

Sorry mate your code did not produce tabs for me but just show the <li></li> 

Also my code was essentially the same as yours but with extra styling.

Mark
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="fragment-3">
Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<!--/tabs-->

 

I have a demo and instructions for this at:

 

www dot css-oscommerce dot com/jquery-themeroller-tabs-for-oscommerce-2-3/

 

(Ideally you would paste the javascript snippet , the <script>etc etc </script>, in the head of product_info.php and the html in the body. However, that’s not easy to do in OSCommerce 2.3. You could paste the snippet in the head located in template_top.php, but then it would appear on all catalog pages. In any case it will work fine as I have posted it here)

 

Sorry mate your code did not work it was just a list of <li>'s

 

Your code is essentially the same as mine minus the extra styling.

 

Any thoughts on my code would be appreciated.

 

Thanks

 

Mark

Link to comment
Share on other sites

That code works, you can see it here on a vanilla 2.3 test site,

 

alpha-clear dot com/catalog/product_info dot php?products_id=28

 

You need to add the '#fragment-1,2, etc' and the cooresponding 'id="fragment-1,2,etc " ' in your code.

 

The extra 'ui' styling you have is not needed, as the id=tabs should pick up all that anyway. (at least on a stock install 2.3 stylesheet.css) Also The container div with the class=tabs you have in your code is not needed. Perhaps those two things are an issue.

 

Check and make sure your snippet looks like this:

<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

you may take a look at www - dot - greatdiscounts4u - dot - com/28pc-element-stainless-steel-cookware-p-4.html to see how I am using my product tabs if you like. Not quit sure if it is proper, but it works for me.

Link to comment
Share on other sites

That code works, you can see it here on a vanilla 2.3 test site,

 

alpha-clear dot com/catalog/product_info dot php?products_id=28

 

You need to add the '#fragment-1,2, etc' and the cooresponding 'id="fragment-1,2,etc " ' in your code.

 

The extra 'ui' styling you have is not needed, as the id=tabs should pick up all that anyway. (at least on a stock install 2.3 stylesheet.css) Also The container div with the class=tabs you have in your code is not needed. Perhaps those two things are an issue.

 

Check and make sure your snippet looks like this:

<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

 

sorry mate what I should have said was that I cut and pasted your complete code into my product_info and it only showed the <li>'s and no tabs.

Link to comment
Share on other sites

Make sure you have references to both the main Jquery file and the ui file in product_info.php. Older versions should be okay.

 

For example

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

 

or if you have them on your site, this would be the stock 2.3 references (this includes the appropriate css file):

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Make sure you have references to both the main Jquery file and the ui file in product_info.php. Older versions should be okay.

 

For example

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

 

or if you have them on your site, this would be the stock 2.3 references (this includes the appropriate css file):

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

 

nice one that sorted the tabbing problem woohoo :thumbsup:

 

Now for some reason the contents of tab-2 do not show urgh

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

<div class="tabs">
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"><?php echo TEXT_PRODUCT_DESCRIPTION_TAB_TITLE; ?></a></li>
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-2"><?php echo TEXT_PRODUCT_DOWNLOADS_TITLE; ?></a></li>
   </ul>

  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?>

  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2">

  <div>
  <?php
    if (tep_session_is_registered('customer_id')) {
     //Document Manager
        if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') {
          include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS);
        }
    }else{
         echo tep_customer_greeting();
    }
  ?>
   </div>
</div>
</div>

Link to comment
Share on other sites

You have a typo?, there is no closing </div> after:

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?>

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

You have a typo?, there is no closing </div> after:

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?>

 

thanks again, I had a stray </div> at the end of the file which was screwing up the layout :blush:

 

Mark

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...