Product not available for order

[cpuin]

Hi,

I want to make the main image of the product with some fade out effect when the product is marked as "not available for order".

Please, let me know where to check this in the .tpl code. I'm not talking about out of stock, because I don't use stock, but when I checked the "not available for order"  option.

I'm using Prestashop 1.7.6.5

[cpuin]

15 hours ago, ndiaga said:

Hi,

It   depends   on   the  theme  you  are  using  but  usually  the  product  image  should  be  located  at  :

templates/catalog/_partials/product-cover-thumbnails.tpl

The question is how to check wether this option is ON and replace it with another picture or apply some ccs style?

[Tom Girou]

Hello cpuin,

It could be 

{if $product.availability == 'unavailable'}

 

[cpuin]

5 hours ago, Tom Girou said:

Hello cpuin,

It could be 

{if $product.availability == 'unavailable'}

 

I have tried this, but doesn't work.

I need to have fade out image when all products are listed and when the current product is open.

 

<div class="images-container">
  {block name='product_cover'}
    <div class="product-cover">
      <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
      <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
        <i class="material-icons zoom-in">&#xE8FF;</i>
      </div>
    </div>
  {/block}

  {block name='product_images'}
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
        {foreach from=$product.images item=image}
          <li class="thumb-container">
          {if $product.availability == 'unavailable'}
            <img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >
            {/if}
          </li>
        {/foreach}
      </ul>
    </div>
  {/block}
</div>

 

[Tom Girou]

Maybe 

{if !$product.available_for_order}{/if}

 

[cpuin]

2 hours ago, Tom Girou said:

Maybe 

{if !$product.available_for_order}{/if}

 

The check works, now I need to make the main image to be natural like it is when hover it.The greyed out filter to be the natural state.Any ideas?

Edited June 7, 2022 by cpuin (see edit history)

[Knowband Plugins]

Kindly use the below condition

{if !$product.add_to_cart_url}
              //your code
{/if}

[cpuin]

8 minutes ago, Knowband Plugins said:

Kindly use the below condition

{if !$product.add_to_cart_url}
              //your code
{/if}

  {block name='product_cover'}
    <div class="product-cover">
      <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
      <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
        <i class="material-icons zoom-in">&#xE8FF;</i>
      </div>
    </div>
  {/block}

The code {if !$product.available_for_order}{/if} works perfect, now i need to know how to change the opacity of the main picture to be like when it is hover.