Es muy práctico para el cliente, que en el listado de productos ya le aparezca si están disponibles o no. Así le facilitamos la navegación y no le hacemos perder el tiempo. Aquí te explico cómo mostrar disponibilidad en el listado de productos en Prestashop, ya sea en la home, categorías u otros listados. Es muy fácil y rápido
Es muy habitual estar consultando un listado de productos en una tienda online. Quizá porque navegas en una categoría, o porque estás mirando las novedades, ofertas, etc. Y puede que te enamores a primera vista de un producto. Pero cuando haces clic sobre él para ver más información, zas, está agotado. Puede ser muy frustrante.
Y si en lugar de ser tú quien está visitando una web, son tus clientes visitando la tuya, aún más importante. Se trata es de que se lo pongas fácil y mejores su experiencia. Ya sabes, cliente contento, tú contento.
En el listado de producto, indica la disponibilidad
El cliente podrá ir directamente a los que le gustan que estén disponibles. El camino hacia la compra estará más definido ya que tus clientes no estarán divagando entre diferentes productos de los que aún no saben la disponibilidad (hasta que cliquen en ellos).
Mostrar disponibilidad en el listado de productos en Prestashop
Para hacerlo, necesitas modificar el fichero product-list.tpl, que es el el que muestra el listado de productos en tu plantilla. Búscalo en /themes/tu-plantilla/product-list.tpl.
Antes de nada, haz una copia de seguridad del mismo, como siempre.
Busca las líneas siguientes:
<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" />
Y a continuación añade el siguiente código:
{if $product.quantity >0}<div class='instock'>{l s='Disponible'}</div>{else}<div class='outofstock'>{l s='Agotado'}</div>{/if}
Ahora edita el fichero global.css, que encontrarás en /themes/tu-tema/css/global.css
Vamos a dar estilo a las etiquetas Disponible y Agotado que aparecerán en el listado de tus productos. Para ello, puedes añadir el código siguiente, o bien escribir el estilo que tú prefieras. Puedes añadirlo al final del fichero. Puedes jugar con los colores, y las dimensiones para crear las etiquetas a tu gusto.
.instock { background:green; color:white; padding:5px 10px; position:absolute; bottom:0px; right:0px; }
.outofstock { background:red; color:white; padding:5px 10px; position:absolute; bottom:0px; right:0px; }
Guarda todos los cambios en los dos ficheros, ve a tu frontoffice, refresca la pantalla de listado de productos, y ya te aparecerán etiquetas de disponibilidad. Tus clientes te lo agradecerán 🙂
Si no vieras ningún cambio, recuerda vaciar la caché de tu prestashop y refrescar la pantalla.
Así que, ya sabéis, os animo a probarlo y, si tenéis dudas, comentadlas aquí mismo. Suerte y mucho ecommerce!