Diseñé el sitio de una tienda de repuestos alrededor de WhatsApp

La primera decisión fue dejar algo por fuera. El sitio de Repuestos Alto no tiene carrito de compras ni pago en línea. El catálogo, cada página de producto y el formulario de estimado 3D terminan en el mismo lugar: un mensaje de WhatsApp con los datos ya escritos.

WhatsApp es el canal que el sitio pone primero, desde el botón de la portada hasta el botón flotante de las 40 páginas del mapa del sitio. Un carrito habría traído pagos, conteo de inventario y devoluciones. El inconveniente es claro: nadie puede pagar en el sitio, y un mensaje enviado de noche espera a que una persona responda.

En la primera versión, el contenido estaba dentro del código. Dieciséis días después del primer commit (la primera versión guardada del código), lo pasé a Sanity, un CMS alojado. Un CMS es una pantalla de edición para personas que no programan. Los mensajes de portada, los productos LED, las categorías, los servicios y las preguntas frecuentes vienen de ahí, y un marcador como {{LED}} permite al personal pintar una palabra con el naranja de la marca sin tocar código. Al día siguiente escribí una guía en español para el personal.

La mayoría de las páginas se arman por adelantado y se sirven desde una caché, así que una visita no espera al CMS. El detalle es que una edición publicada necesita una señal para aparecer. En agosto el proyecto sumó para eso una ruta de webhook firmada, que refresca las páginas en caché según el tipo de contenido. Las páginas clave además guardan texto de respaldo, para que el sitio no quede en blanco si el CMS no tiene nada que mostrar.

En agosto el catálogo LED sumó búsqueda y filtros. Sus 28 productos tienen códigos como POD5-954MD-02, y cada persona los escribe a su manera, así que la búsqueda ignora tildes, mayúsculas y guiones. Escribir «tamano» o «tamaño» da la misma lista, y un código escrito con guion o con espacio encuentra los mismos productos. Si alguien escribe un código exacto, ese producto sale primero.

Dos decisiones pequeñas pesan más de lo que parece. El filtro por tipo (pods, faros redondos, barras) se asigna a mano en el CMS para cada producto, porque el prefijo del código no indica la forma. Y la búsqueda, el tipo y el orden viajan en la dirección de la página, de modo que una vista ya filtrada se puede enviar por WhatsApp.

Ese enfoque sirve para 28 productos. Un catálogo de miles de artículos necesitaría un servicio de búsqueda dedicado.

ALTO 3D imprime réplicas de piezas automotrices, y el cliente necesita una forma de describir una pieza antes de visitar la tienda. Armé el formulario para que pida largo, ancho y alto, dónde se usará la pieza, qué tan resistente debe ser, el acabado y la cantidad. Sugiere un material y muestra una cifra aproximada. La sugerencia sigue las respuestas: PLA por defecto, ASA para piezas de exterior y ABS para piezas resistentes dentro del vehículo. El sitio explica cada material en una línea; ASA, por ejemplo, es la opción para exteriores porque resiste el sol.

La página dice con claridad que la cifra es aproximada. Luego abre WhatsApp con cada elección escrita en el mensaje. El formulario no llama a ningún servidor ni guarda nada. Eso lo mantiene simple, pero no existe una lista de solicitudes anteriores para revisar: viven en WhatsApp.

Cuatro páginas abren con una escena 3D hecha con Three.js: inicio, ALTO LED, ALTO 3D y la página de marca. Cada escena carga en el navegador después de la página, y su resolución está limitada para que los celulares trabajen menos. Las escenas son decoración, así que la página se lee incluso antes de que aparezcan.

El video promocional de 21.7 segundos también es código, escrito con Remotion. Eso valió la pena en marzo, cuando se quitaron cuatro marcas de vehículos del sitio: volví a generar el video desde el código, sin esas marcas, en lugar de editar el material a mano. En la página de inicio nunca arranca solo; el visitante presiona play.

Los efectos visuales suman código que cargar y mantener, así que dejo las escenas 3D y el video en las páginas que venden la idea. Las páginas de producto llevan fotos, especificaciones y un botón.

El sitio usa fotos propias de la tienda, como la pared de luces LED y la bodega. Las agregué en marzo, ya convertidas a WebP. Luego el servidor envía AVIF a los navegadores compatibles: para una foto de bodega de 1200 píxeles, eso significa 43,757 bytes en lugar de 91,164.

Las fotos suelen ser la parte más pesada de una página, así que conviene revisarlas en cualquier proyecto. En el catálogo, 28 de las 30 imágenes cargan de forma diferida, solo cuando se acercan a la pantalla.