Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Modifying Sub Category Image & Text Links


Guest

Recommended Posts

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

Link to comment
Share on other sites

  • Replies 94
  • Created
  • Last Reply
  • 1 month later...
  • 1 month later...

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!

Link to comment
Share on other sites

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://www.oscommerce.com/forums/index.php?showtopic=319756

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Make sure to backup your files first.

 

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

If you're talking about what I think you are, that is seperate table. Can you provide a link or a pic showing exactly what you need removed?

Link to comment
Share on other sites

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

In catalog/indes.php find this

	  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";

You will notice that this is using the "smallText" class. You could change that to main which would use your main font settings. Or you could create a new class in the stylesheet.css and use that.

Link to comment
Share on other sites

In catalog/indes.php find this

	  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";

You will notice that this is using the "smallText" class. You could change that to main which would use your main font settings. Or you could create a new class in the stylesheet.css and use that.

 

 

hi i have changed it to maintext but wehre do i change the text colour ? you said main font settings are these in stylesheet and which part please

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...