Latest News: (loading..)
kymation

Specials Image Overlay

52 posts in this topic

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
carlover likes this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Regards

Jim

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Regards

Jim

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

please ignore my post.

i think i got it. i just need to adjust the specials_box class in the stylesheet.css that should do it.

Edited by Tsimi

Share this post


Link to post
Share on other sites

Oops -- should have read the second comment. Please share your solution with the rest of us.

 

Regards

Jim

Edited by kymation

Share this post


Link to post
Share on other sites

hi jim

 

sorry, for my late reply. it was getting late yesterday and i didn't continue with the add-on anymore.

 

somehow i was getting some kind of padding or margin around the image, at least that is what i thought to be the reason.

by taking a look with firefox web developer tool i could see that i was wrong.

so the only thing left was the display: block; part inside the specials_box class. i changed it to display: inline-block;

now everything shows normal and the images are there where they should be. :thumbsup:

thank you.

Share this post


Link to post
Share on other sites

Thanks for the reply. I'll try adding that to the distribution. Hopefully it helps others with the same problem.

 

Regards

Jim

Share this post


Link to post
Share on other sites

hi Jim

 

just mentioned; i was adding the overlay images code to all necessary pages when i realized that inside the overlay add-on

=> extras folder => modular front page you have new_products.php, specials.php and featured.php files inside.

these files are not exactly same as the ones inside your latest modular front page v1.4 add-on.

example:

 

inside your latest modular front page add-on (fp_specials.php)

 

class fp_specials {
 var $code = 'fp_specials';
 var $group = 'front_page';
 var $title;
 var $description;
 var $sort_order;
 var $enabled = false;
function fp_specials() {

 

inside the images overlay add-on

 

class specials {
var $code = 'specials';
var $group = 'front_page';
var $title;
var $description;
var $sort_order;
var $enabled = false;
function specials() {

 

the fp_ part is missing inside the file names and the code i posted above.

that goes for all three files (new_products, specials and featured).

 

some people might just rename the file names and replace them, but that is not enough the code inside needs to be adjusted or

they should just copy & past the images overlay part that is clearly marked inside the code.

Edited by Tsimi

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now