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.

Posted in Code Tips
  • Berry

    I've been looking for years to add a "NEW" image on top of a product image and this looks a bit like that. But I can't even get this tip working in my v2.2? The code in my version of "new_products.php" is totally different.

    -So, how can I implement this in 2.2
    -Can I change it to display a "new" image for a set time on a new product?

    Thank you very much for your help.

  • Gary

    Similar idea, have a play with the code.

    If not, I can make a new post, but it would be a sponsored post (paid by you) including your URL for promotion.
    Email me if interested.

  • MatjazM

    Hi, Gery.

    I tried to implement your contribution, which works fine. But… Thumbnails in new products shows incorrectly. In case special offer, Instead of small images (100 x 80), it shows big image (640 x 480) or only part of it. I mean, the overlay shows correctly, only the background is the big image and does not show complete content. Where the code should be changed?

    I asume it should be changed in following row:

    $new_prods_content .= tep_image(DIR_WS_ICONS . 'specials_overlay-slovensko.png', $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,
    'style="background:url(' . DIR_WS_IMAGES . $new_products['products_image'] . ')"');

    Thanks for your reply,

    Matjaz

  • oscbooks

    It sounds to me like you have much bigger pictures for your thumbnails ?? Reduce them down to the size that is posted in the admin area and it should work well.

  • Xpajun

    Hi Gary,

    I installed this – thought it looked cool ;) – but I
    have the same problem as MatjazM, the special image is the only one that
    is resized. Yes I enlarged it when I first got the problem and it
    reduces to the correct size but the item thumb stays at it's original
    size i.e. it does not reduce.

    If I remember correctly doesn't a
    stock version of 2.3 come without a thumbs maker and the thumbs are
    produced on the fly by the settings in admin>configuration>images
    ? It would seem that this gets upset by your contribution…

  • Gary

    "A transparent "special" image of the exact same dimensions as your "thumbnail images""

    If your thumbs are created at 200 by 200, make a special image at 200 by 200.

  • Gary

    If you set the thumbnail correctly, then you have also to upload a larger image.

  • Xpajun

    Nope – doesn't work then…

    My images are 600 by 400 they are reduced on the fly to 100 on the width for the thumbs. If I make the specials image 100 by 67 the main image stays at 600 by 400, if I enlarge the specials image to 600 by 400 it will get reduced to 100 by 67 but the main image remains at 600 by 400

  • Xpajun

    It would appear that this line:

    $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'] . ')"');

    changes the size of the special.png image but not the size of the products_image

  • Gary

    I don't know how to make it more clear :(
    You need to upload a thumb of the correct dimensions, to whatever is set in your admin area.

  • http://www.facebook.com/mattjt83 Matt Toste

    Maybe to avoid all these issues with image dimensions getting messed up you could just wrap the original image in a div with position relative and then also place the special img in that div with position absolute.

  • Gary

    Indeed so…


Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!