Jump to content


Corporate Sponsors


Latest News: (loading..)

* * * * * 1 votes

Modifying Sub Category Image & Text Links


89 replies to this topic

#1 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 13 July 2008, 17:15

This tip will show how to modify the sub category image and text links that appear on your catalog/index.php page when clicking on a category that has subcategories.

This will show how to

1. Change how many category links to list per row.
2. Show only image links.
3. Show only text links.
4. Remove both images and text links.

Change how many category links to list per row.

Go to Admin-->Configuration-->Maximum Values. Select Categories To List Per Row and change the number to what you need.

The rest of the change will be to one line of code. Find in catalog/index.php
	  echo '				<td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";

Show only image links

Change the above to
	  echo '				<td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) /*. '<br>' . $categories['categories_name']*/ . '</a></td>' . "\n";

Show only text links

Change the above to
	  echo '				<td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' /*. tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>'*/ . $categories['categories_name'] . '</a></td>' . "\n";

Remove both images and text links

Change the above to
	  //echo '				<td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";


Hope thats able to help someone.

Brian
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#2 dotpower

  • Community Member
  • 3 posts
  • Real Name:John

Posted 14 July 2008, 08:41

Wow thats great, i really needed this, thanks! :)


Greetz
------> dotpower

#3 cyberjorge

  • Community Member
  • 24 posts
  • Real Name:cyberjorge
  • Gender:Male

Posted 10 September 2008, 08:01

Thanks a lot for this!

This really helped me! :)

#4 WebDev22

  • Community Member
  • 429 posts
  • Real Name:Brett
  • Gender:Male

Posted 03 November 2008, 14:01

Thanks for the helpful post. Do you also know how to change the word "Categories", located at the top left of the page, to the actual text for the page? For example, on this page: http://sunvisiontanning.com/index.php?cPath=25, we'd like to remove the word "Categories" and replace it with "New Commercial Tanning Beds". We'd like this to be text wrapped in an H1 tag. We would also delete the image title that's located at the top right. Thanks!

#5 Insiyah

  • Community Member
  • 33 posts
  • Real Name:Insiyah Tinwala

Posted 03 November 2008, 18:51

View Postbrettg22, on Nov 3 2008, 08:01 AM, said:

Thanks for the helpful post. Do you also know how to change the word "Categories", located at the top left of the page, to the actual text for the page? For example, on this page: http://sunvisiontanning.com/index.php?cPath=25, we'd like to remove the word "Categories" and replace it with "New Commercial Tanning Beds". We'd like this to be text wrapped in an H1 tag. We would also delete the image title that's located at the top right. Thanks!

See this:

http://forums.oscommerce.com/index.php?showtopic=319756

#6 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 05 November 2008, 18:15

View Postbrettg22, on Nov 3 2008, 08:01 AM, said:

Thanks for the helpful post. Do you also know how to change the word "Categories", located at the top left of the page, to the actual text for the page? For example, on this page: http://sunvisiontanning.com/index.php?cPath=25, we'd like to remove the word "Categories" and replace it with "New Commercial Tanning Beds". We'd like this to be text wrapped in an H1 tag. We would also delete the image title that's located at the top right. Thanks!
To remove the image on the right side you can go to Admin-->Configuration-->Images. Set Image Required to flase.

Thare are also lines like this in all store front pages.
			<td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_default.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
The quickest way to change those is to turn those pics into transparent images. You cna find them in catalog/images. They are all called table_background_bla_bla. I think there might a contrib that has some already made.
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#7 talbot649

  • Community Member
  • 52 posts
  • Real Name:Andrew Talbot
  • Gender:Male

Posted 18 November 2008, 17:56

Hi there,

Does anyone know how to add more vertical space between the sub-categories on the index.php page?

I've looked in the stylesheet but couldn't spot anything.

Basically if you have say 9 sub-categories displayed 3 x 3 x 3, the side-to-side spacing is fine but the vertical spacing is very narrow so the images but up against the text above.

If anyone can help I'd be very grateful :)
hor-i-zon

#8 dukeofuke

  • Community Member
  • 9 posts
  • Real Name:Matthew Reynolds
  • Location:London, United Kingdom

Posted 18 November 2008, 22:03

Hello all,

Does anyone know if it is possible to add rollover images to sub-category icons? On our index page we have a red rollover on all our main category icons:
http://www.dukeofuke.co.uk/index.php

I would like to add the same rollover effect to all of our sub-category icons:
http://www.dukeofuke.co.uk/ukuleles-c-91.html

We have all of the individual rollover images, but no idea where to put them...? Can anybody help?

Actually we'd also like the sub-category pages to look just like the index page in layout. This would be a more long-term project involving new artwork, but if anyone has any suggestions on how this could be achieved please let us know.

I'd be extremely grateful for any advice anyone give.

Thanks,

Matthew

#9 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 19 November 2008, 00:18

View Posttalbot649, on Nov 18 2008, 11:56 AM, said:

Hi there,

Does anyone know how to add more vertical space between the sub-categories on the index.php page?

I've looked in the stylesheet but couldn't spot anything.

Basically if you have say 9 sub-categories displayed 3 x 3 x 3, the side-to-side spacing is fine but the vertical spacing is very narrow so the images but up against the text above.

If anyone can help I'd be very grateful :)
In catalog/index.php find this section
			<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
			  <tr>
<?php
	if (isset($cPath) && strpos('_', $cPath)) {
// check to see if there are deeper categories within the current category
In the table tag change cellspacing to something like 10. That should be enough for you. This will also add spacing to the right and left sides.
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#10 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 19 November 2008, 00:20

View Postdukeofuke, on Nov 18 2008, 04:03 PM, said:

Hello all,

Does anyone know if it is possible to add rollover images to sub-category icons? On our index page we have a red rollover on all our main category icons:
http://www.dukeofuke.co.uk/index.php

I would like to add the same rollover effect to all of our sub-category icons:
http://www.dukeofuke.co.uk/ukuleles-c-91.html

We have all of the individual rollover images, but no idea where to put them...? Can anybody help?

Actually we'd also like the sub-category pages to look just like the index page in layout. This would be a more long-term project involving new artwork, but if anyone has any suggestions on how this could be achieved please let us know.

I'd be extremely grateful for any advice anyone give.

Thanks,

Matthew
Try searching the addons for thes. I'm not exactly sure how this would be done.
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#11 swestgrande

  • Community Member
  • 8 posts
  • Real Name:Stephen Tyler
  • Gender:Male
  • Location:Dallas, Texas

Posted 18 January 2009, 00:23

How about this question?

Is there a way to modify the image and text links on the catalog/index.php page so instead of opening the product info page they open the products url?

Your help is greatly appreciated!

#12 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 18 January 2009, 02:17

View Postswestgrande, on Jan 17 2009, 06:23 PM, said:

How about this question?

Is there a way to modify the image and text links on the catalog/index.php page so instead of opening the product info page they open the products url?

Your help is greatly appreciated!
Not sure I follow you. Are you talking about the links in the new products and products listing modules?

Where are you trying to send them, offsite or somewhere on your site?
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#13 swestgrande

  • Community Member
  • 8 posts
  • Real Name:Stephen Tyler
  • Gender:Male
  • Location:Dallas, Texas

Posted 18 January 2009, 19:19

Here is a specific example of what I would like some help with...

On the shopping_cart.php page: the default action when a customer clicks on either the thumbnail image or text description is to be taken to the product_info.php page for that specific item. I would like to change the action so that when a customer clicks on the thumbnail image or text description they are instead taken to the product url. The product url page resides onsite. I am basically bypassing the product info page altogether.

Thanks for any help Brian!

Edited by swestgrande, 18 January 2009, 19:20.


#14 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 18 January 2009, 20:42

Well this is a bit out of the scope of this thread, but we can give it a shot. Not sure if this is what will work for you or not.
[b]Make sure to backup your files first.[b]

The way this will work is to put in the url you want when you create your product in the admin. There is field right after the image field for this url. When you enter the url DO NOT use the http:// just the address. We will then use the redirect from osc.

In catalog/includes/classes/shopping_cart.php find this function
	function get_products() {
Inside that function find
		$products_query = tep_db_query("select p.products_id, pd.products_name, p.products_model, p.products_image, p.products_price, p.products_weight, p.products_tax_class_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$products_id . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
Change to
		$products_query = tep_db_query("select p.products_id, pd.products_name, pd.products_url, p.products_model, p.products_image, p.products_price, p.products_weight, p.products_tax_class_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$products_id . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
A few lines down find
									'name' => $products['products_name'],
Just below that add
									'url' => $products['products_url'],
In catalog/shopping_cart.php find
	  $products_name = '<table border="0" cellspacing="2" cellpadding="2">' .
					   '  <tr>' .
					   '	<td class="productListing-data" align="center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '">' . tep_image(DIR_WS_IMAGES . $products[$i]['image'], $products[$i]['name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></td>' .
					   '	<td class="productListing-data" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '"><b>' . $products[$i]['name'] . '</b></a>';
Change to
	  $products_name = '<table border="0" cellspacing="2" cellpadding="2">' .
					   '  <tr>' .
					   '	<td class="productListing-data" align="center"><a href="' . tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products[$i]['url']), 'NONSSL', true, false) . '">' . tep_image(DIR_WS_IMAGES . $products[$i]['image'], $products[$i]['name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></td>' .
					   '	<td class="productListing-data" valign="top"><a href="' . tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products[$i]['url']), 'NONSSL', true, false) . '"><b>' . $products[$i]['name'] . '</b></a>';
If you do not enter a url for the product the link will not work. It will just go back to your home page. If this doesn't work for then I'm not sure what else to tell you.

Brian
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#15 swestgrande

  • Community Member
  • 8 posts
  • Real Name:Stephen Tyler
  • Gender:Male
  • Location:Dallas, Texas

Posted 18 January 2009, 21:26

Thank you very much Brian. Worked beautifully!

#16 swestgrande

  • Community Member
  • 8 posts
  • Real Name:Stephen Tyler
  • Gender:Male
  • Location:Dallas, Texas

Posted 18 January 2009, 22:04

A related question...

When a customer clicks on a product category the resulting query is displayed in the index.php - so when you click one of these images or text descriptions you are the taken to the product_info.php page for that specific item. Same as before, I would like to change the action so that when a customer clicks on the thumbnail image or text description they are instead taken to the product url.

Thanks Brian...

#17 bktrain

  • Community Member
  • 2,093 posts
  • Real Name:Brian
  • Gender:Male
  • Location:On the brink of insanity

Posted 19 January 2009, 02:42

View Postswestgrande, on Jan 18 2009, 04:04 PM, said:

A related question...

When a customer clicks on a product category the resulting query is displayed in the index.php - so when you click one of these images or text descriptions you are the taken to the product_info.php page for that specific item. Same as before, I would like to change the action so that when a customer clicks on the thumbnail image or text description they are instead taken to the product url.

Thanks Brian...
Honestly I don't know why you want to do something like this. This is going to involve far more than you think. You will have to make changes in
new_products.php
specials.php
reviews pages
account history pages
boxes in left and right columns
modules in includes/modules

I'm sure I missed some, but if this is what you want I'll give one example and you can run with it. I havn't tried this so I don't know if it works.

Vasicly it's like what you already did. In the query strings you will need to add
pd.products_url
If the TABLE_PRODUCTS_DESCRIPTION is not in the query, you will need to add that too. Then you just have to change the links like above.

Let's use catalog/includes/modules/new_products.php as an example. There are 2 query strings called
$new_products_query
In both of them right after
pd.products_name,
add
pd.products_url,
Further down you will see a line like this. This is what displays the products.
										   'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));
You will need to change the links for the image and name. The above line would now look something like this.
										   'text' => '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($new_products['products_url']), 'NONSSL', true, false) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($new_products['products_url']), 'NONSSL', true, false) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));
Like I say, not sure if it works so make sure to backup your files before you do anything.
Remember to backup database, files and pictures.

I reject your reality and substitute my own.
My mind not only wanders, it sometimes leaves completely.
The problem with the gene pool is that there is no lifeguard.
Everyone’s entitled to my opinion.


Links
Security
SSL Help
Basics for design
Basics for design V2.3+
How Do I ...?

#18 swestgrande

  • Community Member
  • 8 posts
  • Real Name:Stephen Tyler
  • Gender:Male
  • Location:Dallas, Texas

Posted 19 January 2009, 16:10

Thanks again for your help Brian. I will let you know once I give your mod a try if it works as anticipated.

I am using my existing static website pages (with buy it now buttons linked to osC) instead of the osC index and product_info pages. osC is really just handling the checkout process. I can PM you the links if you have any deisre to see what the heck I'm up to. I have been selling my product online for over 12 years very successfully so I don't want to change the successful portion, just enhance it!

#19 tny681

  • Community Member
  • 14 posts
  • Real Name:Tony Cook

Posted 20 January 2009, 00:15

Brian-

You certainly know what you are doing. This thread is a lifesaver. I have managed to follow the instructions from the top of this thread to remove the categories image as well as the text. The problem for me is that the box that once displayed the images and text remains (leaving an empty box with the header "categories"). How do you remove the entired categories box so the images, text link and box they once displayed in are removed? I can provide an image of my dilemma if I am being unclear.

Thank you in advance for your time!

#20 airbrushmaster

  • Community Member
  • 326 posts
  • Real Name:Andy
  • Gender:Male
  • Location:Cornwall England

Posted 20 January 2009, 00:46

hi can anyone tell me how to change the colour on the sub category text or make it a bit bigger?