Adding Overlaying Image to Sale Items in Special Category

[Bobber]

Does anyone know a simple and easy way to add an image to items that are on sale?

 

I really like the way it is done in the examples below:

 

Items Page: http://livedemo00.template-help.com/osc_46814/product_info.php/fairhills-chardonnay-fair-trade-wine-p-15

 

Items Category: http://livedemo00.template-help.com/osc_46814/index.php/rum-c-2?osCsid=forfr2m5jpkqeer63p82392gt2

 

Best Sellers Page: http://livedemo00.template-help.com/osc_46814/topsellers_products.php

 

Any help will be great appreciated!!

 

Thanks again as this is my first post :-)

[♥kymation]

See the link to Specials Image Overlay below.

 

Regards

Jim

[Bobber]

Thanks for the reply Jim!

 

I actually saw your addon and it is FOR SURE the best one currently out there...

 

Is there a way to modify the addon to look more like this (I will attach a pic)??

 

I really like how it is done in this example and it seems to work really well...

[Bobber]

The "sale" image is also on: the product's page, the category page... and other pages where the products image is display...

 

Is there also a way to have "out of stock" items have an image saying out of stock???

 

Thanks again :)

[Bobber]

Here is a link to the sale image used: http://livedemo00.template-help.com/osc_46814/images/sale.png

 

Below is the code and it looks like a person named Seaman coded the CSS:

 

.sale {background:url('../images/sale.png') 0 0 no-repeat transparent; width:68px; height:69px; position:absolute; top:10px; right:10px; z-index:1000; opacity:.8;}

/* ************************************************************************************* */

/* ************************************************************************************* */

.box_wrapper_title h1 {font-size:1em;}

del {font-size:1.3em;}

.productSpecialPrice {font-size:1.3em;}

h1 del {font-size:.75em;}

h1 .productSpecialPrice {font-size:1em;}

.name span {font-size:1em;}

.sub .name span {font-size:1em;}

.desc {font-size:.91em;}

/* ************************************************************************************* */

/* ************************************************************************************* */

/* code by Seaman */

[♥kymation]

You can use any image you want for the overlay. The one provided with the addon is just an example. Create a new image in GIMP, Photoshop, or any other image editor that allows you to make the background transparent. Just keep your overlay image the same size as your product images.

 

I don't recommend taking someone else's image without permission.

 

Do you mean an overlay for Out of Stock? That's certainly possible, but I'm not aware of an existing addon that does that. You could modify the code in the Specials Image Overlay addon to do that.

 

Regards

Jim

[Bobber]

Awesome!

 

Thanks again for the advise Jim :lol:

 

Do you have an example link or screen shot of your addon working in a live shop besides the standard download of oscommerce as it comes?

[♥joli1811]

Hi Bobby,

 

Funny enough somebody else just talking about out of stock image today

 

http://www.oscommerce.com/forums/topic/394787-products-with-0-stock-still-showing/

 

Regards

Joli

[Bobber]

Thanks for the idea Joli!

 

That is an interesting addon and I may use it as well, but I was thinking more of having the overlaying image say "Out of Stock"...

 

I do like the idea of not letting people add it to the cart... the only problem I see there is, in the past, when I have hidden something on the site if someone already has it in their cart they can still process an order for it :/

 

I guess I just set it so items where X <= 0 cannot be purchased...

 

I am definitely open to ideas here and greatly appreciate the help as it makes me think with your new ideas in mind :)

[khoking]

Do you have one for v2.2?

[♥kymation]

No, there is nothing like this for osC 2.2. You should consider upgrading to a modern version.

 

Regards

Jim

[♥Tsimi]

...but I was thinking more of having the overlaying image say "Out of Stock"...

 

maybe the following add-on is something to start with? i didn't try it though...

 

Auto Out Of Stock CSS Image Overlay for osCommerce X.X

 

http://addons.oscommerce.com/info/8909

[Bobber]

How would one go about making the image change on a mouseover?

 

It seems pretty straightforward...

 

Just wondering if anyone has ever done that before or if someone has an easy or simple way to get the job done.