[SOLVED] How to make product list image turn grey when out of stock?

[Andr3Ace]

hi all,

 

noobs question....

does anyone know how to make image in product list turn to grey when the product out of stock? i mean just like 'buy' button

 

anyhelp really appreciated

Edited May 24, 2014 by Andr3Ace (see edit history)

[vekia]

instead of simple:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

use: 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{if (!$product.allow_oosp || $product.quantity <= 0)}graypicture{/if}" />

then in css styles you can use .graypicutre class to define gray colors for this image :-)

[Andr3Ace]

thanks vekia for your quick reply

 

now all my product image is grey.

here's my code after changed:

<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
	{*<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />*}
	<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{if (!$product.allow_oosp || $product.quantity <= 0)}graypicture{/if}" />
</a>

add this in product_list.css

.graypicture {
filter: alpha(opacity=30); 
opacity: 0.3;}

 

 

& this question is already asked in your article about grey picture hover effects, you know

Edited May 24, 2014 by Andr3Ace (see edit history)

[Andr3Ace]

oke problem solved by another topic from the past

 

i put a 124x124px-60%-white-transparant image layer as if it was a "SOLD" ribbon not sure if it's the ultimate way but hey it work for me for now. another thanks for the past-vekia   

 

here's the code i use:

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
   {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
   <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
   {if $product.quantity==0}<img src= "http://domain/img/out-of-stock.png" style="position:absolute; right:0px; top:0px;" />
   {/if}
</a>

Edited May 24, 2014 by Andr3Ace (see edit history)

[vekia]

hello

remove this:

!$product.allow_oosp ||

from condition :that i suggested to use

[Andr3Ace]

aiyayayya. so simple solution from you & it also work the best way. because the hover effects still work with your methode.

thanks again for the future-vekia now

[Totti]

 

How can I do with ps 1.6 ?

 

[Andr3Ace]

i dont know about ps1.6. but my case with ps1.5.6.1 is editing product-list.tpl & product_list.css

[vekia]

you can use the same code will work also in ps 1.6

[KevinNash]

instead of simple:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

use: 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{if (!$product.allow_oosp || $product.quantity <= 0)}graypicture{/if}" />

then in css styles you can use .graypicutre class to define gray colors for this image :-)

 

Hello

 

I am interested but I don't find this code in my product-list.tpl, where is this code please ?

[vekia]

Hello

 

I am interested but I don't find this code in my product-list.tpl, where is this code please ?

 

what prestashop version you use? and what theme? everything depends on it

[KevinNash]

Oh my ! I forgot

 

I am on PS 1.5.4.1, standard theme ( but customised with some great Vekia tips ^^ )

Edited May 29, 2014 by KevinNash (see edit history)

[KevinNash]

what prestashop version you use? and what theme? everything depends on it

 

Hello

 

I answered yesterday I am on PS 1.5.4.1, standard theme

[CartExpert.net]

Hi.

 

Search for 'getImageLink', there should be only one in product-list.tpl. There is the HTML for the image.

 

Regards.

Robin.

The CartExpert Team

Edited May 31, 2014 by CartExpert.net (see edit history)

[vekia]

Hello

 

I answered yesterday I am on PS 1.5.4.1, standard theme

 

sorry, i missed your reply :/

this is why it's worth to quote

 

in default theme, in prestashop 1.5.x this line looks like:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

[KevinNash]

Works like a charm thank you

 

I add that to my product-list.css

#product_list li .graypicture {
filter: alpha(opacity=35); 
opacity: 0.35;}

Is that correct please ?

Edited June 30, 2014 by KevinNash (see edit history)

[vekia]

Works like a charm thank you

 

I add that to my product-list.css

#product_list li .graypicture {
filter: alpha(opacity=35); 
opacity: 0.35;}

Is that correct please ?

 

if it works - it is

i checked it on my own modification - works well

[KevinNash]

Thanks so much Vekia, I wasn't sure because when I change the opacity=35 value that doesn't change anything ( at least on Firefox ).

 

Only the opacity: 0.35 has an action so that seems strange to me and I don't understand coding at all haha

[vekia]

yess this is why there is also other command

alpha(opacity=35);

 

some browsers use different way to define opacity :-)

[KevinNash]

Thanks !!!! I like to understand and I do now because of you

[Aromatik]

you can use the same code will work also in ps 1.6

 

 

I try it on Presta 1.6.0.14 but its not working.

Is there any solution how to make it work?

[Valentin Reppel]

Hi folks

 

I am trying to achieve the same with Prestashop 1.6.1.10:

 

In product-list.tpl I have modified the code on line 54 to:
 

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" class="{if (!$product.quantity <= 0)}graypicture{/if}" />

 

In product_list.css I have added the following code on line 154:

 

ul.product_list li .graypicture {

filter: alpha(opacity=35); 

opacity: 0.35;}

 

Unfortunately nothing happens (I have used the original codes posted on the first page of the thread but they didn't work either)...

 

Any ideas or hints?

 

Kind regards

 

Marcus

Edited December 21, 2016 by Marcus Reppel (see edit history)

[ldobr]

Hello.

 

Had anyone luck with aplying this codes to PS 1.6.1.11? I've been trying it but no luck...

 

Any help would be trully apreciated

[Bulik]

Hi All!

Guy's, please give a hand with this. This topic remains pertinent  in 2019 for Presta 1.6.1.18

[alexmari]

In prestashop 1.6.1.24

replace:

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" loading="lazy" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

with this :

<img class="replace-2x img-responsive {if ($product.quantity == 0)}graypicture{/if}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" loading="lazy" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

 

Edited April 18, 2020 by alexmari (see edit history)

[jpsinfo]

Hello everyone! Any solution for prestashop for Prestashop 1.7.7.4. Thanks!