Tabbed Home Page Modules

[mbfergie]

This is a support thread for the add on that was recently posted. This will create a tab system for the home page modules of the store.

[Website Rob]

Would be a good thing to also include the module link.

If module recently submitted to Zen Cart downloads but not yet available, need to mention that or wait till the module has been approved.

[gjh42]

I think the best thing is to create the support thread with a note that it is not yet available, and include a link to the thread in the mod submission so it is easy to find.

Then when the mod is activated, you can link from the support thread to its page in Free Addons.

[autoace]

Does anyone know how to get this module working? It is a very simple mod, yet I can't get it to show at all. I'm not sure if its because it has a simple js script inserted right at the top of tpl_index_default.php

I've done a view source on ff, and the code doesn't seem to called at all, *BUT* if I view the file via FZ, the code is there.

Any ideas?

http://www. a u t o motiveace.com/upgrade/

un/pw: auto1

[RFree190]

I'm using this module as part of your complete template, Abbington_mega.
Great module, great template!

Anyhow, is there a way to make the active tab look more "active"? Say with a different color tab or something?

Thanks!
Rick

[anklebiterwoodworks]

I have installed the Abbington_Mega template and have posted this question in the template's support thread, but the author told me to check here for a solution. I am wanting to rearrange the order of the tabs so that the Waht's New tab shows up first. In the .PHP file, I have tried to rearrange the order of those blocks of code as well as modify the navOne, navTwo, navThree, etc, but to no avail. I am not sure if it matters, but I am using zencart v1.5.0. The tabs all display just fine as well as displaying their associated content, just cannot seem to get the New tab to be the first/default tab open.

Here is a screen cap of what shows up:



Here is my code for the file:

<?php
/**
* Page Template
*
* Main index page<br />
* Displays greetings, welcome text (define-page content), and various centerboxes depending on switch settings in Admin<br />
* Centerboxes are called as necessary
*
* @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_default.php 3464 2006-04-19 00:07:26Z ajeh $
*/
?>

<script type="text/javascript">
$(document).ready(function() {
$('a.moduleBox').click(function() { // show selected module(s)
// variables
var popID = $(this).attr('rel');
var popNAV = $(this).attr('class');
// clear out menu styles and apply active
$('a.moduleBox').css('background', '');
$(this).css('background', '');
// hide all wrappers and display the one selected
$('.centerBoxWrapper').hide();
// check if all or single selection
if (popID != 'viewAll') {
$('#' + popID).show();
} else {
$('.centerBoxWrapper').show();
}
});
});
</script>

<div class="centerColumn" id="indexDefault">
<h1 id="indexDefaultHeading"><?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 this section
<?php if (TEXT_MAIN) { ?>
<div id="" class="content"><?php echo TEXT_MAIN; ?></div>
<?php } ?>-->

<!-- deprecated - to use uncomment this section
<?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) { ?>
<?php
/**
* get the Define Main Page Text
*/
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
<?php } ?>


<div id="moduleMenu-wrapper">
<?php
// bof module navigation
$show_display_nav = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
if ($this_is_home_page) {
echo '';
}
echo '<div id="moduleMenu">';
while (!$show_display_nav->EOF) {
switch ($show_display_nav->fields['configuration_key']) {
case 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS':
echo '<span class="navOne moduleSpan"><a href="javascript:void(0)" rel="whatsNew" class="navOne moduleBox">New</a></span>';
break;
case 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS':
echo '<span class="navTwo moduleSpan"><a href="javascript:void(0)" rel="featuredProducts" class="navTwo moduleBox">Featured</a></span>';
break;
case 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS':
echo '<span class="navThree moduleSpan"><a href="javascript:void(0)" rel="specialsDefault" class="navThree moduleBox">Specials</a></span>';
break;
}
$show_display_nav->MoveNext();
}
//echo '<span id="navFour" class="moduleSpan"><a href="javascript:void(0)" id="navFour" rel="viewAll" class="moduleBox">All</a></span>';
echo '<br class="clearBoth" />';
echo '</div>';
// eof module navigation

$show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
while (!$show_display_category->EOF) {
?>
<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_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_MAIN_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_MAIN_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_MAIN_UPCOMING') { ?>
<?php
/**
* display the Upcoming Products Center Box
*/
?>
<?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?>


<?php
$show_display_category->MoveNext();
} // !EOF
?>
</div>
</div>




Any assistence would be greatly appreciated--even if it is to just tell me it is how V 1.5.0 does things now.

Thanks!

[rbarbour]

Anne,

Any suggestions on removing the tabs if no products exist for that tab?

[GAM]

Thanks all. At least I know why the module wasn't working.

I'll look into the code changes and see what I can do.

Cheers
GAM

[rbarbour]

Thanks all. At least I know why the module wasn't working.

I'll look into the code changes and see what I can do.

Cheers
GAM

I have this complete to work on all center boxes

It is set to open all by default, I have custom coded it to include a carousel though.

I will try to clean the code to include just the changes you need and post it here.

You can see that it is operational here:
www[.]zcadditions[.]com/responsive_templates/

[GAM]

LOL, I have just successfully modified tpl_index_categories.php to work and was about to paste the code here... and I see your post. ;)

Bah, pasting for reference anyway:

<?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 Modified by GAM to include Tabbed Home Page module (Picaflor Azul) with Categories 2013-08-09 $$
 */
?>

<script type="text/javascript">
  $(document).ready(function() {
    $('a.moduleBox').click(function() { // show selected module(s)
    // variables
      var popID = $(this).attr('rel');
      var popNAV = $(this).attr('class');
    // hide all wrappers and display the one selected
      $('.centerBoxWrapper').hide();
      // check if all or single selection
      if (popID != 'viewAll') {
        $('#' + popID).fadeIn();
      } else {
       $('.centerBoxWrapper').fadeIn();
      }
    });
  });
</script>

<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 this section
<?php if (TEXT_MAIN) { ?>
<div id="" class="content"><?php echo TEXT_MAIN; ?></div>
<?php } ?>-->

<!-- deprecated - to use uncomment this section
<?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 -->
</div>

<div id="moduleMenu-wrapper">
<?php
// bof module navigation
$show_display_nav = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
if ($this_is_home_page) {
  echo '';
}
echo '<div id="moduleMenu">';
while (!$show_display_nav->EOF) {
  switch ($show_display_nav->fields['configuration_key']) {
    case 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS':
      echo '<span class="navOne moduleSpan"><a href="javascript:void(0)" rel="featuredProducts" class="navOne moduleBox">' . MODULE_TABS_FEATURED . '</a></span>';
    break;
    case 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS':
      echo '<span class="navThree moduleSpan"><a href="javascript:void(0)" rel="specialsDefault" class="navThree moduleBox">' . MODULE_TABS_SPECIALS . '</a></span>';
    break;
    case 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS':
      echo '<span class="navTwo moduleSpan"><a href="javascript:void(0)" rel="whatsNew" class="navTwo moduleBox">' . MODULE_TABS_NEW . '</a></span>';
    break;
  }
  $show_display_nav->MoveNext();
}
echo '<span class="navFour moduleSpan"><a href="javascript:void(0)" rel="viewAll" class="navFour moduleBox">' . MODULE_TABS_ALL . '</a></span>';
echo '<br class="clearBoth" />';
echo '</div>';
// eof module navigation
?>

<?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
/**
 * display the Upcoming Products Center Box
 */
?>
<?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?>
<?php
  $show_display_category->MoveNext();
} // !EOF
?>

To fix my headings I needed to include 'clear:left' in addition to adding my custom css to:
#indexHomeBody .centerBoxHeading {} in stylesheet_module_tabs.css

and include same css for .centerBoxHeading {} in stylesheet_module_tabs.css too

GAM