Un mensaje de Navidadhecho paracada niño.
Videos personalizados, cartitas y sorpresas de Papá Noel.
Una tienda de Navidad en React que funciona dentro de WordPress, en dos identidades.
- React 18.3
- TypeScript 5.9
- Webpack 5
- Tailwind 3.4
- WooCommerce REST
- JWT
Un mensaje de Navidadhecho paracada niño.
Videos personalizados, cartitas y sorpresas de Papá Noel.
- React 18.3
- TypeScript 5.9
- Webpack 5
- Tailwind 3.4
- WooCommerce REST
- JWT
Una tienda de Navidad en React que funciona dentro de WordPress, en dos identidades.
- React 18.3
- TypeScript 5.9
- Webpack 5
- Tailwind 3.4
- WooCommerce REST
- JWT
La tienda en números
Un catálogo entero detrás de cada puerta.
Los números de esta tienda salen del código: el catálogo, las fichas de pedido, las dos identidades y el área del cliente.
La Navidad llega en
La misma cuenta regresiva que abre la tienda, en vivo hasta el 25.
Productos en el catálogo
Videos, mensajes, historias, cartitas, paquetes y WhatsApp, cada uno con su código en WooCommerce.
Líneas de producto
De la invitación de Papá Noel a las historias bíblicas, cada línea con su vitrina.
Campos de personalización
21 campos de pedido y 7 de dirección; cada producto pide solo los suyos.
Identidades en la misma tienda
Papá Noel y Navidad de fe, cambiadas con un solo interruptor.
Pestañas en el área del cliente
Resumen, pedidos, videos, perfil y configuración.
Puntos en el editor visual
Textos, imágenes y espacios ajustables en la propia página.
- React 18.3
- TypeScript 5.9
- Webpack 5
- Tailwind 3.4
- WooCommerce REST
- JWT
- Embla Carousel 8.6
- react-snowfall 2.3
El catálogo
Ocho líneas de regalo, 21 productos.
Cada línea tiene su vitrina, y cada producto, su precio y su plazo en el código. Los videos y los mensajes llegan por el área del cliente; las cartitas, en PDF o por correo.
Invitación de Papá Noel
Papá Noel llama al niño por su nombre para escribir la cartita: simple, mágica o premium.
Papá Noel responde
La respuesta a la cartita, en video, para el día de Navidad.
Mensajes cristianos
Una bendición para el niño, una historia bíblica personalizada o un mensaje para toda la familia.
Historias bíblicas
Del cuento corto al relato completo del nacimiento de Jesús, con el niño dentro de la historia.
Combos y paquetes
Invitación con respuesta, el paquete de hermanos y el paquete familia, para hasta 3 niños.
Cartitas digitales
La carta de Papá Noel en PDF: la que pide la cartita y la que responde en Navidad.
Cartitas por correo
Las mismas cartas impresas, con el sello del Polo Norte, entregadas por correo.
WhatsApp de Papá Noel
Papá Noel en el WhatsApp de la familia, con audio y stickers: antes de Navidad y el mismo día.
Precios del catálogo del código, en reales.
La personalización
Cada pedido llega con una ficha.
El video llama al niño por su nombre porque el pedido lleva sus datos. Cada producto tiene su ficha, revisada antes de ir al carrito.
Una ficha por producto
Son 21 fichas: la invitación simple pide nombre y edad; la premium pide cuatro campos más, como la característica especial.
Seis tipos de campo
Texto, número, texto largo, lista, elección y dirección, cada uno con su límite.
Revisada antes del carrito
Obligatorio, tamaño máximo, mínimo y máximo y formato: el mensaje dice qué corregir.
validateField()El código postal llena la dirección
En las cartitas por correo, el código postal busca la calle, el barrio, la ciudad y el estado.
viacep.com.brLa ficha sigue con el artículo
El artículo entra al carrito con su ficha, y el servicio de pedidos graba cada campo en el pedido de WooCommerce.
_natal_nome · _natal_idade
Video Papá Noel Invitación Premium
- Nombre del niñoTexto · hasta 50Ana
- EdadNúmero · de 1 a 126La edad debe ser como máximo 12
- Hermano o hermanaTexto · opcionalPedro
- ¿Cómo se portó este año?ElecciónSe portó muy bien
- Escenario del videoListaPolo Norte
- Una característica especialTexto · hasta 100Le encantan los dinosaurios
Ficha revisada · lista para el carrito
02/Navidad de fe
La Navidad también es un mensaje de fe.
Mensajes personalizados para celebrar el nacimiento de Jesús en familia.
La tienda tiene dos identidades y un solo interruptor. La misma pantalla cambia el logo, los colores, el video de arriba, el color de la nieve y el producto destacado, y la elección queda guardada en el navegador.
Papá NoelLa portada 
Navidad de feLa portada 
Papá NoelCómo funciona 
Navidad de feCómo funciona 
Papá NoelEl catálogo 
Navidad de feEl catálogo 
Papá NoelLo que recibes 
Navidad de feLo que recibes
- 1 interruptorUna elección cambia la identidad entera, sin salir de la página.
- 27 archivosLos componentes que cambian de cara con ella.
- Nieve doradaHasta la nieve que cae en la página pasa de blanca a dorada.
- GuardadaLa elección queda en el navegador y vuelve en la próxima visita.
La entrega
El video llega con reglas.
Después del pedido, el video vive en el área del cliente, con plazo, límite de visualizaciones y marca de agua. El reproductor revisa cada regla antes de reproducir.
Plazo de acceso
Pasada la fecha, el reproductor se cierra y muestra el aviso de acceso vencido. Con 3 días o menos, la cuenta cambia de color.
expiresAt < ahoraLímite de visualizaciones
Cada vez que el video se reproduce, la visualización queda registrada; en el límite, ya no abre.
currentViews >= maxViewsSolo se reproduce activo
Mientras se produce, el video queda pendiente; listo, queda activo; vencido, expira.
pending · active · expiredMarca de agua del pedido
El número del pedido queda sobre el video durante toda la reproducción.
Sin descargar
Sin botón de descarga, pantalla completa ni ventana flotante; el clic derecho, el Ctrl+S y el arrastre quedan bloqueados.
Para que la familia lo vea
El enlace del video sale por WhatsApp o por correo.
El área del cliente
- Resumen
- Pedidos
- Videos
- Perfil
- Configuración
Niveles por el total gastado
- BronceHasta R$ 149
- PlataDesde R$ 150
- OroDesde R$ 300
- DiamanteDesde R$ 500
Por dentro
Una tienda entera dentro de WordPress.
La app no reemplaza el sitio: entra en una página de WordPress, habla con WooCommerce y llega al navegador en un solo paquete, con la versión en el nombre del archivo.
WordPress y WooCommerce
Productos, pedidos, clientes y cupones por la API REST de WooCommerce; el inicio de sesión entra por JWT. Las rutas propias de la tienda (videos, pedidos y personalización) tienen su cliente en la app.
/wc/v3 · /jwt-auth/v1 · /natal/v1Una página del tema
La app se monta en un div de la página, y un CSS propio fuerza el ancho completo dentro del tema Astra.
#natal-rootUn solo paquete
Webpack genera un paquete UMD llamado NatalApp; React viene de la propia página, fuera del paquete.
library: NatalApp · externals: reactLa versión en el nombre del archivo
El version.json entra en el nombre: natal.bundle.v208.js y main.v208.css. Versión nueva, archivo nuevo, y el navegador no usa la copia vieja.
version.json → v208El editor visual
Shift+F activa la edición en la propia página: 32 puntos de texto, imagen y espaciado, con deshacer y rehacer, grabados en el código por un servidor local.
Tunable · element-styles.ts
Las tecnologías
De qué está hecho, pieza por pieza
Una tienda que corre dentro de un sitio WordPress: la vidriera está hecha en React y conversa con WooCommerce para los pedidos y la cuenta del cliente. Elige una pieza para ver qué hace aquí y en qué archivo está.
11tecnologías, en 3 capas
Pantalla
Servidor
Construcción
Las pantallas
La tienda, pantalla por pantalla.
Las dos identidades y el acceso a la cuenta, como los ve el cliente.
GTA RP: scripts y herramientasBlackout Smartphone