Portafolio · E-commerce · Miel cruda
Un Millón de Flores
Miel cruda con pedidos por WhatsApp y panel de administración.
- Cliente
- Un Millón de Flores
- Tipo
- Sitio web
- Año
- 2025
- Estado
- En línea
El encargo
Qué se resolvió.
Tienda en línea para una marca de miel de floraciones nativas: armador de pedidos en tres pasos que cierra por WhatsApp, contenido editorial de la Academia de la Miel y panel de administración para precios, productos y campañas de temporada.
Un Millón de Flores vende una sola miel: cruda, sin filtrar, envasada en vidrio retornable. No hay pasarela de pago ni checkout — la venta se cierra por WhatsApp — así que el sitio no podía ser una tienda genérica con carrito y tarjeta. Tenía que hacer dos cosas distintas: contar por qué esa miel es distinta antes de pedirla, y dejar que el dueño cambie precios, productos y campañas sin tocar código.
La solución es un sitio en Astro con islas de React para lo interactivo (el comparador de frascos, la calculadora de dosis, el armador de pedido) y un panel propio en `/admin` donde vive todo lo que el cliente cambia — organizado por página del sitio, no por concepto técnico, para que nunca haya que adivinar qué pestaña edita qué.
En simple: el sitio no cobra nada — arma el pedido y lo entrega listo por WhatsApp, con el mensaje ya redactado. Esa misma acción guarda una copia en Firestore, así que el pedido aparece solo en "Pedidos y ventas" sin que nadie lo tipee dos veces. Todo lo que el dueño cambia — precios, productos, la campaña de temporada — se edita desde /admin y se refleja al instante, sin volver a desplegar el sitio.
La portada como recorrido, no como vitrina
Cada sección de la portada prepara la siguiente: primero el criterio, después el hábito, al final el color del frasco que te va a tocar.
- 1
Un comparador con fotos reales, no ilustraciones
Dos tomas de frascos reales normalizadas al mismo encuadre; un input de rango invisible sobre el gráfico mueve la línea con mouse, dedo o teclado sin reimplementar nada.
- 2
La Cucharadita: la dosis como escala interactiva
El visitante elige su perfil (población general, control de peso, deportistas, garganta irritada) y ve la dosis marcada sobre una regla de 0 a 30 gramos — el puente entre "cómo la hacemos" y "cuánta te conviene".
- 3
Los Tres Ámbares son informativos, no un selector de compra
Se vende una sola miel; el tono del frasco lo decide la cosecha, no el cliente. La sección existe para que quien recibe un frasco entienda por qué le tocó ese color.
Cómo se compra sin pasarela de pago
Un armador de pedidos en tres pasos que termina en un mensaje de WhatsApp ya redactado, no en un checkout.
- 1
Tres pasos, total siempre visible
Formato → región y forma de entrega → cuántos frascos devuelves. El total se recalcula en vivo y el botón final abre WhatsApp con el pedido ya escrito.
- 2
Se vende por peso, no por volumen
Un kilo de miel ocupa unos 700 ml, así que el frasco se ve más chico de lo que uno espera — el sitio lo explica antes de que el cliente se confunda.
- 3
Pedir por WhatsApp también guarda el pedido
El mismo clic que abre WhatsApp deja una copia en Firestore: por eso el pedido aparece solo en el panel, sin que el dueño tenga que copiarlo del chat a mano.
El panel de pedidos y su contraparte en el sitio
El dueño mueve el pedido por sus estados; el cliente solo ve un mensaje de WhatsApp ya listo.
Un pedido nace "Por procesar", no pagado
Avanza Confirmado → En preparación → Listo → Entregado a medida que el dueño lo actualiza. Cancelar es una acción aparte, con motivo, para que no sea un clic de más en un menú.
Solo "Entregado" cuenta como venta real
Las estadísticas de kilos vendidos y ganancias se calculan únicamente sobre pedidos entregados — es la única confirmación real de que la venta se concretó.
Búsqueda, filtros, CSV y boleta no oficial
Filtra por estado, región y fecha; exporta a Excel; genera un PDF de boleta no oficial por pedido, directo desde la fila.
El cliente nunca ve un estado de pedido
Para él, la compra termina cuando se abre WhatsApp con el mensaje redactado — el ciclo de estados es una herramienta del dueño, no algo que el sitio le muestre.
Dos números de WhatsApp, uno por región
Magallanes y Región Metropolitana tienen canales separados; el armador elige el correcto solo, según dónde esté el cliente.
Precios y descuento por envase, un solo lugar de verdad
Formato, reparto y el descuento por frasco devuelto salen de un único documento en Firestore — el mismo que alimenta la banda del envase retornable más abajo en la portada.
El panel valida el acceso en el propio cliente y marca la sesión con localStorage — no es autenticación real todavía. Por eso esta ficha usa la pantalla de acceso, no capturas del panel ya adentro.
La Academia de la Miel
El motor de SEO del sitio: cada artículo ataca una búsqueda real y cierra empujando al catálogo.
- 1
Agregar un artículo es agregar un archivo
Content Collections de Astro sobre Markdown: un .md nuevo en src/content/academia/ aparece solo en /academia, en la portada, en "seguir leyendo" y en el sitemap.
- 2
16 artículos reales ya publicados
Organizados en cinco pilares (Salud, Consumo, Producción, Cocina, Abejas), cada uno con su propio tiempo de lectura y fecha.
- 3
FAQ opcional en el frontmatter, JSON-LD automático
Basta con agregar preguntas y respuestas al artículo para que se genere el bloque FAQ visible y su schema FAQPage — sin tocar el layout.
- 4
Los artículos se citan entre sí y desde la portada
El comparador de frascos enlaza directo a "miel cruda vs. miel industrial"; la Cucharadita, a la guía completa de dosis diaria — la Academia no es un blog aparte, es parte del argumento de venta.
Envase retornable y campaña en vivo
Dos piezas que cambian solas cuando el dueño edita un dato en el panel, sin que nadie tenga que avisarle al sitio.
- 1
Cuatro pasos fijos, un monto editable
Terminar, enjuagar y devolver el frasco no cambian nunca; el descuento del cuarto paso sale del mismo documento de precios que usa el armador de pedidos.
- 2
El flyer de campaña escucha Firestore en vivo
Con onSnapshot, no con una carga única: si el dueño cambia la imagen o la fecha de cierre mientras alguien tiene el sitio abierto, el cambio llega sin recargar la página.
- 3
La campaña se apaga sola
Se abre una vez por visita (sessionStorage) y termina en la fecha que fijó el dueño, con cuenta regresiva en vivo — no depende de que alguien la desactive a mano el día que corresponde.
Con qué habla el sistema.
Firebase · Firestore y Storage
Fuente única de verdad para precios, productos, campaña y banner, con nomenclatura umdf_ para no cruzarse con otras tiendas de la misma plantilla.
WhatsApp Business
Cierre de venta por enlace directo (wa.me), con el mensaje ya redactado y el canal correcto según la región del cliente.
Astro Content Collections
La Academia de la Miel: artículos en Markdown con JSON-LD automático (Article, FAQPage) para SEO, sin tocar código por publicación.
Compresión de imágenes en el navegador
Cada foto que el dueño sube desde el panel se comprime a menos de 500 KB antes de llegar a Storage, sin depender de un servicio externo.
¿Tienes un proyecto parecido?
Cuéntanos qué necesitas. Te respondemos con un plan concreto para tu caso, no con una plantilla genérica.