Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Replacing Categories - Tabs Menu with Images

Replacing Categories - Tabs Menu with Images

Locked

Views: 3,469

Results 1 to 15 of 15
This thread is locked. New replies are disabled.
24 Jul 2007, 1:39 AM
#1
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Replacing Categories - Tabs Menu with Images

My goal for today is to replace the standard text links on the categories-tabs menu with image links. Merlin's code HERE isn't ideal, as I need the category names to appear properly. Later in the same thread, GJH posts a method to do it, but only with the main tpl_categories file. I need the same thing, but with the categories-tabs menu.

My current site is up at http://test.headsonic.com. Below the logo.gif is the navcattabs menu, where there are currently two links (my only two categories, Headphones and Microphones). In order to style these like what I want (see http://files.headsonic.com/files/1/finalwant.png for an example), I believe I need to hardwire the images into PHP, like in Glenn's solution.

However, the PHP for the categories-tabs menu (seen in includes/templates/YOUR_TEMPLATE/templates) is pretty much indecipherable to me:

 
<?php
include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));

?>

<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>

<div id="navCatTabsWrapper">

<div id="navCatTabs">

<ul>

<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>

  <li><?php echo $links_list[$i];?></li>

<?php } ?>

</ul>

</div>

</div>

<?php } ?>

The modules/categories_tabs.php is as such:

<?php


if (!defined('IS_ADMIN_FLAG')) {

  die('Illegal Access');

}

$order_by = " order by c.sort_order, cd.categories_name ";



$categories_tab_query = "select c.categories_id, cd.categories_name from " .

TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd

                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . (int)$_SESSION['languages_id'] . "' and c.categories_status='1'" .

$order_by;

$categories_tab = $db->Execute($categories_tab_query);



$links_list = array();

while (!$categories_tab->EOF) {



  // currently selected category

  if ((int)$cPath == $categories_tab->fields['categories_id']) {

    $new_style = 'category-top';

    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';

  } else {

    $new_style = 'category-top';

    $categories_tab_current = $categories_tab->fields['categories_name'];

  }



  // create link to top level category

  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';

  $categories_tab->MoveNext();

}



?>

Headsonic.com.au - Headphones and Microphones for Australians

24 Jul 2007, 2:19 AM
#2
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,652
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

While I applaud you for tying to use the CatTabs for your layout, I would suggest just using regular linked images if you are only going to have 2 categories.

Please do not PM for support issues: a private solution doesn't benefit the community.

Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

24 Jul 2007, 2:34 AM
#3
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Kim:

While I applaud you for tying to use the CatTabs for your layout, I would suggest just using regular linked images if you are only going to have 2 categories.
Fair enough! I'll see where that gets me this afternoon.

Cheers.

Headsonic.com.au - Headphones and Microphones for Australians

24 Jul 2007, 2:56 AM
#4
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Kim:

While I applaud you for tying to use the CatTabs for your layout, I would suggest just using regular linked images if you are only going to have 2 categories.

Unfortunately, in my instance just adding it manually may not work. You see, I want the index to look like this, with the Headphones category already open (they are by far my dominant seller). To achieve this, I've just turned on "Categories - Always Show on Main Page" in the Admin Layout Settings. I can't see how I could then manually add the category headings, when no text is displayed.

Secondly, CatTabs has a different stylesheet case built in if a category is selected. With that, I can put in my 'pink bracket' selector when a category is selected and open.

If there is a way to achieve this with a static page, I'm all ears!

Headsonic.com.au - Headphones and Microphones for Australians

24 Jul 2007, 9:24 PM
#5
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Do you want the headphones and microphones categories images to appear on every page or just the index page?

Either way, with only two categories it'd be a lot easier to hard-code it once. You could even check to see which category is currently selected and append it with the pink brackets.

Pretty simple, actually. If you'll just clarify for me which you are trying to do, I'll try to walk you through doing it.

BrandTim

24 Jul 2007, 9:53 PM
#6
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

brandtim:

Do you want the headphones and microphones categories images to appear on every page or just the index page?
Every page, please. What I'd like to achieve is for the open main category (either Headphones or Microphones) to be at 100% opacity with a pink bracket next to it, and for the category that is not active to have a 50% opacity image without the pink bracket, and for this to change to 100% opacity on hover.

Hopefully THIS image gives you more of a clue as to what I'm on about (ignore the darker specials box on the right side, I'll add that later).

Headsonic.com.au - Headphones and Microphones for Australians

25 Jul 2007, 5:08 PM
#7
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Ok - change your includes/templates/wogeordie/templates/tpl_modules_categories_tabs.php to this:

<div id="navCatTabsWrapper">
<div id="navCatTabs">

<?php if ((int)$cPath != 2) { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_100_perc.jpg" alt="headphones category" /> <span class="pink_braces">]]]</span></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_50_perc.jpg" alt="microphones category" onmouseover="this.src='microphones_100_perc.jpg'" onmouseout="this.src='microphones_50_perc.jpg' /></a>
  
<?php } else { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_50_perc.jpg" alt="headphones category" onmouseover="this.src='headphones_100_perc.jpg'" onmouseout="this.src='headphones_50_perc.jpg' /></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_100_perc.jpg" alt="microphones category" /> <span class="pink_braces">]]]</span></a>
  
<?php } ?>

</div>
</div>
<?php } ?>

Brief explanation:

The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category.

The onmouseover and onmouseout events switch the images between 50% and 100%.

Just be sure you get all of the image src files in this code correct to your image source files. You'll also need to style the images and the pink brackets.

BrandTim

26 Jul 2007, 3:47 AM
#8
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

brandtim:

The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category.

The onmouseover and onmouseout events switch the images between 50% and 100%.
:clap:Brilliant. Utterly brilliant. With a bit of fiddling, I got them working absolutely perfectly.

Thankyou so much, you've been a fantastic help. I'm one massive step closer to done now.

Really appreciated.

Results: http://test.headsonic.com

Headsonic.com.au - Headphones and Microphones for Australians

26 Jul 2007, 5:13 PM
#9
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Sweet. That looks really good. Glad I could help. :smile:

The more happy ZenCart site owners the better I always say.

BrandTim

23 Oct 2008, 10:42 AM
#11
mojodk avatar

mojodk

New Zenner

Join Date:
Jun 2008
Posts:
6
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

brandtim:

Ok - change your includes/templates/wogeordie/templates/tpl_modules_categories_tabs.php to this:

<div id="navCatTabsWrapper"> <div id="navCatTabs"> <?php if ((int)$cPath != 2) { ?>

<a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_100_perc.jpg" alt="headphones category" /> <span class="pink_braces">]]]</span></a>
<br class="clearBoth" />
<a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_50_perc.jpg" alt="microphones category" onmouseover="this.src='microphones_100_perc.jpg'" onmouseout="this.src='microphones_50_perc.jpg' /></a>

<?php } else { ?>

<a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_50_perc.jpg" alt="headphones category" onmouseover="this.src='headphones_100_perc.jpg'" onmouseout="this.src='headphones_50_perc.jpg' /></a>
<br class="clearBoth" />
<a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_100_perc.jpg" alt="microphones category" /> <span class="pink_braces">]]]</span></a>

<?php } ?> </div> </div> <?php } ?> ``` > > Brief explanation: > > The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category. > > The onmouseover and onmouseout events switch the images between 50% and 100%. > > > Just be sure you get all of the image src files in this code correct to your image source files. You'll also need to style the images and the pink brackets. > > BrandTim THIS IS A REALLY NICE FEATURE FOR ZEN. This is it.. this is the answer to my headache. As a newbie, Im still figuring how's this one is done correctly. I changed includes/templates/CUSTUM_TEMPLATE/templates/tpl_modules_categories_tabs.php to your script. I made all the pictures in the scripts & placed them in includes/templates/CUSTUM_TEMPLATE/images/

the images don´t show up & everything is centered looking like a mess.
It would be nice with guidance so even a real newbie like me would understand it

THANX ALOT

24 Oct 2008, 4:56 AM
#12
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

I can try to help ... but I really need a link to your website so I can see exactly what's happening.

BrandTim

7 May 2009, 1:02 PM
#13
teva avatar

teva

Zen Follower

Join Date:
Sep 2004
Posts:
101
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

I find this to be a great feature, but i can't get it to work in 1.3.8 version. After applying changes the page only loads header. Any idea what to do.

tnx

8 May 2009, 4:42 PM
#14
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

teva,

I sounds like you have whitespace before or after a <?php ?> tag, but I can't tell without a link.

BrandTim

11 May 2009, 1:01 PM
#15
teva avatar

teva

Zen Follower

Join Date:
Sep 2004
Posts:
101
Plugin Contributions:
0

Re: Replacing Categories - Tabs Menu with Images

Yep...it was a typo. Tnx..works fine now