Cómo mostrar «Sin stock» en la lista de productos de Prestashop

En el difícil mundo de la venta online sabemos, que cuanta mayor información y facilidades ofrezcamos a nuestros clientes mejor.

Una de las opciones más interesantes es informar, a nuestros posibles compradores, de si tenemos stock del producto. La opción más cómoda es mostrar esa información directamente en el catálogo de productos, sin necesidad de acceder directamente a él. Así, con un simple vistazo informamos si tenemos en stock el producto o no.

 

Modificar archivo

Dependiendo de la versión de Prestashop que tengas instalada deberás modificar un archivo determinado.

Desde la versión de Prestashop 1.7.0.2 hasta la 1.7.6.9 debemos modificar el archivo product.tpl que está en la ruta themes\classic\templates\catalog\_partials\miniatures\product.tpl, sustituimos este código (suele estar entre la línea 82 a la 86):

{block name='product_flags'}
        <ul class="product-flags">
          {foreach from=$product.flags item=flag}
            <li class="product-flag {$flag.type}">{$flag.label}</li>
          {/foreach}
        </ul>
{/block}

Por este otro:

{block name='product_flags'}
   <ul class="product-flags">
      {foreach from=$product.flags item=flag}
         <li class="product-flag {$flag.type}">{$flag.label}</li>
      {/foreach}
      {if $product.show_availability && $product.availability_message}
         {if $product.availability == 'available'}
            <li class="product-flag product-available">{$product.availability_message}</li>
               {elseif $product.availability == 'last_remaining_items'}
            <li class="product-flag discount">{$product.availability_message}</li>
               {else}
            <li class="product-flag discount">{$product.availability_message}</li>
         {/if}
      {/if}
   </ul>
{/block}

A partir de la versión 1.7.7.0 debemos modificar el fichero product-flags.tpl que está en la ruta themes\classic\templates\catalog\_partials\product-flags.tpl y modificamos esto:

{block name='product_flags'}
   <ul class="product-flags">
      {foreach from=$product.flags item=flag}
         <li class="product-flag {$flag.type}">{$flag.label}</li>
      {/foreach}
   </ul>
{/block}

Por esto:

{block name='product_flags'}
   <ul class="product-flags">
      {foreach from=$product.flags item=flag}
         <li class="product-flag {$flag.type}">{$flag.label}</li>
      {/foreach}
        
      {if $product.show_availability && $product.availability_message}
         {if $product.availability == 'available'}
        <li class="product-flag product-available">{$product.availability_message}</li>
           {elseif $product.availability == 'last_remaining_items'}
        <li class="product-flag discount">{$product.availability_message}</li>
           {else}
        <li class="product-flag discount">{$product.availability_message}</li>
     {/if}
      {/if}
   </ul>
{/block}

Resultado

Ahora en nuestro catálogo cuando un producto se encuentre agotado aparecerá la etiqueta “Sin stock”.

 

5 comentarios en “Cómo mostrar «Sin stock» en la lista de productos de Prestashop”

  1. Hola! he seguido tu tutorial para conseguir que la etiqueta de fuera de stock aparezca en las miniaturas de mi ecommerce sin necesidad de entrar al producto, pero aparece la etiqueta cuando hay stock, en lugar de cuándo no lo hay,¿ Alguna sugerencia?

  2. Hola, gracias por el codigo.
    Tengo un problema, el cambio se muestra si lo miro desde un móvil pero no desde una PC.

    ¿Puedo preguntarte si sabes cómo puedo solucionarlo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información | Legitimación: Tu consentimiento de forma expresa | Destinatario: Nicalia mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace

Scroll al inicio
Ir arriba