Mostrar la disponibilidad de stock en Prestashop (donde no se muestra)

08 marzo, 2015 |

Si te gusta, compártelo ;)

Solución slide de precio del módulo navegación por facetas de Prestashop

En este sencillo tutorial vamos a ver cómo mostrar la disponibilidad de stock en Prestashop.

Concretamente en las vistas de de "Productos destacados" y "Los más vendidos" de Prestashop, ya que en estas vistas no se muestra la información sobre la disponibilidad de los productos.

Añadiremos un pequeño rótulo sobre la imagen del producto en estas vistas. Como podemos ver en la imagen que acompaña estas líneas:

Para Prestashop 1.6

Para conseguir esto en Prestashop 1.6 solo tendremos que editar dos archivos, el archivo product-list.tpl de nuestro tema y un archivo css de nuestra elección para aplicar estilo al rótulo.

Editando el archivo product-list.tpl...

Abramos el archivo ../prestashop/themes/default-bootstrap/product-list.tpl y busquemos este código:

<img class="replace-2x img-responsive"

Este código corresponde a una imagen, pues justo después de esta imagen pegar el siguiente código:

{if $page_name == 'index'}
 {if $product.quantity > 0}<span class='instock'>{l  s='En stock'}</span>{else}
 <span class='outofstock'>{l s='Agotado'}</span>{/if}
{/if}

De forma que quede así:

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

{if $page_name == 'index'}
 {if $product.quantity > 0}<span class='instock'>{l s='En stock'}</span>{else}
 <span class='outofstock'>{l s='Agotado'}</span>{/if}
{/if}

Utlizando el condicional {if $page_name == 'index'} solo se mostrará el rótulo en la página de inicio, pues en otras páginas ya se muestra la disponibilidad del producto y se duplicaría la información. Si el producto se encuentra agotado, obviamente se mostraría otro rótulo.

Hemos terminado con este archivo; guardamos cambios.

Aplicando el estilo CSS

Podemos aplicar nuestro estilo en el archivo global.css de nuestro tema, aunque esto es a elección de cada uno.

Si decidimos aplicar los estilos en el archivo global.css debemos abrirlo desde la ruta ../prestashop/themes/default-bootstrap/css

Peguemos estas líneas al final del archivo:

.instock { background:#4db554; color:white; padding:1px 5px; position:absolute; bottom:0px; right:0px; border-radius: 3px 0 0 0; }

.outofstock { background:#FE9126;
color:white; padding:1px 10px; position:absolute; bottom:0px; right:0px; border-radius: 3px 0 0 0; }

Y con esto hemos terminado con la versión Prestashop 1.6. Si un producto se encuentra en stock se mostrará un rótulo de color verde, y si está agotado se mostrará un rótulo de color naranja, como podemos ver en la siguiente imagen:

Mostrar disponibilidad de stock en la lista de productos de Prestashop

Para Prestashop 1.5

Para la versión Prestashop 1.5 debemos hacer ligeros cambios respecto lo visto hasta ahora.

Editando el archivo product-list.tpl (Prestashop 1.5)

Debemos abrir el archivo ../prestashop/themes/default/product-list.tpl y buscar el siguiente código:

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link"

Justo antes del cierre de la etiqueta <a> debemos pegar el siguiente código, de forma que quede así:

<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} />
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

{if $product.quantity > 0}
 <span class='instock'>{l s='Disponible'}</span>
{else}
 <span class='outofstock'>{l s='Agotado'}</span>
{/if}

</a>

Guardamos cambios.

Modificar la plantilla del módulo "Productos Destacados en la Página de inicio"

En Prestashop 1.5, a diferencia de Prestashop 1.6, debemos editar la plantilla del módulo "Productos Destacados en la Página de inicio" (homefeatured), por lo tanto abramos el archivo ../prestashop/themes/default/modules/homefeatured/homefeatured.tpl

Busquemos la siguiente línea:

<a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">

Justo antes del cierre de la etiqueta <a> pegar el siguiente código:

{if $product.quantity > 0}
 <span class='instock'>{l s='Disponible'}</span>
{else}
 <span class='outofstock'>{l s='Agotado'}</span>{/if}

De forma que quede así:

<a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}

{if $product.quantity > 0}
 <span class='instock'>{l s='Disponible'}</span>
{else}
 <span class='outofstock'>{l s='Agotado'}</span>{/if}
</a>

Guardamos cambios.

Aplicando el estilo CSS (Prestashop 1.5)

Para esta versión vamos a abrir el archivo ../prestashop/themes/default/css/global.css, al final del archivo pegar estas líneas:

span.instock {
    background-color: #008000;
    color: white;
    padding: 1px 5px;
    border-radius: 3px 0 0 0;
    display: inline-block;
    float: right;
}

span.outofstock {
    background-color: rgb(193, 14, 14);
    color: white;
    padding: 1px 5px;
    border-radius: 3px 0 0 0;
 display: inline-block;
    float: right;
}

Con esto terminamos este tutorial, el aspecto en Prestashop 1.5 debería quedar más o menos así:

Mostrar disponibilidad de stock en la lista de productos de Prestashop 1.5

16 comentarios:

  1. Hola traté de hacerlo en 1.6.0.14 pero no eresulto. Sera mi plantilla?

    ResponderEliminar
    Respuestas
    1. Hola, vacía la caché, fuerza la compilación, cambia de navegador. Es posible que sea alguna de esas cosas.

      Eliminar
  2. Hola Francisco, como lo puedo hacer para que el Stock se vea en todas las vistas. ademas necesito agregar la cantidad disponible.

    ResponderEliminar
    Respuestas
    1. Hola Juan Manuel,

      Si te refieres a la página de producto deberás insertar lo siguiente en el archivo product.tpl de tu plantilla.

      Para ver si el producto está en stock: {if $product->quantity > 0} {$product->available_now} {/if}

      Para ver la cantidad de artículos disponibles: {if $product->quantity > 0} {$product->quantity} {/if}

      P.D. Para que aparezca el texto sobre la disponibilidad (el stock) de un producto, deberás insertar el texto

      que quieras cuando crees o edites un producto; en la pestaña "Cantidades"; hay un texto que dice:

      "Texto mostrado cuando hay existencias". Pues insertas el texto ahí y éste aparecerá en la página de producto,

      siempre y cuando insertes las líneas que te he dicho.

      Un saludo.

      Eliminar
  3. Francisco, hice lo que me dijiste, pero no funciona, las lineas hay que pegarlas en una ubicacion especifica?
    porque solo sigue apareciendo el stock en los destacados

    ResponderEliminar
    Respuestas
    1. Haz lo siguiente y ve probando:

      Vacía la caché, recompila la plantilla, prueba en otro navegador.

      Si has usado la opción "Inspeccionar Elemento" de Chrome identifica una etiqueta, luego búscala en product.tpl y pega ahí el código que te dije.

      Eliminar
  4. No me resulta, vacié la caché, cambie navegador, recompile y nada.

    Quizás me exprese mal

    Cuando elijo alguna categoría del menú se despliegan productos y a esos productos necesito que se vea si hay stock o no.

    De la misma forma que se ven en los destacados. sin ingresar al producto mismo

    No me interesa mostrar el stock cuando ingresan al producto seleccionado

    tengo esta duda porque el codigo es diferente al usado en productos destacados.

    ResponderEliminar
  5. Esta vez sí que lo resolvemos. El código de este tutorial te va a funcionar. Si te fijas hay un condicional para que sólo se muestre en la página de inicio (en el index).

    Utiliza el código del tutorial y elimina el
    {if $page_name == 'index'}
    también el if de cierre {/if}

    Con esto ya debería mostrarse en todas las páginas. Al principio del tutoría se menciona esto.

    ResponderEliminar
  6. Te pasaste, ahora funciona a la perfección.

    al lado de estas palabras de Stock y agotado se puede poner la cantidad??

    ResponderEliminar
    Respuestas
    1. Mira a ver si te funciona con este código :

      {if $product->quantity > 0} {$product->quantity} {/if}

      Eliminar
  7. Respuestas
    1. Hola Jose Manuel,

      Resuelto! Ya verás como te sale, prueba esto, insertalo en el archivo product-list.tpl, como se dice en el tutorial:

      {if $product.quantity > 0} {$product.quantity}{/if}

      Ya me cuentas.

      P.D Si te fijas solo hay una diferencia (un punto) respecto al de antes jajaja.

      Eliminar
  8. si funciona, excelente le asignare la misma clase para que quede ok.

    Te pasaste, gracias por la ayuda.

    cualquier problema te estare escribiendo

    Saludos

    ResponderEliminar
  9. Hola Francisco, tengo una pregunta.

    Cuando ingreso a una categoría en el menú me muestra los productos pero solo 3 en línea, pero necesito que me muestre 4 productos.

    Esto es lo que muestra ahora

    Producto 1 Producto 2 Producto 3

    Necesito que muestre 4 productos

    Producto 1 producto 2 productos 3 producto 4

    Como puedo realizar el cambio

    ResponderEliminar
    Respuestas
    1. Hola Jose Manuel,

      Modifica el width de cada producto, los productos son etiquetas li.

      Solo debes modificar el width.

      Eliminar