CONTRIBUTION Product Tabs

♥kymation · March 2, 2016

Vacation? Is that some new-fangled invention? I don't keep up very well.

Regards

Jim

Melhor · March 2, 2016

yes Jim, when I work tooooo much I dont get focused, concentrated anymore, then I need vacacion.

This happen ONLY 3 times a year for about 116 days :) :) :)

Thanks for your kind help, gonna finish this shop en then gonna be bussy with the restauration of a cute oldtimer, a 1957 Ford Thunderbird.

That's like vacation for me

greets

♥kymation · March 3, 2016

Now that's more like my idea of a vacation. I like building things....

Regards

Jim

Melhor · March 3, 2016

Thanks Jim for the support. The admin site is working well but the navbar is f*ck up

see printscreens

♥kymation · March 3, 2016

This old tabs code uses the jQueryUI tabs function to display. The jQueryUI code has been replaces with Bootstrap in the version you are using. The jQueryUI script is still there but is not being loaded in the front end, so the tabs will not work there. You can add back the line in template_top.php that loads the jQueryUI script:

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.4.min.js"></script>

Anywhere after the line that loads the jQuery script, but before the </head> will work.

Warning: I have not tested this, and it may cause a fatal conflict between jQueryUI and Bootstrap. It would be much better to rewrite this to use the Bootstrap Dynamic Tabs so you don't have to load a second huge library just to display tabs.

Regards

Jim

Melhor · March 4, 2016

Hi Jim,

that works :) :)

thank you very much

Grtz

Kozak

Melhor · March 5, 2016

Hi Jim,

it seems to work but after some time it come BACK??

When I delete the sript in includes/templates_top.php the site works well but still have the error in the admin/categories.php

Yes, its BEFORE the </head>

here my template_top.php maybe you see whats wrong.

when I put the script again I have the errors in admin & shop??

When I delete the script nothing happen. Then I replace with the backup & everything works well except the double page in insert a new product.

Think the code have to be adapt for 234BS.

Thanks for your kind support, I own you some beers if you like it :) :) :)

*/

$oscTemplate->buildBlocks();

if (!$oscTemplate->hasBlocks('boxes_column_left')) {

$oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());

}

if (!$oscTemplate->hasBlocks('boxes_column_right')) {

$oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());

}

?>

<!DOCTYPE html>

<head>

<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>

<!--[if lt IE 9]>

<![endif]-->

<?php echo $oscTemplate->getBlocks('header_tags'); ?>

</head>

<body>

♥kymation · March 5, 2016

The code really does need to be rewritten for Bootstrap. What I suggested was a horrible hack, so I'm not surprised it doesn't work. I believe that a rewrite is the only way to go.

Regards

Jim

mitchlin71 · March 15, 2016

Hello,

I'm experiencing some layout issue on mostly standard OSC 2.3.4. Where it used to work on RC2A before.

I tried moving

<?php include_once (DIR_WS_MODULES . FILENAME_PRODUCTS_TABS); ?>

and tried the strip shlashes modification, however without any good result.

Please see attached screenshot. Any suggestions or solutions are very much appreciated.

Regards,

Richard

♥kymation · March 16, 2016

That's the old jQuery base tag bug. The fix is here.

Regards

Jim

mitchlin71 · March 16, 2016

This is actually considered a markup problem with the latest jquery - because of the <base> tag.

The tabs are using as links something like #tab1 #tab2 etc - what this means with the base tag is

http://somedomain.com/#tab1 or http://somedomain.com/#tab2

which is literally the site root loaded in the tab - working as intented ( although this wasnt pre 1.9 behaviour ).

Changing the markup to something like
<li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tab1">MY TAB</a></li>
forces the tab url to be something like

http://somedomain/somepath.html#tab1

which then loads correctly ( for me at least anyways - with the latest jquery versions)

Jules

Thanks, this fixed my problem of the complete site loading in the tabs (Products Tabs 1.1)

The fixed products_tabs.php with the changes to each tabs div:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/
?>

<script type="text/javascript">
  $(function() {
      $( "#tabs" ).tabs();
  });
</script>
<div id="tabs">
  <ul>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-0"><?php echo TEXT_TAB_DESCRIPTION; ?>
        </a></li>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-1"><?php echo PRODUCT_TABS_TAB_1; ?></a></li>
<?php } ?>
<?php
// Ttab 2
  if ($product_info['products_tab_2'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-2"><?php echo PRODUCT_TABS_TAB_2; ?></a></li>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-3"><?php echo PRODUCT_TABS_TAB_3; ?></a></li>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-4"><?php echo PRODUCT_TABS_TAB_4; ?></a></li>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-5"><?php echo PRODUCT_TABS_TAB_5; ?></a></li>
<?php } ?>
<?php
// Review Tab
  if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-6"><?php echo TEXT_TAB_REVIEWS; ?></a></li>
<?php } ?>
<?php
// Ask a Question Tab
  if (PRODUCT_TABS_QUESTION_TAB == 'True') {
?>
<?php } ?>
<?php
// Tell a Friend Tab
  if (PRODUCT_TABS_FRIEND_TAB == 'True') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-8"><?php echo TEXT_TAB_TELL_A_FRIEND; ?></a></li>
<?php } ?>
    </ul>
    <div id="tabs-0">
<?php
  echo stripslashes($product_info['products_description']);
?>
                  </div>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
    <div id="tabs-1">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_1']);
?>
    </div>
<?php } ?>
<?php
// Tab 2
  if ($product_info['products_tab_2'] > '') {
?>
    <div id="tabs-2">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_2']);
?>
    </div>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
    <div id="tabs-3">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_3']);
?>
    </div>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
    <div id="tabs-4">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_4']);
?>
    </div>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
    <div id="tabs-5">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_5']);
?>
    </div>
<?php } ?>
<?php
// Review Tab
    if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
    	echo '    <div id="tabs-6">';
      include( DIR_WS_MODULES . FILENAME_PRODUCT_REVIEWS );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Ask a Question Tab
    if (PRODUCT_TABS_QUESTION_TAB == 'True') {
    	echo '    <div id="tabs-7">';
      include( DIR_WS_MODULES . FILENAME_ASK_A_QUESTION );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Tell a Friend Tab
    if (PRODUCT_TABS_FRIEND_TAB == 'True') {
    	echo '    <div id="tabs-8">';
      include( DIR_WS_MODULES . FILENAME_TELL_A_FRIEND );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
  </div>

mitchlin71 · March 31, 2016

Well it fixed it temporary. Today I found out, the site had problems with "<? echo $_SERVER['REQUEST_URI'];?>" as it combined all Tabs information into the first tab. Basically the Tabs didn't work. So after some extensive searching, I tried the original code from "product_tabs.php" and the JQuery hack in "template_top.php" mentioned here a few times, now it works again. :mellow:

Thanks, this fixed my problem of the complete site loading in the tabs (Products Tabs 1.1)

The fixed products_tabs.php with the changes to each tabs div:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/
?>

<script type="text/javascript">
  $(function() {
      $( "#tabs" ).tabs();
  });
</script>
<div id="tabs">
  <ul>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-0"><?php echo TEXT_TAB_DESCRIPTION; ?>
        </a></li>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-1"><?php echo PRODUCT_TABS_TAB_1; ?></a></li>
<?php } ?>
<?php
// Ttab 2
  if ($product_info['products_tab_2'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-2"><?php echo PRODUCT_TABS_TAB_2; ?></a></li>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-3"><?php echo PRODUCT_TABS_TAB_3; ?></a></li>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-4"><?php echo PRODUCT_TABS_TAB_4; ?></a></li>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-5"><?php echo PRODUCT_TABS_TAB_5; ?></a></li>
<?php } ?>
<?php
// Review Tab
  if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-6"><?php echo TEXT_TAB_REVIEWS; ?></a></li>
<?php } ?>
<?php
// Ask a Question Tab
  if (PRODUCT_TABS_QUESTION_TAB == 'True') {
?>
<?php } ?>
<?php
// Tell a Friend Tab
  if (PRODUCT_TABS_FRIEND_TAB == 'True') {
?>
      <li><a href="<? echo $_SERVER['REQUEST_URI'];?>#tabs-8"><?php echo TEXT_TAB_TELL_A_FRIEND; ?></a></li>
<?php } ?>
    </ul>
    <div id="tabs-0">
<?php
  echo stripslashes($product_info['products_description']);
?>
                  </div>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
    <div id="tabs-1">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_1']);
?>
    </div>
<?php } ?>
<?php
// Tab 2
  if ($product_info['products_tab_2'] > '') {
?>
    <div id="tabs-2">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_2']);
?>
    </div>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
    <div id="tabs-3">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_3']);
?>
    </div>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
    <div id="tabs-4">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_4']);
?>
    </div>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
    <div id="tabs-5">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_5']);
?>
    </div>
<?php } ?>
<?php
// Review Tab
    if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
    	echo '    <div id="tabs-6">';
      include( DIR_WS_MODULES . FILENAME_PRODUCT_REVIEWS );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Ask a Question Tab
    if (PRODUCT_TABS_QUESTION_TAB == 'True') {
    	echo '    <div id="tabs-7">';
      include( DIR_WS_MODULES . FILENAME_ASK_A_QUESTION );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Tell a Friend Tab
    if (PRODUCT_TABS_FRIEND_TAB == 'True') {
    	echo '    <div id="tabs-8">';
      include( DIR_WS_MODULES . FILENAME_TELL_A_FRIEND );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
  </div>

herbsandhelpers · December 21, 2016

Hello,

Just moved to 2.3.4 BS GOLD and needed to carry on using this excellent contrib. Admin side worked fine along with assistance posted here, however getting the tabs to show shop side failed. I'm not a coder but I've just spent many hours altering the products_tabs.php module to work and show tabs again. I used a lot of help from here:

http://www.oscommerce.com/forums/topic/398352-234bs-tabs-in-product-info/

If it will help anyone then please find the adjusted module below. You can remove the 'brand/image bit' if you prefer. Please note I'm not a coder so an expert eye would be helpful.

Lorraine

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/
?>

<script type="text/javascript">
  $(function() {
      $( "#tabs" ).tabs();
  });
</script>
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
	<a class="navbar-brand" href="#">
        <img alt="Brand" src="images/QELICON.png">
		</a>
<!-- Nav tabs -->
<div id="tabs" role="tabpanel" class="nav nav-tabs" role="tablist">
  <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#tabs-0" aria-controls="tabs-0" role="tab" data-toggle="tab"><?php echo TEXT_TAB_DESCRIPTION; ?></a></li>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
      <li role="presentation"><a href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab"><?php echo PRODUCT_TABS_TAB_1; ?></a></li>
<?php } ?>
<?php
// Tab 2
  if ($product_info['products_tab_2'] > '') {
?>
      <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" role="tab" data-toggle="tab"><?php echo PRODUCT_TABS_TAB_2; ?></a></li>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
      <li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" role="tab" data-toggle="tab"><?php echo PRODUCT_TABS_TAB_3; ?></a></li>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
      <li role="presentation"><a href="#tabs-4" aria-controls="tabs-4" role="tab" data-toggle="tab"><?php echo PRODUCT_TABS_TAB_4; ?></a></li>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
      <li role="presentation"><a href="#tabs-5" aria-controls="tabs-5" role="tab" data-toggle="tab"><?php echo PRODUCT_TABS_TAB_5; ?></a></li>
<?php } ?>
<?php
// Review Tab
  if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
?>
      <li><a href="#tabs-6"><?php echo TEXT_TAB_REVIEWS; ?></a></li>
<?php } ?>
<?php
// Ask a Question Tab
  if (PRODUCT_TABS_QUESTION_TAB == 'True') {
?>
      <li><a href="#tabs-7"><?php echo TEXT_TAB_ASK_A_QUESTION; ?></a></li>
<?php } ?>
<?php
// Tell a Friend Tab
  if (PRODUCT_TABS_FRIEND_TAB == 'True') {
?>
      <li><a href="#tabs-8"><?php echo TEXT_TAB_TELL_A_FRIEND; ?></a></li>
<?php } ?>
    </ul>
	 </div>
<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tabs-0">
<?php
  echo stripslashes($product_info['products_description']);
?>
                  </div>
<?php
// Tab 1
  if ($product_info['products_tab_1'] > '') {
?>
    <div role="tabpanel" class="tab-pane" id="tabs-1">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_1']);
?>
    </div>
<?php } ?>
<?php
// Tab 2
  if ($product_info['products_tab_2'] > '') {
?>
    <div role="tabpanel" class="tab-pane" id="tabs-2">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_2']);
?>
    </div>
<?php } ?>
<?php
// Tab 3
  if ($product_info['products_tab_3'] > '') {
?>
    <div role="tabpanel" class="tab-pane" id="tabs-3">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_3']);
?>
    </div>
<?php } ?>
<?php
// Tab 4
  if ($product_info['products_tab_4'] > '') {
?>
    <div role="tabpanel" class="tab-pane" id="tabs-4">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_4']);
?>
    </div>
<?php } ?>
<?php
// Tab 5
  if ($product_info['products_tab_5'] > '') {
?>
    <div role="tabpanel" class="tab-pane"id="tabs-5">
      <br>
<?php
    echo stripslashes ($product_info['products_tab_5']);
?>
    </div>
<?php } ?>
<?php
// Review Tab
    if (PRODUCT_TABS_REVIEWS_TAB == 'True') {
    	echo '    <div id="tabs-6">';
      include( DIR_WS_MODULES . FILENAME_PRODUCT_REVIEWS );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Ask a Question Tab
    if (PRODUCT_TABS_QUESTION_TAB == 'True') {
    	echo '    <div id="tabs-7">';
      include( DIR_WS_MODULES . FILENAME_ASK_A_QUESTION );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
<?php
// Tell a Friend Tab
    if (PRODUCT_TABS_FRIEND_TAB == 'True') {
    	echo '    <div id="tabs-8">';
      include( DIR_WS_MODULES . FILENAME_TELL_A_FRIEND );
    	echo '    </div><div style="clear: both;"></div>';
    }
?>
  </div>
  </div>
  </div>
  </nav>

Edited December 21, 2016 by herbsandhelpers

♥frankl · December 21, 2016

@@herbsandhelpers

Hi Lorraine, see this post for a better product tabs system for your version of osCommerce http://www.oscommerce.com/forums/topic/410475-specifications-reviews-and-support-tabs-bootstrap/?p=1750415

herbsandhelpers · December 21, 2016

Doooh! Can you post the Add On link please ...

Lorraine

♥frankl · December 22, 2016

@@herbsandhelpers

No actual addon Lorraine, you need to follow the instructions in the post and create it yourself. If you can't let me know and I can create it as an addon and test etc (although I can't guarantee I can do it quickly at this time of year lol)

herbsandhelpers · December 22, 2016

I couldn't find anything similar in Add Ons that's why I persisted with altering the above module, it does work, although I'm not a coder so would appreciate an expert eye.

I did look at the link you posted and one of the comments was that someone was unable to get it to work, which doesn't fill with confidence. I think for now I'll stick with what I've got, although if yours becomes an official add on I may give it a try.

Lorraine

February 6, 2017

I have product tabs installed. But I can't change the name of the tabs. Why?

Anthony

www.novainkjet.com

♥frankl · February 6, 2017

@@nova inkjet You are using oscmax, try their forums.

mcmannehan · February 20, 2017

Attention, this add-on is not working with jQuery3.+. Its about the .tab function. If you implement the jQuery UI, than your shop get worst.

♥14steve14 · February 20, 2017

Attention, this add-on is not working with jQuery3.+. Its about the .tab function. If you implement the jQuery UI, than your shop get worst.

@@mcmannehan

And what is the solution. Posting a warning is no use if you dont also suggest a fix.

Edited February 20, 2017 by 14steve14

mcmannehan · February 20, 2017

Give me some time, i will programming a new one.

mcmannehan · February 21, 2017

after a sleeples night i consider to do a new add-on, inspired by this add-on. If the add-on finish and work i will posting here.

So please be calm and give me time to devlopment this. Thanks!

Edited February 21, 2017 by mcmannehan

mcmannehan · February 21, 2017

First view of WDW EasyTabs 1.0.0, please look the attached images.

I included a dynamic barcode and QR generator too. The QR code generates the link to the product site.

For the tabs i use the jQuery easytabs plug in, it works with jQuery 3.
Every code is PHP5.6 to PHP7.1.1 and MySQL5.7 hard sql_mode suitable.
The frontend is modular, only in the product_info.php have to do two small changes.
If i have time, than i do the backend for to input 'Technical Description' and 'Tags'.

May be some more suggestions what more tabs can do?

If the backend finish (this week i dont have time, should be next week o:) ), than i will upload this stuff to the add-on area in osC for the coummunity.

I did testet in 2.3.4 BS Edge and in 2.3.4 Boostrap-Responsive. Its working very well.
I hope all of you will like it. :thumbsup:

Edited February 21, 2017 by mcmannehan

mcmannehan · February 23, 2017

New add-on online inspired by CONTRIBUTION Product Tabs Thanky to @@EchoGuns

http://www.oscommerce.com/forums/topic/410793-add-on-wdw-easytabs-100/

Edited February 23, 2017 by mcmannehan

CONTRIBUTION Product Tabs

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ping_ping

inovastore

thejudge99

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation