Transformando la Experiencia del Catálogo: Imágenes Perfectas y Búsquedas Inteligentes en TuTiendaWeb

En el mundo del comercio electrónico, una imagen vale más que mil palabras, y una buena experiencia de búsqueda, aún más. Pero, ¿qué sucede cuando esas imágenes tienen proporciones tan variadas como los productos que venden, y los usuarios esperan encontrar lo que buscan sin esfuerzo? Recientemente, en el proyecto TuTiendaWeb, abordamos estos desafíos con una serie de mejoras significativas en la visualización de productos y la experiencia de usuario del catálogo público.

El Desafío de la Visualización de Imágenes

Uno de los principales puntos de fricción era la inconsistencia en cómo se mostraban las imágenes de los productos. Las imágenes verticales a menudo se recortaban, perdiendo detalles importantes, mientras que las cuadradas u horizontales llenaban el espacio de manera inconsistente. Nuestro objetivo era lograr una visualización que fuera tanto estética como funcional, adaptándose a cualquier proporción sin sacrificar información.

La solución implementada involucra un enfoque inteligente: las imágenes verticales ahora se muestran completas, flanqueadas por un "relleno" borroso al estilo "frosted glass" para mantener la armonía visual. Para las imágenes cuadradas u horizontales, estas se ajustan al ancho completo, manteniendo un aspecto (aspect-[4/3]) consistente en el contenedor. Esto se logró detectando la proporción real de cada imagen y ajustando la visualización dinámicamente, asegurando que el contenido visual siempre se presente de la mejor manera.

Una Experiencia de Imagen Ampliada: El Lightbox

Para ofrecer una visualización aún más detallada, implementamos un visor de imágenes ampliado o "lightbox". Al tocar una imagen del producto, esta se abre en pantalla completa, permitiendo hacer zoom y navegar por las otras imágenes. La clave aquí fue la implementación utilizando un componente Dialog de Radix UI anidado dentro del drawer del producto. Esto garantiza que al cerrar el visor (ya sea con la 'X', haciendo clic fuera o presionando Escape), solo se cierre el lightbox, manteniendo abierto el drawer del producto y preservando el contexto del usuario.

Aquí un ejemplo conceptual de cómo se estructura la interacción:

import { Dialog, DialogContent, DialogTrigger } from "@radix-ui/react-dialog";

interface ProductDrawerProps {
  productImages: string[];
  // ... otras props
}

const ProductDrawer = ({ productImages }: ProductDrawerProps) => {
  return (
    <div className="product-drawer-container">
      {/* Contenido del drawer del producto */}
      <Dialog>
        <DialogTrigger asChild>
          <img 
            src={productImages[0]} 
            alt="Product" 
            className="cursor-pointer"
          />
        </DialogTrigger>
        <DialogContent className="lightbox-content">
          {/* Aquí iría el carousel de imágenes y la funcionalidad de zoom */}
          {productImages.map((src, index) => (
            <img key={index} src={src} alt={`Product view ${index + 1}`} />
          ))}
          {/* Botón para cerrar el lightbox */}
        </DialogContent>
      </Dialog>
      {/* Más detalles del producto */}
    </div>
  );
};

Este patrón de anidamiento de Dialog es crucial para una UX fluida, donde las modales no interfieren entre sí y el flujo de navegación es intuitivo.

Búsqueda Potenciada y UX General

Además de las mejoras visuales, potenciamos significativamente la funcionalidad de búsqueda del catálogo. Anteriormente, la búsqueda se limitaba al nombre y la descripción del producto. Ahora, el motor de búsqueda también matchea por categoría, subcategoría y tags, ofreciendo resultados mucho más relevantes y completos para los usuarios. Esto reduce la frustración y mejora la capacidad de descubrimiento de productos.

Otras mejoras incluyen:

• Modal de escritorio: Se implementó un scroll interno y un footer fijo para el botón "Añadir al carrito", garantizando que este siempre esté visible, incluso con productos que tienen muchos extras.
• Modal de bienvenida: Una breve secuencia de tres pasos con emojis y el logo de TuTiendaWeb, que se muestra una única vez por navegador para cada tienda, proporcionando una introducción amigable y no intrusiva.

Robustez y Desarrollo Local con Firebase Emulator

La implementación de estas características vino acompañada de mejoras en la robustez del código. Se aplicaron técnicas de memoización (useCallback, useMemo) en componentes clave como ImageGallery y ProductModal. Por ejemplo, la detección de la proporción de imagen ahora está memoizada y se resetea basándose en la URL de la imagen (más estable) en lugar de la identidad del array. Esto previene re-renderizados innecesarios y mejora el rendimiento general, especialmente con productos que manejan múltiples imágenes.

import React, { useState, useEffect, useCallback } from 'react';

interface ImageProps {
  imageUrl: string;
}

const ProductImageDisplay: React.FC<ImageProps> = ({ imageUrl }) => {
  const [aspectRatio, setAspectRatio] = useState<string>('4/3');

  const calculateAspectRatio = useCallback((url: string) => {
    if (!url) return;
    const img = new Image();
    img.src = url;
    img.onload = () => {
      const ratio = img.width / img.height;
      if (ratio > 1.2) {
        setAspectRatio('landscape'); // Horizontal
      } else if (ratio < 0.8) {
        setAspectRatio('portrait'); // Vertical
      } else {
        setAspectRatio('square');   // Cuadrado o similar
      }
    };
  }, []); // Dependencias vacías, solo se crea una vez

  useEffect(() => {
    calculateAspectRatio(imageUrl);
  }, [imageUrl, calculateAspectRatio]);

  return (
    <div 
      className={`
        relative overflow-hidden 
        ${aspectRatio === 'portrait' ? 'h-full w-auto' : 'w-full h-auto'}
      `}>
      {/* ... Lógica para el efecto frosted glass o ajuste de imagen */}
      <img src={imageUrl} alt="Product" className="object-cover w-full h-full" />
    </div>
  );
};

Adicionalmente, se resolvió un problema crítico para el desarrollo local: la subida de imágenes en modo emulador de Firebase Storage. Ahora, las URLs de las imágenes subidas apuntan correctamente al emulador, permitiendo un flujo de trabajo de desarrollo sin problemas que antes requería apuntar a producción o workarounds. Esto está controlado por variables de entorno, asegurando que la configuración de producción no se vea afectada.

Estas mejoras en TuTiendaWeb no solo enriquecen la experiencia del usuario final, haciéndola más atractiva y funcional, sino que también optimizan el proceso de desarrollo y la estabilidad del código base. Un claro ejemplo de cómo la atención al detalle en la UI/UX y la infraestructura subyacente puede generar un gran impacto.

Generated with Gitvlg.com