Jump to content

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


Andr3Ace
 Share

Recommended Posts

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

  • Like 1

Share this post


Link to post
Share on other sites

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

post-773117-0-11293800-1400930665_thumb.jpg

 

 

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

Edited by Andr3Ace (see edit history)

Share this post


Link to post
Share on other sites

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 :rolleyes: not sure if it's the ultimate way but hey it work for me for now. another thanks for the past-vekia  :D 

 

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 by Andr3Ace (see edit history)

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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} />

Share this post


Link to post
Share on other sites

  • 5 weeks later...

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 2 years later...
  • 4 months later...

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 by Marcus Reppel (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 2 years later...
  • 1 year later...

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 by alexmari (see edit history)

Share this post


Link to post
Share on other sites

  • 1 year later...

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
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More