[Solved] How do I add image overlay to products on sale.

[gofer_p]

I want to add an image overlay to products on sale. I want something similar to this site http://www.uk-cameras.cameratek.co.uk/. I also want the Image overlay on the product page. How do I achieve this?

[CameraTek]

Hi gofer_p
I got the code from the free temporary template which i used for a while (cheers smenster)

Go to your product.tpl page and find

<!-- product img-->

Just under neath it add the code below

{if $product->on_sale}<!--[if IE 6]><!--[if IE 6]>{/if}
{if $have_image}

Make sure you upload an image to use to your images directory.

But make sure you backup your product.tpl file first.

[gofer_p]

Tried that but got a blank page. Something seem to be missing. Do you mind telling me what free template you got it from. You can PM me the info.

[gofer_p]

Fixed the problem with the blank page.
I copied and pasted a statement twice.

I am not seeing an image just text of the image location. The image name is correct and in the image directory but it is not showing.

Thank you for the assistance so far.

[CameraTek]

Hi,
Here's the template I used http://www.prestashop.com/forums/viewthread/66386/themes/free_theme_temporary
Have you uploaded an image to your image directory?

[Pippo3000]

Fixed the problem with the blank page.
I copied and pasted a statement twice.

I am not seeing an image just text of the image location. The image name is correct and in the image directory but it is not showing.

Thank you for the assistance so far.

hi, I am looking for exactly the same feature but face the very same problems, I added the code above and had a blank product page, then deleted the double {if $have_image} and now I see the product page but only the link to the sale overlaz image which IS in the themes/prestashop/img directoty.

see http://www.lilac-lane.de/baby-eating/157-olive-and-moss-maximilian-the-moose-bib.html

any idea how to fix this?

phil

EDIT: copied the exact code from the template and it basically works, except that it spoils my design so I deactivated it for the time being. but glad there is a way to solve my initial request.

[CameraTek]

Ok, I do apologize. you should place the overlay image in you'r theme img file.
I'll start again

Find the below code in product.tpl
<!-- product img-->

Directly underneath it add the following code

{if $product->on_sale}<!--[if IE 6]><!--[if IE 6]>{/if}
{if $have_image}

that's it.

If you want the image file I used, iv'e attached, if you want french or spanish, pm me and ill send them over

All images are thanks to smenster.

[gofer_p]

@CameraTek

I had the image in the correct directory but for some reason it would not work. Maybe it was my theme.

I used this code and it's now working.

{if $product->on_sale}{/if}

Thank you again. I would not have been able to get this done without your assistance.
Thank you for the image. I have not totally decided what image to use yet.

Your on sale image in your new products directory is over the product short description. you might want to put in on the image so the product description is not covered.

check here http://www.uk-cameras.cameratek.co.uk/new-products.php

[CameraTek]

Thanks for pointing this out. I use chrome and the sale image is over the product image, when i use internet explorer the image goes to the description part. I'll have a play around today to sort it out :-)

[archproject]

Guys ,

how about putting an overlay image on NEW PRODUCTS ?

[CameraTek]

Hi archproject,
Just done it on my site.
It looks fine when using firefox or chrome, but when using IE the image jumps out of a

Not quite sure why, any one with any ideas :-)

Andy

[archproject]

CameraTek

it looks great can you please tell me who you do that ... for the NEW PRODUCTS?

your site looks ok with IE .... on my computer ... my version is IE8 maybe you are using an older version of IE....

[CameraTek]

Yes, the front page images are showing properly, but when you go to one of the categories, the new image is showing up in the description part.
Ill paste the code here in a few mins

[archproject]

that's a really long few mins

[CameraTek]

Hi archproject,
I'm really sorry for the delay :-)
All you have to do is copy the code from the second post, but replace this part of the code {if $product->on_sale} to {if $product->new} and then the image name to whatever you called your new image.

Andy

[archproject]

cool and i think you know my next question is then .. ... i know "on_sale" and "new" . how about for top sellers ? would it be top_sellers"?

[CameraTek]

im not sure, ill look into it now.
Just finished doing an image overlay for discontinued products.
http://www.uk-cameras.cameratek.co.uk/camcorders/283-canon-legria-hf-r106-silver-high-definition-camcorder.html

and it removes the add to cart function

[archproject]

Ok on my site i had to copy from the original template as well then the picture showed up but when it showed up it didn't overlay it just stack on top of product image (not Overlay)
oh boyyyyy ...

Could be my version of ps is 1.3.5?

[CameraTek]

whats your URL?

[archproject]

I have removed the feature now I am too tired to look at it now ... I am moving on to mailchimp now .. anyway thanks ... oh I am using wamp so no url yet ....

[Pippo3000]

Ok, I do apologize. you should place the overlay image in you'r theme img file.
I'll start again

Find the below code in product.tpl
<!-- product img-->

Directly underneath it add the following code

{if $product->on_sale}<!--[if IE 6]><!--[if IE 6]>{/if}
{if $have_image}

that's it.

If you want the image file I used, iv'e attached, if you want french or spanish, pm me and ill send them over

All images are thanks to smenster.

hi cameraktek, still fiddling around with the code. which not works. could you please post your code snippet above formatted as, well, code. I believe that line breaks are wrong if I copy paste your code. plus, I already have the part {if $have_image}. shall I really add it twice in a row? here's my code:

    <!-- right infos-->

       <!-- product img-->

       {if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
       {else}

[CameraTek]

Hi Pibbo3000,
Just realised, the {if $have_image} shouldnt be in the code I added. Just copy and paste the rest of the code with out the {if $have_image}.

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

Apologies all :-(

[archproject]

Ok I came back to this thread ...

I got it to work on my WAMP ... anyway .. here's what you do

add this code in products.tpl under

For overlay image on new products.

{if $product->new}<!--[if IE 6]><!--[if IE 6]>{/if}

and add this at the very end of your global.css

.new_image {
position:absolute;
z-index:2;
}

CameraTek has forgotten to tell you the second bit in global.css .. that's why some of us who are using different theme are having the picture either with just a text link or a picture on top of the product picture....

The same goes for onsale products .... just change to onsale accordingly

[CameraTek]

Hi archproject,
I didn't do any changes in my global.css. All I done was add the code and it worked, I'm using 1.3.2.3, could that be the reason?

[archproject]

Hi,
Here's the template I used http://www.prestashop.com/forums/viewthread/66386/themes/free_theme_temporary
Have you uploaded an image to your image directory?

Well that's because you are using this template above .. I downloaded the template and cross check with mine and found the global.css has the above statement ... so I added it in .. and viola ....... since you were using the above template .. you had it already in the global.css .... did you check your global.css.... ?

[CameraTek]

No I'm not using that template, I'm using the PrestaShopic ColorBold template. Did have a look in the global.css and it's not there.
All I done was copy the code from the Temporary template and pasted in the product.tpl file and it worked.

[ashkansharifi]

Its a great thread

I need almost a same thing but need the image apears on product image whenever the product goes out of stock!!
basically need out of stock overlay image


Please help me to solve this problem

[chup]

other then checking for the sales item

can we check for the top seller and the feature item also?

[CosTed]

I tried this code on prestashop 1.4 and the on sale picture showing in a product page how to make it show in front office ?

[CosTed]

Its impposible to make overlay picture on Featured products ? And why my picture doesnt show up on the front page its only show up in product page ? Can someone help me with this code ? I think this code would be useful for other prestashop users not only for me. So please help me to solve this problem. PS 1.4

Thank You !

[imbuying]

Hi costed
i have been looking into this and how to get it on the featured block and i have done it follow below

open product-list.tpl

Find

{if isset($product.online_only) && $product.online_only}{l s='Online only!'}{/if}

Replace from

{if isset($product.online_only) && $product.online_only}

add this

<!--[if IE 6]>{/if}

so should look like this

{if isset($product.online_only) && $product.online_only}<!--[if IE 6]>{/if}

You can use this method with each one ie on sale and new and it will show images in home featured hope this helps

i have done this on my site www.imbuyingthat.com and it works great

[yabonga]

Hi.

 

I don´t get it. I want to put an onsale overlay image over my product image. I added the code like said before. My product.tpl now looks like this:

 

  <!-- product img-->
               {if $product->on_sale}<!--[if IE 6]>{/if}
               <div id="image-block">
               {if $have_image}

That one doesn´t work for me, because of the close tag '>' after '[if IE 6]'. A lot of code is greyed out after that. Isn´t the right tag '-->'?

Then CameraTek said the code is:

 

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

So I edited my product.tpl and now I only have a text with the link to the onsale image (which is correct) above my product-image (not laying over it). I´m stuck here. Any suggestions?

 

I´m using Presta 1.4.3 and a slightly modified standard-theme.

 

Thank you in advance!

[TBean]

I have also tried:

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

 

And haven't gotten it to work. My image name is sale_img_en.png and is located in the image directory of my theme. In my product.tpl I have written it as both:

 

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

 

and:

 

{if $product->on_sale}{$img_dir}sale_img_en.png{/if}

 

These are the only lines I have added/changed in my product.tpl and I have not added anything to my global.css or any other files.

I am currently running version 1.4.4. Am I missing something?

 

EDIT: I was actually able to figure it out. Since my product.tpl was already heavily modded, there was a very necessary portion of code that I needed to uncomment out. All fixed and works perfectly!

[yabonga]

I have also tried:

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

 

And haven't gotten it to work. My image name is sale_img_en.png and is located in the image directory of my theme. In my product.tpl I have written it as both:

 

{if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if}

 

and:

 

{if $product->on_sale}{$img_dir}sale_img_en.png{/if}

 

These are the only lines I have added/changed in my product.tpl and I have not added anything to my global.css or any other files.

I am currently running version 1.4.4. Am I missing something?

 

EDIT: I was actually able to figure it out. Since my product.tpl was already heavily modded, there was a very necessary portion of code that I needed to uncomment out. All fixed and works perfectly!

 

Could you please upload your product.tpl or paste your 'product img' code, because I tried it with the out-of-the-box product.tpl but it doesn´t work. Thank you.

[yabonga]

Hi There,

 

since the solutions showed above didn´t work for me, I´ve found an easy solution that did. I edited my product.tpl:

 

 <!-- product img-->
               {if $product->on_sale}<img src="{$img_dir}sale_img_{$lang_iso}.png" id="overlay"  /> {/if}

 

and I added a line in my product.css:

 

img#overlay
{
z-index:999;
position:absolute;
       margin-top:0px; /*If you wish to move your Image*/
margin-left:0px;/*If you wish to move your Image*/
width:120px; /*your image width*/
height:107px; /*your image height*/
}

 

 

For the product-list.tpl, this one works for me:

 

<div class="center_block">

           {if isset($product.on_sale) && $product.on_sale}<img src="{$img_dir}sale_img_{$lang_iso}.png" id="overlay" />{/if}

 

and in product_list.css:

 

img#overlay
{
z-index:999;
position:absolute;
       margin-top:0px; /*If you wish to move your Image*/
margin-left:0px;/*If you wish to move your Image*/
width:120px; /*your image width*/
height:107px; /*your image height*/
       display:block
}

 

I hope that helps others with the same problem I had.

 

Cheers.

[Webtexsoftware]

Hi to all,

 

I think our extension will help you to add OnSale images on products.

Please check it out. "OnSale Pro"

[Rush Networks]

Hey Guys.

Hope that someone can help me out.

 

Implementet this code:

 

 <!-- product img-->
 <div id="image-block">
 {if $have_image}
 {if $product->on_sale}
 <div  style="position: absolute; margin-top:193px; margin-left:194px; float: left; width: 106px; height: 107px; z-index:101; background: url(/themes/prestashop/img/tilbud_sticker.png)">
  <div style="text-align:center; padding-top: 45px; font-size: 16px;">Tilbud</div>
 </div>
   {elseif ($product->reduction_price != 0 || $product->reduction_percent != 0) && ($product->reduction_from == $product->reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product->reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product->reduction_from))}
 <div  style="position: absolute; margin-top:193px; margin-left:194px; float: left; width: 106px; height: 107px; z-index:101; background: url(/themes/prestashop/img/tilbud_sticker.png)">
  <div style="text-align:center; padding-top: 35px; font-size: 16px;">
   {if $product->reduction_percent != 0}
    SPAR<br />{$product->reduction_percent}%
   {elseif $product->reduction_price != 0}
    SPAR<br />{convertPrice price=$product->reduction_price}
   {else}
    <div style="padding-top:10px;">Tilbud</div>
   {/if}
  </div>
 </div>
   {/if} 

  {if $have_image && !$jqZoomEnabled}
  <span id="view_full_size">
   <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
   <span class="span_link">{l s='View full size'}</span>
  </span>
  {/if}


 {else}
  {if $have_image && !$jqZoomEnabled}
  <span id="view_full_size">
   <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
   <span class="span_link">{l s='View full size'}</span>
  </span>
  {/if}
 {/if}
 </div>
 {if isset($images) && count($images) > 0}

 

Like here:

http://www.homeshop.dk/97-weber-q-320.html

 

But it just don't show up one the new page:

http://homeshop.rushnetworks.dk/product.php?id_product=409

 

Can anyone see why?

 

Thanks

[tivicrdotcom]

I gave up couldn't get it work at all after trying every single combination

 

The only way I can get it to display the image is if I write the code like this:

<!-- product img-->

{if $product=on_sale}<img src="{$img_dir}sale_img_{$lang_iso}.png" id="overlay" /> {/if}

When adding "=" it displays the image name on top of the product but everything else disappears, anyone with a clue about it?

[b.designer]

Hello, can anyone help me to have it done for "out of stock" products???

The image appears on product image whenever the product goes out of stock!!

 

Tks if anyone can help...

[spc]

hello

 

I Whant to add new products and on sale overlay image in the homfeatured.tpl...

 

in the PS 1.4.7 I now how i can do, but in the 1.5.3 it´s a litle problem.

 

I have make this:

 

{if $product->on_sale}
<div class="rea">
</div>
{/if}

 

in the global.css

#featured-products_block_center_li .rea {
float: right;
   display: inline;
	background: transparent url('../img/rea.png') no-repeat top left;
color: white;
  width: 65px;
height: 65px;
margin: 0;
  position: absolute;
  margin: -15px 0 0 100px;
}

 

but i dont make it to work...

 

Please help me.

Edited March 28, 2013 by spc (see edit history)

[yaniv14]

can you post a link to your site? so I can inspect it

[buddhajewelry]

Hello,

 

I have tried to use the code listed above to add a sale banner but I just got a white page. Since I'm not that HTML savvy I went back in to delete the code I added but now the pages are still blank and I'm getting .html# at the end of my URL.

Help!

[vekia]

what code and where you added it? can you show your file contents? also turn on error reporting, it will be helpful in case like this

[buddhajewelry]

Thank you for the quick reply.

I added {if $product->on_sale}{$img_dir}sale_img_{$lang_iso}.png{/if} right under <!-- product img--> and above {if $have_image} in product.tpl. 

I'm not HTML savvy and am learning as I go. Once I added the code and it gave me a blank page I went back in to just delete the code but not it's still giving me the blank page however now in the URL on the page it has -.html# at the end. 

Our store is not open yet and we're using PrestaShop 5.1. Here is the link to the store http://buddhajewelryorganics.com/BuddhaShop/en/

 

I hope this is the right information you need.

As far as turning on terror reporting, where do I do that?

[vekia]

if you've got blank page - please turn on error reporting

then instead of blank page you will see full information about what and where doesnt work

[buddhajewelry]

Turned errors page on and this is what it says.

 

Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "/home/buddhaje/public_html/BuddhaShop/themes/theme724/product.tpl" on line 710 "{/if}" unclosed {if} tag' in /home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php:667 Stack trace: #0 /home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(118): Smarty_Internal_TemplateCompilerBase->trigger_template_error('unclosed {if} t...') #1 /home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php(206): Smarty_Internal_SmartyTemplateCompiler->doCompile('{*??* 2007-2013...') #2 /home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_template.php(187): Smarty_Internal_TemplateCompilerBase->compileTemplate(Object(Smarty_Internal_Template)) #3 /home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_templatebase.php(155): Smarty_Internal_ in/home/buddhaje/public_html/BuddhaShop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 667

 

 

I have no idea what any of it means as I don't read HTML. 
Can you help me?
 

[vekia]

your product.tpl file contains one unclosed {if} condition. verify it in line 710

[buddhajewelry]

I found it and this problem is now fixed.

THANK YOU!

[vekia]

so it was unclosed if condition, that's right?

[buddhajewelry]

Yes. You are correct.