Add a Special Offer banner to product listings…

In this tutorial I am going to show you how to add a “special” banner into the product listing in the “new products for…” module. At the end of the tutorial it will look like this:

As you can see, any products on special offer will have a banner overlay on top of the product image.

What you will need before beginning the tutorial

A. A transparent “special” image of the exact same dimensions as your “thumbnail images”. You can use the image below if you wish;

B. The “new products for…” module located at /includes/modules/new_products.php

Let’s get started

1. Upload the “special” image into the icons directory. This is located at /images/icons/

2. Open up new_products.php

2a. Find the two lines of code that start $new_products_query = tep_db_query
Add s.specials_new_products_price, before the first “if” in BOTH those lines.

This calls the specials price for the product.

2b. Find the following code:

$new_prods_content .= '<td width="33%" align="center" valign="top"><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'])) . '</td>';

Change to:

$new_prods_content .= '<td width="33%" align="center" valign="top">';
$new_prods_content .= '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">';
$new_prods_content .= tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
$new_prods_content .= '</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'])) . '</td>';

Here we have seperated the one long line of code into 4 separate lines of code. This allows us to easier manipulate one of those lines of code!

3. Find the following line of code in the 4 lines of code you just split

$new_prods_content .= tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);

Change to:

if ($new_products['specials_new_products_price'] > 0) {
$new_prods_content .= tep_image(DIR_WS_ICONS . 'special.png', $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'style="background:url(' . DIR_WS_IMAGES . $new_products['products_image'] . ')"');
else {
$new_prods_content .= tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '');

Here we are setting up a logical choice based on the value of specials_new_products_price and saying; if the specials_price is greater than zero do “this” else do “that”. “That” is show the image normally, and “this” is show the newly made “special” image with the actual products image as a background.

Simple as 1-2-3.