¿Zoom en imágenes de productos en el Back Office?

lorena_89

Hola a todos,

Estoy intentando añadir una función de zoom a las imágenes de los productos en la lista del Back Office de PrestaShop. Sería genial poder pasar el ratón por encima de la imagen pequeña y que apareciera una versión más grande para ver los detalles sin tener que entrar en la ficha de cada producto.

He estado experimentando con un override en AdminProductsController, intentando añadir un atributo data-zoom-src directamente en la definición de la columna, pero no consigo que funcione. Parece que HelperList no lo interpreta o no me genera la URL correcta para la imagen grande. Esto es lo que he intentado:

// En override/controllers/admin/AdminProductsController.php
class AdminProductsControllerCore extends AdminProductsController
{
    public function __construct()
    {
        parent::__construct();
        $this->fields_list['image'] = [
            'title' => $this->l('Imagen'),
            'width' => 70,
            'image' => 'p',

¿Alguna idea de cómo puedo conseguir esto de forma efectiva? ¿Hay algún gancho o método en 1.7.1.2 que sea más adecuado para esto?

manuelhub

Hola @lorena_89,

Entiendo perfectamente lo que quieres, es un fastidio tener que abrir cada producto solo para ver bien la imagen. La forma en que HelperList construye las tablas es un poco peculiar. El array $this->fields_list define la estructura de las columnas, pero no interpreta atributos HTML custom como data-zoom-src directamente para la columna de imagen 'image' => 'p'. Esa clave 'image' se usa internamente para decir que es una imagen, pero no para inyectar atributos arbitrarios.

Para algo así, normalmente necesitarías un callback en la definición de la columna. ¿Qué versión exacta de PrestaShop estás usando? Saberlo ayuda a acotar las posibles soluciones.

Milo

Hola @lorena_89 y @manuelhub,

@manuelhub tiene razón. En PrestaShop 1.7.1.2 (y la mayoría de las 1.7.x), la clave 'image' => 'p' en $this->fields_list le dice a HelperList que renderice una imagen de producto utilizando su lógica interna, pero no hay un mecanismo directo para añadir atributos HTML personalizados a esa imagen a través de esa definición. Para tener un control total sobre cómo se renderiza la celda de la imagen, la solución correcta es usar un callback en la definición de la columna.

Así es como podrías modificar tu AdminProductsController (vía override) para usar un callback que genere la etiqueta <img> con el atributo data-zoom-src apuntando a la imagen de gran tamaño:

// En override/controllers/admin/AdminProductsController.php
class AdminProductsController extends AdminProductsControllerCore
{
    public function __construct()
    {
        parent::__construct();
        $this->fields_list['image'] = [herramienta de ampliar imágenes](https://mypresta.eu/es/modulos/administracion-de-la-tienda/ampliar-imagenes-en-la-lista-de-productos-en-la-oficina-administrativa.html) dedicada. Estos módulos ya incluyen toda la lógica PHP y JS necesaria para una integración sin problemas.

lorena_89

¡Muchísimas gracias, @Milo! Esta es exactamente la solución que necesitaba. Lo he probado en mi PrestaShop 1.7.1.2 y funciona de maravilla.

El truco del callback en fields_list era lo que se me escapaba. Ahora veo la imagen con el atributo data-zoom-src correctamente generado. Ya solo me queda la parte del JavaScript para el efecto visual, pero con la base que me has dado, es mucho más sencillo.

También aprecio la sugerencia de la herramienta dedicada. Para un entorno de producción con varias personas en el BO, seguramente sea lo más sensato a largo plazo por la mantenibilidad. De momento, con tu código ya puedo avanzar.

¡Gracias de nuevo a ti y a @manuelhub por la ayuda!