Referencia 06 · Tienda mayorista con cotizador por WhatsApp y club de miembros
Distrismoke, tienda mayorista
La web mayorista que diseñé y construí, la que llevé a Google y la que conecté con la Oficina de agentes para el contenido, los videos y las ventas.
En 3 meses: 153 clics y 2.220 impresiones en Google (Search Console, 2026-10-09).
Es para tenderos y revendedores de todo Colombia, casi todos desde el celular. Soy socio del negocio.
Esta ficha cuenta cómo se hizo y cómo se vende, no lo que se vende: el catálogo no se muestra aquí.
Lo quiero para mi proyectoQué resuelve
Que un pedido mayorista salga armado y listo para WhatsApp.
El problema: el comprador mayorista recibe catálogos sueltos y chats, y de ahí tiene que armar su pedido.
Es para tenderos y revendedores que compran por mayor. La usan ellos y el vendedor que recibe el pedido por WhatsApp.
Probador
Arma una cotización de muestra y llena un carnet de ejemplo.
Qué mirar (3 pasos)
- Cambia las cantidades de los productos de muestra. La tienda aplica el pedido mínimo.
- Mira las sugerencias (hasta 4) para completar el mínimo, y el total.
- Escribe un nombre inventado: el carnet del club se llena en vivo. Cierra con «Ver el mensaje que se enviaría».
El probador es la demo para que la pruebes aquí. Usa productos genéricos («Producto de muestra 1, 2 y 3»), sin fotos ni nombres reales de la tienda.
No hay video de la tienda. El botón final no abre WhatsApp: solo muestra el mensaje que se enviaría.
Datos de ejemplo.
Cantidad en unidades
Pedido mínimo 12 unidades
Total 4 unidades
Para completar el mínimo
No uses tu nombre real: esto es una demo y no guarda nada.
Este botón no abre WhatsApp. El mensaje es de ejemplo.
Alternativa en texto
- El mensaje que sale es corto: una línea por producto, con su cantidad, y el total.
- El carnet se llena mientras escribes y, al registrarse, cae un sello de lacre animado.
Funciones
Qué hace, por áreas.
Cotizador por WhatsApp
- Arma el pedido con cantidades que se editan a mano.
- Escribe un mensaje corto de WhatsApp con una línea por producto y el total.
- Sugiere hasta 4 productos para completar el pedido mínimo.
- Aplica el mínimo del pedido y el mínimo por producto.
Club con carnet
- Registra al comprador con una trampa antibots y validación de WhatsApp y de NIT, el identificador tributario.
- Bloquea el doble envío y avisa con honestidad si falla la red.
- Guarda el registro en una hoja de cálculo de Google.
- Llena el carnet de miembro en vivo y cierra con un sello de lacre animado.
Catálogo y páginas
- Muestra un libro mayor plegable con todas las referencias, que buscadores e IA también pueden leer.
- Responde 8 preguntas frecuentes alineadas con los datos para buscadores.
- Marca los estados de agotado, retirado, más vendido y nuevo.
- Muestra un aviso visible de solo mayores de edad.
Material derivado del mismo catálogo
- Una tarjeta física del club, lista para imprimir (85,6 x 54 mm a 300 dpi, con 3 mm de sangrado).
- 7 catálogos en PDF por categoría.
- Una imagen de 1080 x 1080 para compartir por WhatsApp.
Todo el proceso: la web, Google, los videos y las ventas
Lo que hice más allá de una página bonita, de principio a fin.
Esta sección cuenta el trabajo y deja el catálogo fuera: aquí no se muestran productos ni precios.
1. Diseñar y construir la web
- Una tienda mayorista hecha a la medida: identidad propia, catálogo, cotizador por WhatsApp y club de miembros con carnet que se llena en vivo.
- Una sola fuente de verdad: la tienda, los datos para buscadores, la tarjeta física del club y 7 catálogos en PDF salen del mismo catálogo. Una prueba avisa si se desincronizan.
- La primera carga bajó de 9,30 MB a 211 KB (98 % menos), medido el 2026-08-19: abre rápido en el celular de un tendero.
2. Aparecer en Google (SEO y GEO)
- En los últimos 3 meses la tienda sumó 153 clics y 2.220 impresiones en Google, con un CTR de 6,9 % y una posición media de 7,8 (Search Console, informe del 2026-10-09).
- Un mes antes, la misma ventana de 3 meses marcaba 25 clics y 340 impresiones, con posición media de 9,7 (informe del 2026-09-07). Son visitas desde Google, no ventas.
- El trabajo detrás: palabras clave en texto fijo que Google puede leer, la descripción que muestra Google recortada de 177 a 158 caracteres, búsquedas por categoría con ciudad y datos estructurados con la identidad del negocio, alineados con su ficha de Google.
- Search Console ya lee los datos de la tienda en sus informes de fragmentos de productos y fichas de comerciantes.
- Las referencias del catálogo viven en el HTML (no escondidas detrás de clics) para que buscadores y asistentes de IA puedan leerlas y citar la tienda.
3. Automatizar el contenido y la edición de videos
- Los videos de redes no se editan a mano: mando los clips por Telegram, explico cómo quiero el video y el Editor de la Oficina de agentes corta, subtitula, ajusta la voz, pone transiciones, renderiza y me devuelve el Reel listo (ficha 01).
- Si algo no me gusta, pido el cambio en el mismo chat y el Editor conserva los clips y lo ya hecho.
- El Estratega arma el plan de la semana y el Diseñador prepara láminas, carruseles e historias; el Revisor detiene lo que no cumple las reglas antes de que llegue a mí.
- La publicación es manual a propósito: el material llega a Telegram y yo decido qué sale y cuándo.
4. Vender
- El flujo: el comprador cotiza en la web, el pedido mínimo se aplica y el pedido sale por WhatsApp con una línea por producto.
- Para buscar compradores, la Oficina encuentra tiendas por municipio, verifica sus datos y prepara el primer mensaje; yo decido a quién escribir y escribo.
- No tengo cifras de ventas, pedidos ni conversión con evidencia. Si llegan, las pongo.
5. Redes y marca
- Piezas de marca sin producto: un perfil, fondos para las publicaciones y un carnet del club con frente y reverso.
- El contenido de redes sale de la Oficina de agentes y lo reviso antes de publicarlo.
6. Sostener
- Una compuerta de 729 comprobaciones: si una falla, no se construye y lo publicado queda intacto.
- Cuando el hosting anterior se quedó sin créditos, migré la tienda a Cloudflare en un día, el 26 de septiembre de 2026, con camino de vuelta atrás. Desde esa fecha está en producción.
Qué tiene detrás
Lo que pasa por dentro, en dos niveles. Elige el tuyo.
- El comprador entra desde el celular y arma su pedido en la tienda.
- La tienda calcula el total, aplica el mínimo y sugiere qué agregar para llegar a él.
- El pedido sale como un mensaje corto de WhatsApp, listo para enviar al vendedor.
- Si el comprador se registra en el club, un formulario guarda sus datos en una hoja de cálculo y su carnet se llena en vivo.
- Cada vez que actualizo el catálogo, un script revisa todo y publica solo si pasan las pruebas.
- Un solo archivo HTML (~10,8 MB, 3.051 líneas) con JavaScript puro, sin framework ni servidor, y el estado en localStorage. build.js saca las fotos incrustadas a archivos con hash de contenido y caché inmutable.
- build.js también genera el libro mayor, los datos estructurados (Store, WholesaleStore, WebSite, FAQPage y la lista del catálogo), robots.txt, sitemap.xml y _headers.
- publicar.js corre todos los archivos de prueba y, solo si pasan, construye dist/. Con --subir despliega a Cloudflare. Una prueba falla si los datos estructurados dicen algo que la tienda no muestra.
- El formulario del club va a Google Sheets por Apps Script. Es la única conexión saliente declarada: no hay servidor, base de datos ni login.
- Cloudflare Workers con archivos estáticos (wrangler.jsonc, assets en./dist), apex y www con dominio propio, workers_dev activo y preview_urls apagado. Se despliega con npx wrangler@4 deploy. Simulado
- Cabeceras desde build.js: CSP generada en el build y probada en un navegador real el 2026-08-19, HSTS de un año con includeSubDomains y preload, X-Frame-Options DENY, nosniff, Permissions-Policy restrictiva y caché inmutable en las fotos.
- SEO: palabras clave en texto estático rastreable. El libro mayor está plegado pero presente en el HTML; test-plegable.js falla si alguien lo oculta de verdad.
- content-visibility:auto por sección, con un modo html.nav-jump que dibuja todo antes de medir para que las anclas aterricen bien.
Despiece · 4 piezas conectadas
- 01La tienda de un solo archivo, con su build
- 02El club, con Google Sheets
- 03La publicación en Cloudflare
- 04El material derivado: PDF y tarjeta
Apps Script es el código que Google deja correr junto a una hoja de cálculo. Cloudflare Workers es el servicio que guarda y entrega los archivos de la tienda.
Composición y cuidados
Composición · Nº 06
Composición
- HTML, CSS y JavaScript puros: la tienda.
- Node: compila y publica.
- jsdom: corre las pruebas.
- sharp: procesa las fotos.
- Google Sheets con Apps Script: guarda el club.
- WhatsApp: recibe la cotización.
- Cloudflare Workers: hospeda la tienda.
- Search Console: mide cómo aparece en Google.
Dónde vive
- Cloudflare Workers con archivos estáticos, en un Worker propio y con dominio propio.
- Estuvo en Netlify hasta el 26 de septiembre de 2026.
Cuidados
- No tiene dependencias de ejecución: solo jsdom ^24.0.0 y sharp ^0.33.0, para desarrollo. Son rangos declarados, no versiones instaladas verificadas.
- El registro del club depende de un Apps Script de Google.
- No tiene Sentry ni analítica de comportamiento: la medición es Search Console.
Hecho en Manizales · 2026
Guía de tallas
Talla L: lleva 4 piezas conectadas por dentro. La regla: S de 1 a 2 piezas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
- La tienda de un solo archivo, con su build.
- El club, con Google Sheets.
- La publicación en Cloudflare.
- El material derivado: PDF y tarjeta.
Cifras de tamaño (verificado en el repositorio el 2026-10-08)
- 27 commits, del 2026-09-26 al 2026-10-07.
- 16 archivos de prueba.
- dist/ de 7,7 MB, con 114 archivos de fotos.
- 7 catálogos en PDF y 1 tarjeta física con frente y reverso.
- 0 dependencias de ejecución.
S de 1 a 2 piezas conectadas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
Certificado
Las pruebas que respaldan esta pieza.
Verificado en el repositorio · 2026-10-08
- 153clics desde Google en 3 meses (2.220 impresiones)Fuente: Search Console de distrismoke.com, informe del 2026-10-09
- 7,8posición media en Google (antes 9,7)Fuente: Search Console, informes del 2026-10-09 y del 2026-09-07
- 211 KBprimera carga (antes 9,30 MB)Fuente: HISTORIAL-CONFIRMADO.md, medido el 2026-08-19
- 729comprobaciones en 16 archivosFuente: CLAUDE.md y commit del 2026-10-07
- 27commitsFuente: git rev-list --count HEAD
Evidencia (verificado en el repositorio el 2026-10-08)
- 16 archivos de prueba y 729 pruebas escritas (conteo en el código; el repositorio las llama comprobaciones). El último commit corrigió el conteo de 731 a 729. No las ejecuté hoy.
- Compuerta de publicación: si falla una prueba, no se construye y lo publicado queda intacto.
- CSP generada en el build y probada en un navegador real el 2026-08-19; un archivo de pruebas de seguridad la cubre. La CSP es la regla que le dice al navegador qué puede ejecutar la página.
- HSTS de un año, X-Frame-Options DENY, nosniff y Permissions-Policy restrictiva.
- Primera carga de 9,30 MB a 211 KB (98 % menos), medido el 2026-08-19.
- En producción: respuesta 200 de Cloudflare con CSP y HSTS (curl del 2026-09-26).
Lo que no afirmo
- Lighthouse: no hay registro en mis fuentes.
- Ventas, pedidos ni conversión: no hay datos.
- Que los clics en Google sean ventas: miden clics, no pedidos.
- Que las pruebas pasen hoy: no las ejecuté.
- Sentry ni analítica de comportamiento: no encontré ninguna.
pruebas escritas (conteo en el código)
Lo quiero para mi proyectoUna tienda mayorista, para tu negocio
Si vendes al por mayor, tu catálogo cambia seguido y quieres que te pidan por WhatsApp, esto se parece a lo que necesitas.
Cifras de ventas no tengo, y no las voy a inventar.