Jump to content



Photo
- - - - -

Specials Image Overlay

sale banner

  • Please log in to reply
51 replies to this topic

#1   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 09 December 2012 - 21:02

This addon adds a sale banner to the image of every product having a current special. The banner is an image overlay, so it can be any shape or size (smaller than the product image of course).

The code recognizes the store language in use and selects a sale banner in that language. This allows the freedom to design a banner suited to each language in the store.

There's a screenshot available if you want to see what it can look like. Of course you can use a different image as the overlay.

The Addon is available here: http://addons.oscommerce.com/info/8636 That's missing the Extras in order to get under the size limit for addons on this site. If you want the full package, it's available from my server.

Regards
Jim

Edited by kymation, 09 December 2012 - 21:09.

See my profile for a list of my addons and ways to get support.


#2   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 09 December 2012 - 21:21

I've uploaded the full package to the Addons section of this site. That should have triggered a wait fro an Admin to approve it, but it looks like it was accepted immediately. So now you can get the full package with all of the Extras, just in case you wanted them.

I've tested this, but I can't check everything. If you find something that doesn't work, or an image on a page that I missed, please post the bugs here so I can fix them.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#3   gradefive.eu

gradefive.eu
  • Members
  • 10 posts
  • Real Name:Ameli Lehner

Posted 15 January 2013 - 00:05

Dear Jim,

I double checked and did the whole setup twice. I cannot find my error.

The overlay picture is obviously there, but only the replacement text, not the real photo.
I am very sure I didn't dismiss any code to insert or change. I turned dynamic resizing to false.

My version is 2.3.1
here is the url: http://gradefive.eu/index.html


I included a sreenshot.
Any suggestions?

Thank you and all the best,
Ameli

#4   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 15 January 2013 - 00:23

Do you have any products on sale? Please link to a category containing a sale product and tell me which one.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#5   gradefive.eu

gradefive.eu
  • Members
  • 10 posts
  • Real Name:Ameli Lehner

Posted 17 January 2013 - 10:15

Hi Jim,

on the right side you will find a product on sale, http://www.gradefive...php?language=en

Thanks for your support!

Edited by gradefive.eu, 17 January 2013 - 10:16.


#6   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 17 January 2013 - 18:26

Firebug says that the image overlay is images/specials_overlayenglish.png. That is correct, but the image does not exist on your server.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#7   gradefive.eu

gradefive.eu
  • Members
  • 10 posts
  • Real Name:Ameli Lehner

Posted 18 January 2013 - 09:54

I fixed it, it actually is quite a bit weird.
I never made any changes to the content of the changes. I did upload the image, everything was there. But the required name of the image changed from specials_overlayenglish.png to specials_overlaygerman.png

No idea why, but however - you gave me the hint thank you!

Also your png did not work, it covered all of my image. I made a png myself and now it works totally fine.

I love your work, I'm slowly understanding all the background of oscommerce and it starts to get fun playing hide and seek ;-)

#8   PupStar

PupStar
  • Members
  • 902 posts
  • Real Name:Mark
  • Gender:Male

Posted 21 January 2013 - 20:16

Hi Jim,

I am trying to merge your code with mine but as I am using the oscThumb contribution I have run into a little difficulty and hope you can help.

I have created my image the correct size and I have the following code

stylesheet.css
.specials_box {
position: relative;
display: block;
width: 170px;
}
img.specials {
position: absolute;
top: 0;
right: 0;
}

product_listing.php
		 case 'PRODUCT_LIST_IMAGE':
		 $specials_overlay = false;
		 if( tep_not_null( $listing['specials_new_products_price'] ) ) $specials_overlay = true;
		 $lc_text .= ' <tr>' . "\r\n"
					 . ' <td class="main" align="center"><div class="ui-widget-content infoBoxContents shadow"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, (isset($_GET['manufacturers_id']) ? 'manufacturers_id=' . $_GET['manufacturers_id'] : ($cPath ? 'cPath=' . $cPath : '')) . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', $specials_overlay) . '</a></div></td>' . "\r\n"
					 . ' </tr>' . "\r\n";
		 break;

html_output.php
////
// START oscThumb
// If you want to call the original function, you can call tep_image_original or call this one with $original=true.
function tep_image($src, $alt = '', $width = '', $height = '', $params = '', $original = false, $thumbnail_type = 0, $overlay = false) {
global $oscthumb;
// We are asked to return the result of the original function
if ($original || $oscthumb->enabled==false) {
return tep_image_original ($src, $alt, $width, $height, $params, $overlay = false);
}
// Add the span for the overlay if set
if( $overlay == true ) $image .= '<span class="specials_box">';
$oscthumb->set_type ($src, $width, $height, $thumbnail_type); // Detect the type of image we are currently processing
if ($oscthumb->set_size ($src, $width, $height)==false) return false; // Choose the displayed width and height of the image, and if display something
$image = $oscthumb->process($src); // Returns the beginning of the image tag
// Add remaining image parameters if they exist
if ($width) {
	 $image .= ' w="' . tep_output_string($width) . '"';
}
if ($height) {
	 $image .= ' h="' . tep_output_string($height) . '"';
}
if (tep_not_null($params)) $image .= ' ' . $params;
	 $image .= ' border="0" alt="' . tep_output_string($alt) . '"';
if (tep_not_null($alt)) {
	 $image .= ' title="' . tep_output_string($alt) . '"';
}
$image .= '>';
// Add the overlay image and close the span if overlay is set
if( $overlay == true ) $image .= tep_image( DIR_WS_IMAGES . 'specials_overlay' . $language . '.png', IMAGE_SALE, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class="specials"') . '</span>';
return $image;
}

any help you can offer would be appreciated.

Thanks

Mark

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )


#9   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 22 January 2013 - 21:42

Your thumbnailer has added two new parameters to tep_image, so you have to fill those every time you call the function. Your product_listing.php would then look something like this:


case 'PRODUCT_LIST_IMAGE':
$specials_overlay = false;
if( tep_not_null( $listing['specials_new_products_price'] ) ) $specials_overlay = true;
$lc_text .= ' <tr>' . "\r\n"
. ' <td class="main" align="center"><div class="ui-widget-content infoBoxContents shadow"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, (isset($_GET['manufacturers_id']) ? 'manufacturers_id=' . $_GET['manufacturers_id'] : ($cPath ? 'cPath=' . $cPath : '')) . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', false, 0, $specials_overlay) . '</a></div></td>' . "\r\n"
. ' </tr>' . "\r\n";
break;


The parameters that I have added are the defaults, so check the installation notes for the thumbnailer to see what they want you to use in each case. You will have to do this in every file where either addon is used.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#10   PupStar

PupStar
  • Members
  • 902 posts
  • Real Name:Mark
  • Gender:Male

Posted 22 January 2013 - 22:18

cheers Jim, got it all sorted now.

to cut a long story short oscThumb changes the tep_image function but also retains the original function.

I added your code to the original function and called the image in product_listing using the original function and hey presto!

Am I correct in thinking that if I wanted to add the overlay to other modules lets say the new products module then I would need to replicate the tep_image function and make the required changes i.e. overlay image name???

Thanks again

Mark

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )


#11   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 22 January 2013 - 22:34

There should only be one image function. I don't know why oscThumb retained the original and a modified version. You can only use one for each image, so the function of each one will be exclusive. That means that you cannot use the thumbnailer on any image where you use the sale overlay. That doesn't sound like a good solution.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#12   PupStar

PupStar
  • Members
  • 902 posts
  • Real Name:Mark
  • Gender:Male

Posted 22 January 2013 - 22:44

There should only be one image function. I don't know why oscThumb retained the original and a modified version. You can only use one for each image, so the function of each one will be exclusive. That means that you cannot use the thumbnailer on any image where you use the sale overlay. That doesn't sound like a good solution.

Regards
Jim


I agree and I am removing the oscthumb. I never really liked it anyway lol

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )


#13   claireb85

claireb85
  • Members
  • 32 posts
  • Real Name:Claire
  • Gender:Female

Posted 28 January 2013 - 12:04

hello,

I am trying to add sale banner to sale products on my site but it seems to appear below the image instead of on top on it. i am not sure where I am going wrong, below is my code for product_listing, it is slightly different to the code you have used.

case 'PRODUCT_LIST_IMAGE':
$specials_overlay = false;
if( tep_not_null( $listing['specials_new_products_price'] ) ) $specials_overlay = true;
if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
$p_pic = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', $specials_overlay ) . '</a>';
} else {
$p_pic = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', $specials_overlay ) . '</a>';
}
break;


I would be greatful for any help with this.

Thanks
Claire

#14   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 28 January 2013 - 19:40

That sounds like a CSS error. Check that all of the changes to stylesheet.css have been made.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#15   claireb85

claireb85
  • Members
  • 32 posts
  • Real Name:Claire
  • Gender:Female

Posted 29 January 2013 - 10:50

Jim

Yeah it was a CSS problem, thanks for your help, it now works perfectly.

Claire

#16   jeu4328

jeu4328
  • Members
  • 248 posts
  • Real Name:Jewell
  • Gender:Female

Posted 20 October 2013 - 06:20

Hello:

I am in the process of installing your 'Specials Image Overlay' module to my eStore.

All files have been installed, but when I go into Admin to Install the Module there are two errors at the top of the screen. They are:

Warning: include(/home4/jeu4328/public_html/shop/includes/languages/english/modules/boxes/bm_featured.php) [function.include]: failed to open stream: No such file or directory in /home4/jeu4328/public_html/shop/admin/modules.php on line 129

Warning: include() [
function.include]: Failed opening '/home4/jeu4328/public_html/shop/includes/languages/english/modules/boxes/bm_featured.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home4/jeu4328/public_html/shop/admin/modules.php on line 129


*** I noticed that includes/languages/english/modules/boxes/bm_featured.php is referenced. I did not see instruction anywhere indicating that I needed to add this file to includes/languages/english/modules/boxes file. I only saw that I was to install it in includes/modules/boxes file.

BEFORE installing the Module the store looks fine, although those warnings are there within the admin program.
AFTER installing the Module, I get the same messages in the admin program, but I get the following error messages when I try to open my website:

Warning: include(includes/languages/english/modules/boxes/bm_featured.php) [function.include]: failed to open stream: No such file or directory in /home4/jeu4328/public_html/shop/includes/classes/osc_template.phpon line 86

Warning: include(includes/languages/english/modules/boxes/bm_featured.php) [
function.include]: failed to open stream: No such file or directory in /home4/jeu4328/public_html/shop/includes/classes/osc_template.phpon line 86

Warning: include() [
function.include]: Failed opening 'includes/languages/english/modules/boxes/bm_featured.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in/home4/jeu4328/public_html/shop/includes/classes/osc_template.php on line 86
1327 - Undeclared variable: MAX_DISPLAY_FEATURED_PRODUCTS

select p.products_id, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, pd.products_name from products p left join products_description pd on p.products_id = pd.products_id and pd.language_id = '1' left join specials s on p.products_id = s.products_id left join TABLE_FEATURED f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by rand() DESC limit MAX_DISPLAY_FEATURED_PRODUCTS

[TEP STOP]


I have double checked to make sure all of the new files were installed/updated in each location, but I do not see any mention of updates that needed to be made to the admin/modules.php or includes/classes/osc_template.php files which are mentioned in the above error messages.

*** If I remove the file includes/languages/english/modules/boxes/bm_featured.php and move it to includes/languages/english/modules/boxes/bm_featured.php the error message goes away in the Admin program ... but the New Module to Install also goes away.

Any suggestions?

Thank you,
Jewell

#17   jeu4328

jeu4328
  • Members
  • 248 posts
  • Real Name:Jewell
  • Gender:Female

Posted 20 October 2013 - 08:34

PLEASE DISREGARD MY LAST REQUEST ... :-
I've decided to remove the changes that I've made because it has caused issues with my .
It is something that I will work on in the future, but for now I'm thinking I've done enough 'tweaking' to my store.

Thank you anyway,
Jewell
Have a great Sunday!

#18   dinera

dinera
  • Members
  • 22 posts
  • Real Name:Dinesh Eranga
  • Gender:Male

Posted 08 November 2013 - 08:30

Is there any possible way to add small icon to product image for preview product status like ,

free Delivery product ,
Next day delivery product
X-mas Special Product ect ..

as assigning status via admin edit product


Thanks

#19   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 08 November 2013 - 17:38

This Addon uses an overlay that is set by the Specials status in the database. You can change the overlay to say whatever you want, so you can have different specials for different times of the year. There is another overlay Addon that can be used for shipping-related specials.

You would have to modify the code to have more than one type of special at a time.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#20   Tsimi

Tsimi
  • Members
  • 1,754 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 19 January 2014 - 14:17

hi jim,

i installed this add-on and i'm facing a problem that i can't solve.

the sale products that have that overlay are not correctly aligned anymore. (please see attached image below.)
in the admin configuration SMALL_IMAGE_WIDTH and ....HEIGHT are blank. i tried it with 100 and 80 but nothing changed.
what could be the cause of that?





Also tagged with one or more of these keywords: sale, banner