Botones +/- de Cantidad — Guía completa
Instalar, configurar y personalizar los botones + y − de cantidad en la ficha de producto de PrestaShop 8 y 9: estilo, colores, compatibilidad con el tema Classic y funcionamiento sin override.
Presentación
El módulo Botones +/- de Cantidad añade botones + y − reales a cada lado del campo de cantidad, en la ficha de producto. Sustituye el uso del pequeño campo numérico nativo de PrestaShop —incómodo tanto con el teclado como con el dedo en móvil— por dos amplios botones fáciles de pulsar.
El módulo no modifica ningún archivo del tema: añade una hoja de estilos y un script ligeros, solo en la ficha de producto, que envuelven el campo de cantidad existente. Es compatible con PrestaShop 1.7, 8 y 9, con el tema Classic y con la mayoría de temas personalizados.
Instalación
- En el back office, abra Módulos > Gestor de módulos.
- Haga clic en Subir un módulo y suelte el archivo ZIP del módulo.
- Una vez completada la instalación, haga clic en Configurar (opcional: el módulo funciona con sus ajustes por defecto justo después de la instalación).
No se crea ninguna tabla SQL ni se modifica ningún archivo del tema. El módulo simplemente registra el hook que carga sus recursos en la ficha de producto.
Configuración
La página de configuración reúne cuatro ajustes. Todos son opcionales: por defecto los botones están activos, en estilo cuadrado, con las flechas nativas ocultas.
Activar los botones
El interruptor Activar los botones controla la visualización global. Desactívelo para ocultar temporalmente los botones sin desinstalar el módulo: la ficha de producto recupera entonces el campo de cantidad original.
Estilo de los botones
Elija el aspecto de los botones:
- Cuadrado: los botones + y − tienen esquinas ligeramente redondeadas en los extremos del grupo (estilo por defecto).
- Redondeado: los botones adoptan una forma de píldora, con extremos completamente redondeados.
Color de fondo y color de los iconos
Dos selectores de color permiten ajustar:
- el color de fondo de los botones (gris claro por defecto);
- el color de los iconos + y − (gris oscuro por defecto).
El efecto al pasar el ratón se deriva automáticamente del color de fondo, por lo que no hay un tercer ajuste que gestionar. Los colores se aplican mediante variables CSS, lo que garantiza una integración limpia en la mayoría de temas.
Ocultar las flechas nativas del campo numérico
Cuando esta opción está activada (recomendado), las pequeñas flechas verticales del campo numérico del navegador se ocultan, dejando solo los botones + y − del módulo. Desactívela si prefiere mantener visibles las flechas nativas.
Lado del cliente
En la ficha de producto, el cliente ve un botón − a la izquierda del campo de cantidad y un botón + a la derecha. Cada clic incrementa o reduce la cantidad en un paso, y luego actualiza el precio, las posibles combinaciones y el botón de añadir al carrito, exactamente como una entrada manual. La cantidad sigue pudiendo editarse directamente con el teclado en el campo.
Funcionamiento y compatibilidad
Sin override de plantilla
El módulo no sobrescribe ningún archivo del tema. Localiza el campo de cantidad estándar de la ficha de producto y lo envuelve mediante inyección JavaScript para añadir los botones. Este enfoque lo hace compatible con una amplia variedad de temas y lo protege de las actualizaciones de PrestaShop, ya que no se sobrescribe ninguna plantilla.
Tema Classic y bootstrap-touchspin
El tema Classic ya enriquece el campo de cantidad con bootstrap-touchspin, que añade dos pequeñas flechas verticales. El módulo neutraliza limpiamente esas flechas dentro de su propio grupo de botones, dejando solo los + y − bien legibles, sin duplicado ni desplazamiento del diseño.
Sincronización con el carrito
En cada clic, el módulo aplica el nuevo valor y luego dispara los eventos que PrestaShop espera, tanto nativos como jQuery. El precio total, las combinaciones y el botón de añadir al carrito reaccionan con normalidad. Tras un cambio de combinación, que reconstruye el bloque de cantidad, los botones se reinyectan automáticamente.
Respeto del stock y las restricciones
Los botones leen la cantidad mínima, la cantidad máxima y el paso definidos en el campo. El cliente no puede bajar del mínimo requerido (a menudo 1) ni superar el stock disponible cuando está acotado. El comportamiento se mantiene coherente con las reglas de la tienda.
Resolución de problemas
Los botones no aparecen en la ficha de producto
Compruebe que el módulo está activado y que la opción Activar los botones está en Sí. A continuación vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento) y recargue la ficha de producto. Si su tema usa un campo de cantidad muy personalizado, el módulo puede no detectarlo; contacte con el soporte indicando su tema.
Las flechas nativas del tema Classic siguen visibles
Asegúrese de usar la versión 1.1.0 o superior, que neutraliza las flechas bootstrap-touchspin, y luego vacíe la caché. Compruebe también que ninguna sobrescritura CSS de su tema vuelve a mostrar esas flechas.
La cantidad cambia pero el precio no se actualiza
Este comportamiento suele provenir de un tema que no usa los eventos estándar de PrestaShop. El módulo dispara los eventos nativos y jQuery; si el tema escucha un mecanismo diferente, contacte con el soporte indicando el tema utilizado.
Desinstalación
La desinstalación del módulo retira sus recursos de la ficha de producto y elimina su configuración. El campo de cantidad recupera su aspecto original. No se ve afectado ningún dato de producto ni pedido.
FAQ
¿El módulo modifica mi tema?
No. No sobrescribe ningún archivo del tema: añade una hoja de estilos y un script solo en la ficha de producto, que envuelven el campo de cantidad existente.
¿Puedo cambiar el color de los botones?
Sí. La configuración permite ajustar el color de fondo y el color de los iconos + y −, así como el estilo cuadrado o redondeado. El efecto al pasar el ratón se deriva automáticamente del color de fondo.
¿Es compatible con PrestaShop 9?
Sí, el módulo es compatible con PrestaShop 1.7, 8.x y 9.x, tanto en monotienda como en multitienda.