Tabbed Home Page Modules

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.

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

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

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.

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

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

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!

I'd like to know how to do this to but I would like just the featured products to show, I've been trying to do this for days :frusty:

Had the same problem. Try this:
In
yourTemplate/css/stylesheet_module_tabs.css:
add
#specialsDefault, #whatsNew, #featuredProducts {display: block;}
Change the order to suit. I like my specials to be first cab off the rank.

The stylesheet cannot affect the display order of the modules. Changing the order of the selectors in the rule will do nothing. You would need to edit the template file to output them in the desired order.

Apologies for the trip up the garden path. it seemed to work but obviously not.

This is not to affect the sort order of the modules but to set the tab displayed by default when the page is opened.
I need specials first and this will make that happen in ff,chrome, ie and safari,
at least on my site (mydollyandmedotcomdotau).

change this in stylesheet_module_tabs.css

`````````````#featuredProducts {
````````````` display:block;
`````````````}

to whichever of the three you want displayed by default
#featuredProducts #specialsDefault #whatsNew

Hello ;-) I just submitted a major update to this module:

11/22/2012-----Version 2.0

• Added new html readme file

• Updated jQuery version used by the module to 1.8.2

• Added neutral tabs styles to includes/templates/YOUR_TEMPLATE/css/stylesheet_module_tabs.css file

• Added jQuery fade in effect when selecting new tab

• Fixed XHTML Validation Errors

• Made pacakge multi language friendly by adding constants to incluldes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php and definitions to
  includes/languages/english/extra_definitions/YOUR_TEMPLATE/module_tabs.php

See a live demo here:

Tabbed Home Page Modules Live Demo

I also added instructions in the readme for the common question, "How do I change which tab shows by default?" as well as common customization instructions.

Thanks,

Anne

Hi,

When I open my homepage, the tabs are there, but the products don't show up unless I click on the tab.
Is this how it's supposed to be? If not, then how can I fix this?

Here's my website: https://www.perfumefad.com/

Thanks

nesum18:

Hi,

When I open my homepage, the tabs are there, but the products don't show up unless I click on the tab.
Is this how it's supposed to be? If not, then how can I fix this?

Here's my website: https://www.perfumefad.com/

Thanks

No, this is not correct. I would try re-installing the module, or changing which tab shows by default. There are instructions for this in the readme.html file.

Thanks,

Anne

I'm having the same problem. Downloaded the Yorkshire free template and it also shows just the tab. You can only see the products if you click on the tab. I have posted on the support of your site but have not gotten a reply. Any help will be appreciated. Thanks

Decostyle:

I'm having the same problem. Downloaded the Yorkshire free template and it also shows just the tab. You can only see the products if you click on the tab. I have posted on the support of your site but have not gotten a reply. Any help will be appreciated. Thanks

Try changing the tab which shows by default in the stylesheet_module_tabs.css file:

#featuredProducts {display:block;}

Just change #featuredProducts to #whatsNew or #specialsDefault

Thanks,

Anne

Hi Anne,

Thanks for your help. Yes that certainly did the trick! I understand now that since the default display block on css was featured products and we didn't have any featured product, it was not showing anything!

Great template! Thanks again!

Decostyle:

Hi Anne,

Thanks for your help. Yes that certainly did the trick! I understand now that since the default display block on css was featured products and we didn't have any featured product, it was not showing anything!

Great template! Thanks again!

I am happy that you got it all working ;-)

Thanks,

Anne

great :D it worked.

I have a another website and I installed the "Alysa Rounded' template and this one came with the tabbed home page module.
How can I remove it?

nesum18:

great :D it worked.

I have a another website and I installed the "Alysa Rounded' template and this one came with the tabbed home page module.
How can I remove it?

If you look at the readme.html file included with the module you will see a list of the module files. You can remove these from your template installation.

Thanks,

Anne

Hi,
There was a question asked earlier in the thread but it didn't seem to get answered.

What would i have to change in the CSS to get the active tab color to highlight so customers know which tab they are currently viewing? If i put #moduleMenu a:hover {background-color:#2685bf} it changes the color when you hover over it, but i have tried #moduleMenu a:selected and a:active and it doesn't change the color of the selected tab?

Thanks