How To: Create An All Top-Level Cats W/Images Panel

[MegaFemaTron2]

I wanted a category listing just like the one found in the middle of the front page at http://www.bhphotovideo.com. It's awesome and should be a basic feature for this expensive cart. But it isn't. Sooooo after much pain and suffering (*smile*) I figured out a way to get a "best-I-can-do" version. My version lets you create a panel that can be added to the center of your home page that displays all top-level categories with images. Say whaaaaaat? Yep.

Making the panel:
I used the sub categories feature found in categoryheading.php to get this thing going after many failed attempts at other methods.

In /includes/display/ create a file called: HomeCategories.php and inside of it paste this:

Code: Select all

<?php
	CLASS ISC_HOMECATEGORIES_PANEL extends PANEL
	{
		public function SetPanelSettings()
		{
			$GLOBALS['ISC_CLASS_CATEGORY'] = GetClass('ISC_CATEGORY');

			if ($GLOBALS['EnableSEOUrls'] == 1) {
				$baseLink = sprintf("%s/categories", $GLOBALS['ShopPath']);
			} else {
				$baseLink = sprintf("%s/categories.php?category=", $GLOBALS['ShopPath']);
			}


			// Output Top-level Categories
			$GLOBALS['SNIPPETS']['HomeCategories'] = "";
			$query = sprintf("select * from [|PREFIX|]categories where catparentid='0' and catvisible=1 order by catsort asc, catname asc", $GLOBALS['ISC_CLASS_DB']->Quote($GLOBALS['CatId']));
			$result = $GLOBALS['ISC_CLASS_DB']->Query($query);

			if($GLOBALS['ISC_CLASS_DB']->CountResult($result) > 0) {

				// Check to see if we need to add in place holder images or if we are just displaying text
				if (!($rtn = $GLOBALS['ISC_CLASS_DB']->Fetch($GLOBALS['ISC_CLASS_DB']->Query("SELECT COUNT(*) AS Total FROM [|PREFIX|]categories WHERE catimagefile != ''"))) || !$rtn['Total']) {
					$useImages = false;
				} else {
					$useImages = true;
					if (GetConfig('CategoryDefaultImage') !== '') {
						$defaultImage = GetConfig('ShopPath') . '/' . GetConfig('CategoryDefaultImage');
					} else {
						$defaultImage = $GLOBALS['IMG_PATH'].'/CategoryDefault.gif';
					}
				}

				$i = 0;
				while ($row = $GLOBALS['ISC_CLASS_DB']->Fetch($result)) {
					$i++;
					if (!CustomerGroupHasAccessToCategory($row['categoryid'])) {
						continue;
					}

					$GLOBALS['HomeCatName'] = isc_html_escape($row['catname']);
					$GLOBALS['HomeCatLink'] = CatLink($row['categoryid'], $row['catname']);
					if ($useImages) {
						if ($row['catimagefile'] !== '') {
							$GLOBALS['CatImage'] = GetConfig('ShopPath') . '/' . GetConfig('ImageDirectory') . '/' . $row['catimagefile'];
						} else {
							$GLOBALS['CatImage'] = $defaultImage;
						}

						$GLOBALS['ISC_CLASS_TEMPLATE']->assign('width', getConfig('CategoryImageWidth'));
						$GLOBALS['ISC_CLASS_TEMPLATE']->assign('height', getConfig('CategoryImageHeight') + 50);

						$GLOBALS['SNIPPETS']['HomeCategories'] .= $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("CatItemImage");

						if ($i % GetConfig('CategoryPerRow') == 0) {
							$GLOBALS['SNIPPETS']['HomeCategories'] .= '<li class="RowDivider" style="float:none; clear:both;"></li>';
						}

					} else {
						$GLOBALS['SNIPPETS']['HomeCategories'] .= $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("CatItem");
					}
				}

				if ($useImages) {
					if ($i % GetConfig('CategoryPerRow') > 0) {
						$GLOBALS['SNIPPETS']['HomeCategories'] .= '<li style="float: none; clear: both;"/>';
					}
					$output = $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("HomeCategoriesGrid");
				} else {
					$output = $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("HomeCategories");
				}

				$output = $GLOBALS['ISC_CLASS_TEMPLATE']->ParseSnippets($output, $GLOBALS['SNIPPETS']);
				$GLOBALS['SNIPPETS']['HomeCategories'] = $output;
			}


		}
	}

And in /templates/yourtemplatename/Panels/ create a new file called: HomeCategories.html and paste this in it:

Code: Select all

		<div class="Block Moveable Panel" id="CategoryHeading">
					<div class="BlockContent">
			
						%%SNIPPET_HomeCategories%%
					</div>
				</div>

In /templates/yourtemplatename/Snippets/ you are going to be creating 4 files. Create a file called: CatItem.html and paste this in it:

Code: Select all

<li><a href="%%GLOBAL_HomeCatLink%%">%%GLOBAL_HomeCatName%%</a></li>

Then create a file called: CatItemImage.html and paste this in it:

Code: Select all

<li style="width: %%GLOBAL_width%%px; height: %%GLOBAL_height%%px;">
	<a href="%%GLOBAL_HomeCatLink%%" style="text-decoration: none;"><img src="%%GLOBAL_CatImage%%" border="0" /></a><br /><a href="%%GLOBAL_HomeCatLink%%">%%GLOBAL_HomeCatName%%</a>
</li>

Then create a file called: HomeCategoriesGrid.html and paste this in it:

Code: Select all

<div class="SubCategoryListGrid">
	<ul>
		%%SNIPPET_HomeCategories%%
	</ul>
</div>

Then create a file called: HomeCategories.html and paste this in it:

Code: Select all

<div class="SubCategoryList">
	<ul>
		%%SNIPPET_HomeCategories%%
	</ul>
</div>

Then use this code where you want the panel to show up:

Code: Select all

 %%Panel.HomeCategories%%

Now you will probably have a link list of all of your top level categories wherever you put this code. The next step below is to help you add images to this panel for each category. When you do, the text links will still be there as well. I'm thinking of removing those.

Tricking the script to get the images:
This part was quite infuriating. If only sucker punches could be sent via mail. Our dear sweet friends who created ISC thought it would be nice to hide the image upload box for top level categories when you create a new top level cat. It magically appears when the new cat you are creating is a subcategory. I burned my eyes out trying to figure out how to get the image upload box to show up when you are creating a top level cat but I couldn't figure it out and I gave up. BUT what you can do is remove the code that forcefully removes the top-level category images (it does this when ever you create or edit a new category). Once you remove that bit of code, you have to create or edit a category and make it a subcategory so you can get the upload image box. Once you upload the image and save the category, you then have to move it so it's a top level category. With the code to delete top level cat images gone, it won't delete the images and you will now have a top level category with an image for your lovely new top-level category panel.

In admin/includes/classes/class.category.php locate the following code and delete it.

Code: Select all

				// Also forcefully delete the image if it is a root category
				if ($catData['category'] == "0") {
					$this->DelCategoryImage($this->categoryAPI->catimagefile);
					$catImage = '';
				}

Also find and delete this in the same file:

Code: Select all

		public function RemoveRootImages()
		{
			$result = $GLOBALS['ISC_CLASS_DB']->Query("SELECT * FROM [|PREFIX|]categories WHERE catparentid='0' AND catimagefile != ''");

			while ($row = $GLOBALS['ISC_CLASS_DB']->Fetch($result)) {
				$this->DelCategoryImage($row['categoryid']);
				$GLOBALS['ISC_CLASS_DB']->UpdateQuery('categories', array('catimagefile' => ''), "categoryid='" . (int)$row['categoryid'] . "'");
			}
		}

Also in admin/includes/class.remote.php you can also delete this:

Code: Select all

			// Also make sure that all the root categories do NOT have any images assoiated with them
			$GLOBALS['ISC_CLASS_ADMIN_CATEGORY'] = GetClass('ISC_ADMIN_CATEGORY');
			$GLOBALS['ISC_CLASS_ADMIN_CATEGORY']->RemoveRootImages();

You're on your own from here and you'll have to style your new panel and make tweaks however you like. Cheers! Sharing is caring!

[Brandeline]

The mod looks pretty darn good! Thanks for putting in all the work to get it this far.

I just wanted to share one more thing on this:
The code that unhides and hides the image upload box from us seems to be residing in /admin/scripts/categories.js

The function name is handleRootCategory(), and removing the hiding of the box would just involve deleting or modifying two lines. Then you probably would not have to go through the process of making it as a subcategory, and moving it up.

[MegaFemaTron2]

The mod looks pretty darn good! Thanks for putting in all the work to get it this far.

I just wanted to share one more thing on this:
The code that unhides and hides the image upload box from us seems to be residing in /admin/scripts/categories.js

The function name is handleRootCategory(), and removing the hiding of the box would just involve deleting or modifying two lines. Then you probably would not have to go through the process of making it as a subcategory, and moving it up.

Thanks Brandeline. No problem about the efforts. I was determined. And of course what happens in the end? I end up not using it. Hahahahaha Well I am using the mod just not with images. I have one of those huge sliding banners on my front page and my design sense just wouldn't let me add 20+ category images below it. But I have them as a sweet styled list now though.

Oh, I saw that function in categories.js. Removing it doesn't reveal the image upload field. I think also there is something like 'ShowYesUseImageRow' or something like that which determines if that box is shown.

I have tons of categories with sub cats and I haven't found an accordion menu yet that doesn't disable the top level cats. So that's my next quest.

[Brandeline]

I found one or two more things in the /admin/includes/classes/class.category.php file that need changing to give you your fileupload box out of the gate:

In that file in the function CreateCategory

Find this:

Code: Select all

$GLOBALS['DisableFileUpload'] = 'disabled="disabled"';

And change to:

Code: Select all

$GLOBALS['DisableFileUpload'] = '';

Replace this:

Code: Select all

$this->template->assign('ShowYesUseImageRow', 'none');

With This:

Code: Select all

$this->template->assign('ShowYesUseImageRow', 'block');

The categories.js script will still need to be changed too as it's hiding and unhiding the whole section of the template that contains the fileupload box, as well as disabling the box when it's hidden.

[MegaFemaTron2]

I found one or two more things in the /admin/includes/classes/class.category.php file that need changing to give you your fileupload box out of the gate:

The categories.js script will still need to be changed too as it's hiding and unhiding the whole section of the template that contains the fileupload box, as well as disabling the box when it's hidden.

Have you tested this? The reason I ask is because I did this when I was trying to get the box to show and what ended up happening is if you create a new category, the upload box wasn't there but when you go to edit the new top level cat, the box was there but the layout was messed up so I put everything back the way it was.

There is actually javascript somewhere (I can't remember which file) that does the show/hide based on "YesUseImageRow". I do remember it's not in a .js file where you'd expect it. I didn't touch it though.

UPDATE: Well I tested it again and it still doesn't add the upload box. I changed the handlerootcategories function in categories.js (the hide to show and match the line below), and I changed what you posted above in 2 places in class.category.php and when you go to create a new category, the image upload box still isn't there. Hmmmm I wish I could remember where that show/hide was for "YesUseImageRow". If I find it, I'll post where it is.

Thanks Brandeline. It would be cool to get that box on a top level cat.


UPDATE: Found it. the code is in admin/templates/category.form.tpl

Code: Select all

<script type="text/javascript">
	$.extend(lang, {
		CancelMessage		: "{{ CancelMessage|safe }}",
		NoCategoryName		: "{% jslang 'NoCategoryName' %}",
		NoParentCategory	: "{% jslang 'NoParentCategory' %}",
		NoCatSortOrder		: "{% jslang 'NoCatSortOrder' %}",
		ChooseValidImage	: "{% jslang 'ChooseValidImage' %}",
		CollapseCategory	: "{% jslang 'CollapseCategory' %}",
		ExpandCategory		: "{% jslang 'ExpandCategory' %}",
		CategorySelectModalIntro			: "{% jslang 'CategoryMappingModalIntro' %}",
		CategorySelectModalTitle			: "{% jslang 'CategoryMappingModalTitle' %}",
		CategorySelectLeafCategorySelected	: "{% jslang 'CategoryMappingLeafCategorySelected' %}",
		CategorySelectChooseLeafCategory	: "{% jslang 'CategoryMappingChooseLeafCategory' %}",
		ShoppingComparisonCategoryMappings	: "{% jslang 'ShoppingComparisonCategoryMappings' %}",
		ShoppingComparisonCategoryMappingsDesc : "{% jslang 'ShoppingComparisonCategoryMappingsDesc' %}"
	});

	CategoryForm.skipOptimizerConfirmMsg = {{SkipOptimizerConfirmMsg|default('false')|safe}};
	CategoryForm.currentTab = '{{ CurrentTab|safe }}';

	CategoryForm.shoppingComparisonModules = {};

	{% for module in ShoppingComparisonModules %}
		CategoryForm.shoppingComparisonModules["{{ module.getId|js }}"] = {
			name: "{{ module.getName|js }}"
		};
	{% endfor %}
	$(document).ready(function() {
		$('#catimagefile').live('change', function() {
			if ($(this).val()) {
				$("#YesUseImageRow").show();
				$("#YesUseImage").attr('checked', true);
				$("#YesUseImage").next().text($(this).val());
			}
			$("#PreviewCatImage").hide();
		});
	});
</script>

[Brandeline]

No, I was just starting to work on implementing things from what you had already posted so I hadn't gotten to the point of testing yet when I had to move on to some other tasks. Is that the last piece then in the category.form.tpl?

[MegaFemaTron2]

No, I was just starting to work on implementing things from what you had already posted so I hadn't gotten to the point of testing yet when I had to move on to some other tasks. Is that the last piece then in the category.form.tpl?

I believe so. In the end, I couldn't make sense of any of it. It seemed like the box should have been there with the changes we were thinking about but it doesn't appear to be that simple. Go figure.

[MegaFemaTron2]

For this mod you can also limit the number of categories shown by just adding "LIMIT 0, 8" or whatever number limit you like (second number) to the first SQL query. Like so:

Code: Select all

         // Output Top-level Categories
         $GLOBALS['SNIPPETS']['HomeCategories'] = "";
         $query = sprintf("select * from [|PREFIX|]categories where catparentid='0' and catvisible=1 order by catsort asc, catname asc LIMIT 0,8", $GLOBALS['ISC_CLASS_DB']->Quote($GLOBALS['CatId']));

I have 20+ top level cats so I needed to limit the ones shown in this panel to 8. I'm working on adding a "Shop in All Categories" link to it so they can go to all the cats.