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:
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í:
Hola traté de hacerlo en 1.6.0.14 pero no eresulto. Sera mi plantilla?
ResponderEliminarHola, vacía la caché, fuerza la compilación, cambia de navegador. Es posible que sea alguna de esas cosas.
EliminarHola Francisco, como lo puedo hacer para que el Stock se vea en todas las vistas. ademas necesito agregar la cantidad disponible.
ResponderEliminarHola Juan Manuel,
EliminarSi 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.
Francisco, hice lo que me dijiste, pero no funciona, las lineas hay que pegarlas en una ubicacion especifica?
ResponderEliminarporque solo sigue apareciendo el stock en los destacados
Haz lo siguiente y ve probando:
EliminarVací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.
No me resulta, vacié la caché, cambie navegador, recompile y nada.
ResponderEliminarQuizá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.
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).
ResponderEliminarUtiliza 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.
Te pasaste, ahora funciona a la perfección.
ResponderEliminaral lado de estas palabras de Stock y agotado se puede poner la cantidad??
Mira a ver si te funciona con este código :
Eliminar{if $product->quantity > 0} {$product->quantity} {/if}
No funciono el código
ResponderEliminarHola Jose Manuel,
EliminarResuelto! 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.
si funciona, excelente le asignare la misma clase para que quede ok.
ResponderEliminarTe pasaste, gracias por la ayuda.
cualquier problema te estare escribiendo
Saludos
Me alegro, un saludo.
EliminarHola Francisco, tengo una pregunta.
ResponderEliminarCuando 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
Hola Jose Manuel,
EliminarModifica el width de cada producto, los productos son etiquetas li.
Solo debes modificar el width.