将Zen-Cart首页产品以TabControl的形式显示

首先来对Zen-Cart首页的代码进行分析，涉及到的页面如下：

-includes/templates/YOUR_TEMP/templats/tpl_index_default.php

-includes/modules/YOUR_TEMP/featured_products.php

-includes/modules/YOUR_TEMP/new_products.php

-includes/modules/YOUR_TEMP/specials_index.php

-includes/templates/YOUR_TEMP/templates/tpl_modules_featured_products.php

-includes/templates/YOUR_TEMP/templates/tpl_modules_whats_new.php

-includes/templates/YOUR_TEMP/templates/tpl_modules_specials_default.php

-includes/templates/YOUR_TEMP/common/tpl_columnar_display.php

modules目录下的是处理数据的，而templates目录下的则是显示用的模板文件。

首先在-includes/templates/YOUR_TEMP/templats/tpl_index_default.php查找while (!$show_display_category->EOF)，这个while循环是用来控制要在首页显示的模块及数据的。在while循环内有3个if条件判断，分别对应了Featured Products、New Products、Specials Products这三个模块。而每个if里面又只require了一个页面，以Featured Products模块举例如下：

require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php');

require了tpl_modules_featured_products.php这个文件，打开tpl_modules_featured_products.php可以发现如下代码：

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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_modules_featured_products.php 2935 2006-02-01 11:12:40Z birdbrain $
 */
  $zc_show_featured = false;
  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_FEATURED_PRODUCTS_MODULE));
?>

<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
<!-- bof: featured products  -->
<?php if ($zc_show_featured == true) { ?>
<div class="centerBoxWrapper" id="featuredProducts" style="background:#0000ff;">
<?php
/**
 * require the list_box_content template to display the product
 */
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
?>
</div>
<?php } ?>
<!-- eof: featured products  -->

解释：include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_FEATURED_PRODUCTS_MODULE));这行代码可以获取Featured Products模块的标题信息，然后在下面的if($title){echo $title;}直接输出这个标题。

所以可将如下代码抽离，放到tpl_index_default.php文件内。

$zc_show_featured = false;
  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_FEATURED_PRODUCTS_MODULE));
?>

<?php
  if ($title) {
  ?>
<?php //echo $title; ?>
<?php
 }
 ?>

其他两个模块也是同理！通过抽离标题，可以实现标题和下面显示产品的模块分离。通过JQuery配合CSS即可轻易实现TabControl显示效果。

PS：tpl_index_default.php页面代码修改如下：

<!-- 手工添加的DIV                  -->

<div id="indexshow_jhq">
<div style="border:1px solid #555; height:60px;">
<?php
  $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_FEATURED_PRODUCTS') { ?>
<?php
/**
 * display the Featured Products Center Box
 */
?>
<?php 
$zc_show_featured = false;
include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_FEATURED_PRODUCTS_MODULE));
if($title){
    echo $title;
}  
//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 
$zc_show_specials = false;
include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_SPECIALS_INDEX));
if($title){
    echo $title;
}
//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_NEW_PRODUCTS') { ?>
<?php
/**
 * display the New Products Center Box
 */
?>
<?php 
$zc_show_new_products = false;
include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_NEW_PRODUCTS));
if($title){
    echo $title;
}
//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_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>
<?php
  $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_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_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_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                  -->