Reemplazar el Botón Añadir al Carrito en los Listados PrestaShop: instalación y configuración

Presentación

El módulo sustituye el botón Añadir al carrito de las miniaturas de producto (páginas de categoría, búsqueda, inicio, carruseles, productos relacionados) por un botón que lleva a la ficha del producto. El cliente elige allí el peso, la talla o el formato antes de añadir al carrito. Usted define reglas: qué productos se ven afectados, qué texto muestra el botón y si se muestra el precio más bajo de las combinaciones con «Desde».

Instalación

1. En Módulos > Gestor de módulos, haga clic en Subir un módulo y envíe el archivo dflistingbutton-1.0.0.zip.
2. El módulo crea las tablas ps_dflb_rule, ps_dflb_rule_lang, ps_dflb_rule_shop, ps_dflb_rule_category y ps_dflb_rule_product, y añade el menú Catálogo > Botones de listado.
3. Se crea una regla de ejemplo desactivada, «Ejemplo: todos los productos con combinaciones». Puede activarla tal cual o eliminarla.
4. Después de crear o activar una regla, abra una página de categoría de la tienda. Si el botón no aparece, vacíe la caché en Parámetros avanzados > Rendimiento.

Crear una regla

En Catálogo > Botones de listado, haga clic en Añadir una regla. El formulario tiene tres bloques.

Regla y segmentación

• Nombre de la regla: nombre interno, no visible para los clientes.
• Activa: una regla desactivada se ignora.
• Prioridad: cuando varias reglas coinciden con un producto, gana la de número más bajo. Valor por defecto: 10.
• Se aplica a: Todos los productos, Categorías o Productos concretos.
• Categorías: árbol de casillas con un campo de filtro. Para este tipo de regla es obligatoria al menos una categoría.
• Incluir subcategorías: también se incluyen los productos de todas las subcategorías de las categorías marcadas.
• Coincidencia de categoría: El producto está en una de las categorías (cuentan todas las categorías asociadas al producto) o Solo la categoría por defecto del producto.
• Productos: para el tipo Productos concretos, búsqueda por nombre, referencia o ID.
• Condición: Sin condición, Productos con combinaciones o Productos que usan un grupo de atributos. Con Productos con combinaciones, los productos simples de la misma categoría conservan su botón Añadir al carrito.
• Grupo de atributos: para la última condición, por ejemplo Peso o Talla. Solo se incluyen los productos con una combinación que usa ese grupo.
• Productos excluidos: estos productos nunca reciben el botón de esta regla, sea cual sea la segmentación.
• Asociación de tienda: en multitienda, elija las tiendas donde se aplica la regla.

Botón

• Texto del botón: un texto por idioma, por ejemplo «Ver todas las opciones de peso». Un idioma vacío toma el primer texto introducido.
• Estilo: Botón principal del tema (clases btn btn-primary), Botón con borde del tema (btn btn-outline-primary) o Colores personalizados, con color de fondo, color de texto y vista previa.
• Icono: flecha, opciones, balanza, ojo o ninguno.
• Ancho completo: el botón ocupa todo el ancho de la miniatura.
• Clases CSS adicionales: se añaden al botón, útiles para reutilizar una clase de su tema.
• Ocultar el selector de cantidad: oculta el campo de cantidad que algunos temas muestran en los listados.

Precio en los listados

Este bloque solo afecta a los productos con al menos dos combinaciones.

• Mostrar el precio más bajo de las combinaciones: PrestaShop calcula el precio de cada combinación (impuestos, grupo del cliente, precios específicos y descuentos incluidos). Si el más bajo difiere del precio que muestra el tema, lo sustituye, y se ocultan el precio anterior tachado y la etiqueta de descuento de la miniatura.
• Añadir el prefijo «Desde»: se añade delante del precio solo si los precios de las combinaciones son distintos y el precio mostrado es el más bajo. Si desactiva la opción anterior y la combinación por defecto no es la más barata, el prefijo no se muestra, para no anunciar un precio incorrecto.
• Texto del prefijo: un texto por idioma («Desde», «À partir de», «Ab», etc.).

Ejemplo: quesos y embutidos vendidos al peso

1. Nombre: Quesos al peso. Se aplica a: Categorías. Marque Quesos y embutidos y mantenga Incluir subcategorías.
2. Condición: Productos que usan un grupo de atributos, grupo Peso.
3. Texto del botón: «Ver todas las opciones de peso» en español, «Voir tous les poids disponibles» en francés.
4. Mantenga activados Mostrar el precio más bajo y Desde, y guarde.

En la categoría, cada queso vendido en 250 g, 500 g y 1 kg muestra «Desde» seguido del precio de 250 g y el botón hacia su ficha. Un producto vendido por unidad, sin combinación de peso, conserva su botón Añadir al carrito.

Ajustes generales

La página de configuración del módulo (botón Ajustes encima de la lista de reglas) contiene:

• Activar el módulo: desactiva todas las reglas sin eliminarlas.
• Detección del tema: Automático (recomendado), Usar siempre la consulta AJAX o Solo hooks. Vea la sección siguiente.
• Desactivar también el enlace nativo de añadir al carrito: vacía en el servidor la URL de añadir al carrito de los productos afectados, mediante el hook actionPresentProductListing. Algunos temas muestran entonces su propio enlace «Ver producto»: si obtiene dos botones, deje esta opción desactivada.
• Ocultar el botón Vista rápida: solo en los productos afectados.
• Ignorar las combinaciones sin stock para el precio más bajo: se aplica cuando la gestión de stock está activa y el producto no admite pedidos sin stock. Si todas las combinaciones están sin stock, se tienen en cuenta todas.

Compatibilidad con su tema

Cómo identifica el módulo los productos

Mientras se muestra una miniatura, el módulo se ejecuta en los hooks displayProductPriceBlock y displayProductListReviews, que llaman el tema Classic, Hummingbird y la mayoría de temas. Para cada producto afectado imprime una marca invisible. El script del módulo localiza la miniatura que contiene la marca, oculta el botón de carrito, el formulario de añadir al carrito que lo rodea y el selector de cantidad, e inserta el nuevo botón donde estaba el botón oculto.

Si el tema no muestra ningún botón de carrito en sus listados (caso del tema Classic), el botón se coloca justo después del bloque de precio.

En modo Automático, si ninguna miniatura de la página ha activado esos hooks, el script envía los ID de los productos visibles al controlador del módulo, que devuelve los afectados (60 productos como máximo por consulta, solo productos activos y visibles). Las miniaturas añadidas tras un filtro por facetas, una ordenación o un scroll infinito se procesan automáticamente.

Selectores CSS

El bloque Compatibilidad con el tema (selectores CSS) de la configuración contiene los selectores que usa el script:

• Contenedor de la miniatura de producto: bloque que envuelve un producto (.product-miniature, .ajax_block_product, etc.).
• Botón Añadir al carrito: elementos sustituidos (.add-to-cart, [data-button-action="add-to-cart"], etc.).
• Selector de cantidad, Precio, Precio anterior y descuento, Punto de inserción, Botón Vista rápida.

Añada las clases de su tema a la lista, separadas por comas. El botón Restablecer los selectores por defecto recupera los valores originales.

Personalizar el estilo

El botón lleva la clase .dflb-btn, más .dflb-full a ancho completo y .dflb-style-custom con colores personalizados (variables --dflb-bg y --dflb-color). El prefijo de precio lleva la clase .dflb-from, y la miniatura procesada recibe .dflb-has-btn.

Lo que el módulo no modifica

• el producto principal de la ficha y su vista rápida;
• el carrito, el proceso de compra y la cuenta de cliente;
• los archivos del núcleo y del tema (sin override, sin plantillas modificadas).

Limitaciones conocidas

• El módulo cambia la visualización de los listados. No bloquea un añadido al carrito hecho por otra vía (enlace directo, módulo de terceros).
• El precio más bajo y el prefijo se aplican en el navegador. El HTML original y los datos estructurados del tema conservan el precio de la combinación por defecto.
• Por encima de 150 combinaciones en un mismo producto, solo las 150 primeras se usan para calcular el precio más bajo.