Tabbed Products Pro (TPP) Contrib - Official Thread

[Feznizzle]

BTW, the reason I am doing this is because I have a large # of categories, some with more than 200 products, that require charts for visitors to figure out which item they want. The charts are lengthy, but can be divided into manageable segments.

Trying to display only a SHORT description to the visitor. If this person likes what she reads, she can click the tabs to find the right chart.

[DivaVocals]

**shrugs** I wish I could help.. this is an upgrade to the current functionality.. I've never looked at trying to expand this add-on beyond the product info pages.. If I need tabs anyplace else I simply use the readme as a guide for doing this..

Ok, back again, trying to figure out how to call the "TPP" effect for category descriptions (would love to use it for EZ-pages as well, subject for another conversation).

This *seems* like it should be VERY easy to do, since the mod is already installed. During install, you copy 3 little snippets to:

/includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php

Theoretically, it should be super simple to just add the snippets to the category controlling file:

/includes/templates/YOUR_TEMPLATE/templates/tpl_index_categories.php

Right? But no matter I try it things go wonky!

Input, anybody? Bueller? Bueller?

Here are the 3 snippets:

<?php
//BOF :: Tabbed Products Pro ::
require(DIR_WS_MODULES . 'tabbed_products_pro.php');
//EOF :: Tabbed Products Pro ::
?> 

<?php
//BOF :: Tabbed Products Pro ::
echo '<div id="tpptabBlock" style="display:none;">' . $tabData . '</div>';
//EOF :: Tabbed Products Pro ::
?>

<?php
//BOF :: Tabbed Products Pro ::
echo $tabjscript;
//BOF :: Tabbed Products Pro ::
?>

And here is the code from tpl_index_categories.php (I bolded out the place I've been trying to put the snippets):

<?php
/**
 * Page Template
 *
 * Loaded by main_page=index<br />
 * Displays category/sub-category listing<br />
 * Uses tpl_index_category_row.php to render individual items
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_index_categories.php 4678 2006-10-05 21:02:50Z ajeh $
 */
?>
<div class="centerColumn" id="indexCategories">
<?php if ($show_welcome == true) { ?>
<h1 id="indexCategoriesHeading"><?php echo HEADING_TITLE; ?></h1>

<?php if (SHOW_CUSTOMER_GREETING == 1) { ?>
<h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2>
<?php } ?>

<!-- deprecated - to use - uncomment
<?php if (TEXT_MAIN) { ?>
<div id="" class="content"><?php echo TEXT_MAIN; ?></div>
<?php } ?>-->

<!-- deprecated - to use - uncomment
<?php if (TEXT_INFORMATION) { ?>
<div id="" class="content"><?php echo TEXT_INFORMATION; ?></div>
<?php } ?>-->

<?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?>
<div id="indexCategoriesMainContent" class="content"><?php
/**
 * require the html_define for the index/categories page
 */
  include($define_page);
?></div>
<?php } ?>

<?php } else { ?>
<h1 id="indexCategoriesHeading"><?php echo $breadcrumb->last(); ?></h1>
<?php } ?>

<?php
if (PRODUCT_LIST_CATEGORIES_IMAGE_STATUS_TOP == 'true') {
// categories_image
  if ($categories_image = zen_get_categories_image($current_category_id)) {
?>
<div id="categoryImgListing" class="categoryImg"><?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?></div>
<?php
  }
} // categories_image
?>

<?php
// categories_description
    if ($current_categories_description != '') {
?>
<div id="categoryDescription" class="catDescContent"><?php echo $current_categories_description;  ?></div>
<?php } // categories_description ?>
<!-- BOF: Display grid of available sub-categories, if any -->
<?php
  if (PRODUCT_LIST_CATEGORY_ROW_STATUS == 0) {
    // do nothing
  } else {
    // display subcategories
/**
 * require the code to display the sub-categories-grid, if any exist
 */
   require($template->get_template_dir('tpl_modules_category_row.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_row.php');
  }
?>
<!-- EOF: Display grid of available sub-categories -->
<?php
$show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_CATEGORY);

while (!$show_display_category->EOF) {
  // //  echo 'I found ' . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS);

?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_FEATURED_PRODUCTS') { ?>
<?php
/**
 * display the Featured Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_SPECIALS_PRODUCTS') { ?>
<?php
/**
 * display the Special Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_NEW_PRODUCTS') { ?>
<?php
/**
 * display the New Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_UPCOMING') { ?>
<?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?>
<?php
  $show_display_category->MoveNext();
} // !EOF
?>
</div>

Can somebody take a look and tell me if I'm on the right track? And if so, where should I put the snippets?

Thanks,
Mike

[Feznizzle]

No worries, Diva, I figured that was the case. I was just kinda hoping somebody else out in the community might offer a thought.

BTW, try as I might, I could not model the readme correctly to get the trick done! You wouldn't happen to have a page somewhere that you could copy/paste the source so I could see how you do it on a ZC?

[DivaVocals]

No worries, Diva, I figured that was the case. I was just kinda hoping somebody else out in the community might offer a thought.

BTW, try as I might, I could not model the readme correctly to get the trick done! You wouldn't happen to have a page somewhere that you could copy/paste the source so I could see how you do it on a ZC?

This isn't really a Zen Cart thing.. it's TRULY an HTML thing.. the source code in the TPP readme would give you an HTML example to use..

http://clientlaserdiscvault(dot)over...dot)com/page-2

All I did was copy and paste EVERYTHING between the TPP readme body tags..

and here:

http://clientlaserdiscvault(dot)over...-test-category


Not a Zen Cart thing.. it's an HTML thing..

[dee_d_lady]

Hi,

I''m trying to figure out one cosmetic issue with TPP. I'm using TPP to show some Custom Tabs and Cross sell Tab towards the end of Product Info Page but the product description text (I don't use product description to be shown in tabs) is showing right above the tabs instead of the position that is set in tpl_product_info_display.php (below product title). I didn't find relevant code to make the text appear in the position set in my tpl_product_info_display.php. Guess it could be done in jscript_tpp.js? Can some give advice?

Thank you!

[Feznizzle]

Diva, I'm a total idiot. I heard you, I just didn't HEAR you! Sorry! Not sure how I screwed it up, but after looking at your link, I got a good model working:

<div id="slidetabsmenu" style="display: block;">
  <ul>
    <li> <a class="current" onclick="expandcontent('sc1', this)" href="javascript:void(0)"><span>Dis Da Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc2', this)" href="javascript:void(0)"><span>Dis Da Uda Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc3', this)" href="javascript:void(0)"><span>Dis Dat and Da Uda</span></a> </li>
  </ul>
</div>
<br style="clear: both;">
<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1" style="display: block;">
  <p> Mikey puts some html in here!!!!</p>
</div>
<!--end sc1-->

<div class="tabcontent" id="sc2" style="display: none;">
  <p> Put some more content here, bro!</p>
</div><!--end sc2-->
<div class="tabcontent" id="sc3" style="display: none;">
  <p> Mikey puts some awesomeness right here!!!!</p>

</div>
<!--end sc3-->

You are absolutely right, no need to mod anything. That bit of code will call TPP anywhere!

Once again, thank you for the awesomeness and sorry for being so thick!

[mcpisik]

Diva, I'm a total idiot. I heard you, I just didn't HEAR you! Sorry! Not sure how I screwed it up, but after looking at your link, I got a good model working:

<div id="slidetabsmenu" style="display: block;">
  <ul>
    <li> <a class="current" onclick="expandcontent('sc1', this)" href="javascript:void(0)"><span>Dis Da Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc2', this)" href="javascript:void(0)"><span>Dis Da Uda Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc3', this)" href="javascript:void(0)"><span>Dis Dat and Da Uda</span></a> </li>
  </ul>
</div>
<br style="clear: both;">
<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1" style="display: block;">
  <p> Mikey puts some html in here!!!!</p>
</div>
<!--end sc1-->

<div class="tabcontent" id="sc2" style="display: none;">
  <p> Put some more content here, bro!</p>
</div><!--end sc2-->
<div class="tabcontent" id="sc3" style="display: none;">
  <p> Mikey puts some awesomeness right here!!!!</p>

</div>
<!--end sc3-->

You are absolutely right, no need to mod anything. That bit of code will call TPP anywhere!

Once again, thank you for the awesomeness and sorry for being so thick!

Hi Fez, I'm wanting to have tpp on my Document - Product pages.
Could you explain how I would use what you've discovered and in which file?
Thanks!

[DivaVocals]

Hi Fez, I'm wanting to have tpp on my Document - Product pages.
Could you explain how I would use what you've discovered and in which file?
Thanks!

The short answer is you WOULDN'T use the "solution" Fez and I spoke of on a PRODUCT page..

The "solution" we spoke of is how to add tabs to pages other than the PRODUCT pages.. That "solution" is an HTML solution and it is outlined in the posts where fez and I discuss how to do this.. If you look at the source code for the TPP readme you can use it as a guide for adding tabs to other pages.. If you use this to add tabs to other product type pages, you will have to add the HTML to EACH product description every time you create a new product..

To avoid this and to add tabs to other PRODUCT pages, you need to apply the code in the "tpl_product_info_display.php" file to other product type files.. A merge of the file for the corresponding product type file should help you see where the code should go..

[mcpisik]

Awesome thank you for that. Yes, I think I grabbed at the hope someone was doing what I was after to save me the confusion.
But I'll take your points and get started merging. Cheers!

[DivaVocals]

Awesome thank you for that. Yes, I think I grabbed at the hope someone was doing what I was after to save me the confusion.
But I'll take your points and get started merging. Cheers!

Yep.. and this is also covered in the readme..