Category Pics instead of text

mizzlewillz · #1 05-28-2004, 10:31 AM

Hey everyone,

I was wondering if anyone had any thoughts or ideas on how to set this up. Instead of displaying the category text, I was thinking about displaying a graphic instead. I guess there are a couple of ways of going about this, I was thinking of creating another column in the xcart_icons table, and inserting the gif for each category that way, then pulling the gif from the database through the smarty tags.

Does anyone have any other ideas about this? Does anyone have this implemented in their x-cart configuration?

-Mike

Emerson · #2 05-28-2004, 11:23 AM

Hey Mike,
Have you looked at the fancy categories from x-cart?

mizzlewillz · #3 05-28-2004, 11:23 AM

Here is what I did to add a category icon instead of using the text for categories.

I created another field in xcart_categories table using phpmyadmin. I called it: category_image Type=VARCAR (255) I set it to NULL.

Then I just edited the table through phpMyAdmin and for each main category I added: yourwebsite.com/store/files/Fulfillment staff/product_images/WhateverYouWant.jpg (This is where I store my images for X-Cart).

Then in categories.tpl Between the {section name=cat_num loop=$categories} and {/section} I added this line

Code:

{$categories[cat_num].category_image}

I used category_image because that is the name of the field in my database.

I know there are probably other ways of doing this, and there are probably posts on this, I didn't even check

Hopefully someone might find this useful, I imagine you can use this for the subcategories too, just modify the loop for subcategories.
PLEASE if there are any errors or comments, POST IT- I just started using X-cart about 2 months ago or something so I am not an expert by any means.

Mike

mizzlewillz · #4 05-28-2004, 11:28 AM

No I did not actually, I didn't even think of that. I was just looking for a quick solution and this is the only one I could think of

There's another solution: fancy categories

The reason I didn't use fancy categories is because I have my subcategories displaying the whole time someone is browsing in their parent category. From what I saw with the x-cart default setup, the subcategories disappear when you click on one of them, I didn't like that so I had some mods done to keep the subcategories visible until the customer switches main categories.

-Mike

donavichi · #5 06-25-2004, 06:16 AM

code posted below, which is what i used for doughtysonline.co.uk

rivermarinesupply · #6 06-26-2004, 10:22 AM

I love the way it works, and the way it looks. I just am concerned about how well it does with search engines. It would be great if you could post the code.

Eduardo.

donavichi · #7 06-28-2004, 12:36 AM

OK, the search engines should be fine as the categories list is text and not graphic although it looks like it.
If you include the categories in your keywords the search engines should pick up on them as well as the text on the rest of the pages and as the categories list is an embedded template, they will display the url of the whole page and not just the menu.

Hope that answers your question!

Code below, I have left out the images that I have used and put in their place captions to help you place your own images - to keep in line with look and feel of your site... Just change the YOURIMAGE.GIF to whatever image you want to use...

Replace customer/categories.tpl with this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CategoriesMenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="160" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>[img]/skin1/images/YOUR_IMAGE.GIF[/img]</td>
  </tr>
</table>
{literal}
<style type="text/css">
.menutitle{
	font-weight:bold;
	background-color:#eeeeee;
                color:#000000;
	border:1px solid #000000;
	width:160px;
	cursor:pointer;
	margin-bottom: 0px;
	padding:3px;
	margin-left: 0px;
	border-bottom:0px;
}

.menu{
	font-weight:bold;
	background-color:#333333;
	color:#000000;
	border:1px solid #000000;
	width:160px;
	cursor:pointer;
	margin-bottom: 0px;
	padding:3px;
	margin-left: 0px;
	border-bottom:0px;
}

.menubottom{
	font-weight:bold;
	background-color:#999999;
                color:#000000;
	border:1px solid #000000;
	width:160px;
	cursor:pointer;
	margin-bottom: 1px;
	padding:3px;
	margin-left: 0px;
	margin-bottom: 1px;
}

.sub{
	margin-bottom: 0px;
	margin-left: 1px;
	border:1px solid #cccccc;
	background-color:#FFFFFF;
	color:#6699ff;
	width:158px;
	padding:3px;
	border-bottom:0px;	
                margin-left: 1px;
}

.menutitle:hover {
	background-color: #FFFFFF;
	color:#6699ff;
	display: block;
	width: 150px;
	padding: 4px 0px;
	margin: 1px;
	TEXT-DECORATION: none;
}
</style>

<script type="text/javascript">

if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.sub{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="sub")
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>
{/literal}

{* Keep all menus within masterdiv *} 
<div id="masterdiv"> 

{* loop over root category, nested loop of entire category data to match all root cats *}
{section name=cat_num loop=$categories}
<div class="menutitle" onclick="SwitchMenu('{$categories[cat_num].categoryid}')">{$categories[cat_num].category_name}</div>
<span class="sub" id="{$categories[cat_num].categoryid}">
{section name=subcat_num loop=$categories_data}
{if $categories_data[subcat_num].root_category_name == $categories[cat_num].category && $categories_data[subcat_num].category_name != $categories[cat_num].category_name}	
<li type="square">{$categories_data[subcat_num].category_name}

{/if}
{/section}
</span>
{/section}

{* bottom line *}
<div class="menubottom"></div>

<table width="160" border="0" cellspacing="0" cellpadding="0" valign="top">
    <td>[img]/skin1/images/YOUR_IMAGE.GIF[/img]</td>
</table>
</div>
</body>
</html>

and then create a file in xcart/include called categories.php and paste in this code:

Code:

<?
/*****************************************************************************\
+-----------------------------------------------------------------------------+
| X-Cart                                                                      |
| Copyright (c) 2001-2003 Ruslan R. Fazliev <rrf@rrf.ru>                      |
| All rights reserved.                                                        |
+-----------------------------------------------------------------------------+
| PLEASE READ  THE FULL TEXT OF SOFTWARE LICENSE AGREEMENT IN THE "COPYRIGHT" |
| FILE PROVIDED WITH THIS DISTRIBUTION. THE AGREEMENT TEXT IS ALSO AVAILABLE  |
| AT THE FOLLOWING URL: http://www.x-cart.com/license.php                     |
|                                                                             |
| THIS  AGREEMENT  EXPRESSES  THE  TERMS  AND CONDITIONS ON WHICH YOU MAY USE |
| THIS SOFTWARE   PROGRAM   AND  ASSOCIATED  DOCUMENTATION   THAT  RUSLAN  R. |
| FAZLIEV (hereinafter  referred to as "THE AUTHOR") IS FURNISHING  OR MAKING |
| AVAILABLE TO YOU WITH  THIS  AGREEMENT  (COLLECTIVELY,  THE  "SOFTWARE").   |
| PLEASE   REVIEW   THE  TERMS  AND   CONDITIONS  OF  THIS  LICENSE AGREEMENT |
| CAREFULLY   BEFORE   INSTALLING   OR  USING  THE  SOFTWARE.  BY INSTALLING, |
| COPYING   OR   OTHERWISE   USING   THE   SOFTWARE,  YOU  AND  YOUR  COMPANY |
| (COLLECTIVELY,  "YOU")  ARE  ACCEPTING  AND AGREEING  TO  THE TERMS OF THIS |
| LICENSE   AGREEMENT.   IF  YOU    ARE  NOT  WILLING   TO  BE  BOUND BY THIS |
| AGREEMENT, DO  NOT INSTALL OR USE THE SOFTWARE.  VARIOUS   COPYRIGHTS   AND |
| OTHER   INTELLECTUAL   PROPERTY   RIGHTS    PROTECT   THE   SOFTWARE.  THIS |
| AGREEMENT IS A LICENSE AGREEMENT THAT GIVES  YOU  LIMITED  RIGHTS   TO  USE |
| THE  SOFTWARE   AND  NOT  AN  AGREEMENT  FOR SALE OR FOR  TRANSFER OF TITLE.|
| THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT.      |
|                                                                             |
| The Initial Developer of the Original Code is Ruslan R. Fazliev             |
| Portions created by Ruslan R. Fazliev are Copyright (C) 2001-2003           |
| Ruslan R. Fazliev. All Rights Reserved.                                     |
+-----------------------------------------------------------------------------+
\*****************************************************************************/

#
# $Id: categories.php,v 1.46.2.3 2003/10/06 09:59:41 svowl Exp $
#

if ( !defined('XCART_SESSION_START') ) { header("Location: ../"); die("Access denied"); }

#
# For users some categories may be disabled
#

if ($current_area == "C") {
	$membership_condition = " AND ($sql_tbl[categories].membership='$user_account[membership]' OR $sql_tbl[categories].membership='') ";
} else {
	$membership_condition = "";
}

#$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));
$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 1) as root_category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));

#
# Put all categories into $all_categories array and find current_category
# by categoryid stored in $cat
#
if(!$categories_data) $categories_data = array();


foreach($categories_data as $k=>$category_data) {
	if ($current_area == "C") {
		$int_res = func_query_first("SELECT * FROM $sql_tbl[categories_lng] WHERE code='$store_language' AND categoryid='$category_data[categoryid]'");
		if ($int_res["category"])
			$categories_data[$k]["category_name"] = $category_data["category_name"] = $int_res["category"];
		if ($int_res["description"])
			$categories_data[$k]["description"] = $category_data["description"] = $int_res["description"];
		
	}
	if ($category_data["categoryid"]==$cat) {
		$current_category = $category_data;
	}
}

$all_categories = $categories_data;

#
# Put all root categories to $categories array
# Put all subcategories of current_category to $categories array
#

foreach($all_categories as $all_category) {

	$category=$all_category["category"];

	$cur_dir_len = strlen($current_category["category"]);

	if(!strstr($category,"/")) {
            $categories[]=$all_category;
			if(empty($current_category)) { 
				$subcategories[]=$all_category;
			}

	}

	if(substr($category,0,$cur_dir_len+1) == $current_category["category"]."/" and $category!=$current_category["category"]) 
		if(!strstr(substr($category,$cur_dir_len+1),"/")) {
			$all_category["category"]=ereg_replace("^.*/","",$all_category["category"]);
			$subcategories[]=$all_category;
		}

}


#
# Put  subcategory_count  to $subcategories array
#
if ($subcategories)
foreach($subcategories as $key =>$subcategory) {
	
	$subcategory["subcategory_count"]=0;

	foreach($all_categories as $all_category) {
		if ($all_category["categoryid"]==$subcategory["categoryid"]) {		
			$cur_dir_len = strlen($all_category["category"]);
			$current_subcategory=$all_category["category"]; 
		}		
	}
	
	foreach($all_categories as $all_category) {
		$category=$all_category["category"];
		if(substr($category,0,$cur_dir_len+1) == $current_subcategory."/" and $category!=$current_subcategory) 
			if(!strstr(substr($category,$cur_dir_len+1),"/")) 
				$subcategory["subcategory_count"]++;
	}
	$subcategories[$key]["subcategory_count"]=$subcategory["subcategory_count"];
}

#
# Generate category sequence, i.e.
# Books, Books/Poetry, Books/Poetry/Philosophy ...
#

$current_category_array = explode("/",$current_category["category"]);
$prev = $current_category_array[0];
list($key,$val)=each($current_category_array);

$new_array = array($val);

while(list($key,$val)=each($current_category_array)) {
	$new_array[] = $prev."/".$val;
	$prev = $prev."/".$val;
}
unset($current_category_array);

#
# Generate array for displaying categories sequence in location
#

$category_location=array();
reset($all_categories);

$my_cats = array ();

foreach($all_categories as $all_category) {

	$categoryid=$all_category["categoryid"];
	$category=$all_category["category"];

	$my_cats [$categoryid] = $category;
}

asort ($my_cats);

foreach ($my_cats as $categoryid => $category) {
	reset ($new_array);
	while(list($key,$val)=each($new_array)) {
		if ($val==$category) {
			foreach($categories_data as $category_data) {
				if ($category_data["categoryid"] == $categoryid)
					$val = $category_data["category_name"];
			}
			$category_location[]=array(ereg_replace(".*/","",$val),"home.php?cat=".$categoryid);
		}
	}
}

if ($current_area == "C" and !empty($current_category) and $config["Images"]["icons_location"] == "FS") {
	$current_category["image_path"] = array_pop(func_query_first("SELECT image_path FROM $sql_tbl[icons] WHERE categoryid='$cat'"));
	if (eregi("^(http|ftp)://", $current_category["image_path"])) {
	# image_path is an URL
		$current_category["icon_url"] = $current_category["image_path"];
	}
	elseif (eregi($xcart_dir, $current_category["image_path"])) {

	# image_path is an locally placed image 
		$current_category["icon_url"] = $http_location.ereg_replace($xcart_dir, "", $current_category["image_path"]);
	}
}

#
# Assign Smarty variables
#

$smarty->assign("categories_data",$categories_data);
$smarty->assign("allcategories",$all_categories);
$smarty->assign("categories",$categories);
$smarty->assign("subcategories",$subcategories);
$smarty->assign("current_category",$current_category);
$smarty->assign("cat",$cat);
#$smarty->assign("rootcat",$rootcat);
?>

Menu only supports 1 level of subcategory, that's the only drawback.

Love & Respect to to cartlab.com for the original code.

rivermarinesupply · #8 06-28-2004, 06:32 AM

freshkit,

Could there be something missing here? When I use it, it allows me to drop down, but no subcategories are there.

Eduardo.

donavichi · #9 06-28-2004, 06:47 AM

That's as it is on the site, my subcategories work ok.

Give me URL to your site and I'll have a look and see if I can identify what's wrong.

lyncca · #10 07-12-2004, 07:13 AM

Quote:

Originally Posted by rivermarinesupply

freshkit,

Could there be something missing here? When I use it, it allows me to drop down, but no subcategories are there.

Eduardo.

Do you have any subcategories currently? This works beautifully for me except that where I don't have subcategories, there is no way to get to the top menu products. Is there a fix for this?

You can see here what its doing: http://www.cripps-medical.com/customer/home.php?cat=246

If you click "Sport", there isn't any sub categories, and therefore no way to see the products for this category.