¡Estoy emocionado de compartir con ustedes la versión 5.0 de nuestro tutorial de vCard! Esta nueva versión marca un salto gigantesco en la evolución del proyecto: ¡ahora contamos con un plugin WordPress dedicado llamado OV Card Menu!
¿Quieres ver todo en acción? Te invito a ver el video de presentación donde te muestro todas las nuevas funcionalidades y el increíble potencial de esta versión 5.0. Podrás ver en tiempo real cómo funciona el sistema de combos, descuentos automáticos, integración con Mapbox y mucho más.
La evolución completa de nuestra vCard
Desde que comenzamos este proyecto, hemos recorrido un largo camino:
- Versión 1.0: Diseñamos una tarjeta de presentación digital mobile first para restaurantes con Divi Builder
- Versión 2.0: Sincronizamos la tarjeta con Google Sheets para gestionar dinámicamente el menú
- Versión 3.0: Agregamos un carrito de compras completo con opciones personalizables
- Versión 4.0: Incorporamos sistema de impuestos, cupones, horarios, alérgenos y mucho más
¿Por qué la versión 5.0 es un cambio revolucionario?
La versión 5.0 representa el momento en que nuestro proyecto pasó de ser un ejercicio de Divi a convertirse en un producto profesional. Hemos desarrollado el plugin OV Card Menu, que transforma completamente la experiencia de implementación.
El problema que resolvimos
En versiones anteriores, implementar la vCard implicaba:
- Copiar y pegar múltiples códigos JavaScript y CSS
- Gestionar manualmente las actualizaciones
- Configurar todo desde cero en cada nueva instalación
- Depender de código personalizado en cada página
La solución: Plugin OV Card Menu
Ahora con OV Card Menu, todo el sistema está encapsulado en un plugin profesional que ofrece:
- ✅ Instalación en un clic: Instala el plugin como cualquier otro plugin de WordPress
- ✅ Configuración visual: Metabox intuitivo en el editor de páginas con selectores de color integrados
- ✅ Actualizaciones automáticas: Mejoras y correcciones sin necesidad de modificar código
- ✅ Compatible con Divi 4 y Divi 5: Protección CSS que detecta automáticamente la versión
- ✅ Sistema de archivos optimizado: CSS y JavaScript organizados profesionalmente
- ✅ Cache inteligente: Sistema de caché configurable para optimizar rendimiento
- ✅ Múltiples catálogos: Crea tantas vCards como necesites en diferentes páginas
- ✅ Panel de administración: Configuración centralizada y página de ayuda integrada
¿Qué incluye la versión 5.0?
Además del plugin, hemos agregado funcionalidades completamente nuevas:
🎯 Sistema de Combos
¡La función más esperada! Ahora puedes crear productos tipo combo donde el cliente debe elegir una cantidad exacta de productos. Por ejemplo:
- Combo 3 Empanadas: El cliente elige exactamente 3 sabores (2 de jamón, 1 de carne, etc.)
- Combo Familiar: Selecciona 4 pizzas con los sabores que prefiera
- Desayuno Completo: Elige 2 bebidas + 1 pastel
💰 Descuentos Individuales
Ahora cada producto puede tener su propio porcentaje de descuento:
- Se muestra un badge con el descuento (ej. «-15%»)
- El precio original aparece tachado
- El precio final con descuento se muestra destacado
- Completamente configurable desde Google Sheets (columna I)
📊 Descuentos Automáticos Progresivos
Sistema inteligente de descuentos por monto de compra:
Subtotal $500 → 10% de descuento Subtotal $1000 → 15% de descuento Subtotal $1500 → 20% de descuento
Se aplica automáticamente el mayor descuento alcanzado.
🍽️ Modos de Servicio Flexibles
Configura cómo opera tu negocio:
- All: Delivery + Local (recoger) + Para comer aquí
- Delivery: Solo envío a domicilio
- Pickup: Solo recoger en local
- Dine-in: Solo consumo en el lugar
Con selección de mesas cuando el modo «Para comer aquí» está activo.
🗺️ Integración con Mapbox
Sistema de ubicación avanzado:
- Geocodificación de direcciones
- Cálculo automático de distancia desde el negocio
- Dos modos de envío:
- Por zonas: Costos fijos por zona
- Por distancia: Costo por kilómetro
📝 Registro de Pedidos en Google Sheets
Todos los pedidos se guardan automáticamente en una hoja «Pedidos» con:
- Número de orden único
- Fecha y hora con zona horaria configurada
- Datos del cliente
- Mensaje completo del pedido
- Total y método de pago
- Estado del pedido (Pendiente/Entregado/Cancelado)
- Tipo de servicio
🎨 Sistema de Colores Unificado
Variables CSS globales que permiten personalización completa:
- 9 colores configurables (primario, secundario, acento, éxito, peligro, advertencia, info, enlaces, párrafos)
- Configuración en 3 niveles de prioridad: Shortcode → Página → Global
- Color picker visual en el metabox de la página
⏰ Horarios con Múltiples Intervalos
Ahora puedes definir varios rangos horarios por día:
Lunes: 09:00-14:00 | 18:00-23:00 Martes: 09:00-14:00 | 18:00-23:00 Domingo: Cerrado
🔐 Mejoras de Seguridad
- Prevención de modificación de mensajes de WhatsApp
- Validación de datos en el servidor (Google Apps Script)
- Sanitización completa de entradas
Estructura de Google Sheets Actualizada
La hoja «Menu» ahora tiene 10 columnas (A-J):
- Columna A – Nombre: Nombre del producto
- Columna B – Descripción: Descripción del producto
- Columna C – Imagen: URL de la imagen
- Columna D – Precio: Precio base del producto
- Columna E – Sección: Categoría del menú
- Columna F – Opciones: Opciones y modificadores del producto
- Columna G – Combo: Cantidad de productos para combos (0 = producto normal)
- Columna H – Alérgenos: Lista de alérgenos separados por coma
- Columna I – Descuento: Porcentaje de descuento individual (0-100)
- Columna J – En Stock: Disponibilidad del producto (TRUE/FALSE)
Hoja Config Expandida
La configuración ahora incluye 27 parámetros organizados en secciones:
📱 Configuración Básica
currency, whatsappNumber, vCardEnabled, maintenanceMessage
💰 Impuestos
taxEnabled, taxRate, taxIncluded, taxName
🎟️ Cupones y Descuentos
coupons, autoDiscounts (¡nuevo!)
🚚 Envío y Zonas
shippingZones, mapboxToken, businessLocation, shippingMode, shippingCostPerKm, shippingMessage
🕐 Horarios
timeZone, businessHours (ahora con múltiples intervalos), closedMessage
🍽️ Modos de Servicio (¡nuevo!)
serviceMode, tableNumbers, tableLabel
📄 Términos y Pagos (¡nuevo!)
termsUrl, termsType, termsContent, bankTransferInfo
Proceso de Implementación Simplificado
Gracias al plugin, el proceso ahora es increíblemente simple:
- Instala el plugin OV Card Menu
- Crea tu hoja de Google Sheets con el menú
- Publica el script de Google Apps y copia la URL
- Crea una página en WordPress
- Pega la URL en los ajustes de la página → URL de Google Sheets
- Habilita Divi Builder y guarda cambios
- Importa el JSON vCard Restaurante v5
- ¡Publica y listo!
Compatible con Divi 4 y Divi 5
El plugin incluye protección CSS automática que detecta:
- Divi 4: .et-fb-preview–wireframe
- Divi 5: .et-db, .et-vb-root-ancestor
Funciona perfectamente en ambas versiones sin configuración adicional.
¿Para quién es este proyecto?
Este tutorial es mucho más que una guía: es un proyecto de negocio completo. Puedes:
- ✅ Ofrecer vCards personalizadas como servicio
- ✅ Vender implementaciones a restaurantes y negocios locales
- ✅ Crear una agencia especializada en menús digitales
- ✅ Monetizar el servicio con mantenimiento mensual
- ✅ Expandir a todo tu país con un modelo de franquicia
El valor real de este proyecto
Siendo completamente honesto, este proyecto con plugin incluido tiene un valor comercial de más de $599 dólares. En el mercado, soluciones similares se cobran como:
- Setup inicial: $299-499
- Mantenimiento mensual: $49-99
- Personalizaciones: $50-150 cada una
Sin embargo, está incluido en los Tutoriales Exclusivos de la Academia OV DIVI
Lo que aprenderás en este tutorial
- Instalación y configuración del plugin OV Card Menu
- Creación de páginas optimizadas para vCards en WordPress
- Configuración completa de Google Sheets con la estructura actualizada
- Publicación y configuración de Google Apps Script
- Importación y personalización del layout JSON en Divi Builder
- Configuración de colores personalizados mediante metabox
- Implementación de productos con combos y descuentos
- Configuración de horarios de negocio con múltiples intervalos
- Integración de Mapbox para cálculo de envíos
- Configuración de métodos de pago y zonas de entrega
- Personalización de cupones y descuentos automáticos
- Configuración de modos de servicio (delivery, local, dine-in)
- Registro automático de pedidos en Google Sheets
- Optimización mobile-first para experiencia de usuario perfecta
Google Apps Script v5.0
El script también fue completamente refactorizado con:
- Función «recordOrder()» para registrar pedidos
- Soporte para múltiples intervalos horarios
- Procesamiento de descuentos automáticos
- Manejo de combos
- Validación de datos mejorada
- Manejo robusto de errores
🚀 Próximas Actualizaciones
Este proyecto sigue evolucionando y ya estamos trabajando en nuevas funcionalidades que llevarán la vCard a un nivel completamente profesional:
📸 Galería de imágenes en el popup: Los productos podrán mostrar múltiples imágenes con un slider interactivo para que los clientes vean el producto desde diferentes ángulos.
🖨️ Envío de tickets a consola de comandos: Integración directa con impresoras de tickets térmicas para imprimir pedidos automáticamente en la cocina o barra.
💳 Integración con pasarelas de pago: Acepta pagos en línea directamente desde la vCard con PayPal, Stripe y otras plataformas de pago seguras.
📊 Dashboard de gestión en tiempo real: Panel administrativo completo donde los restaurantes podrán ver pedidos entrantes al instante, actualizar estados de pedidos (recibido, en preparación, listo, entregado), imprimir tickets directamente desde el navegador, enviar órdenes a comanda automáticamente, ver estadísticas y reportes de ventas, y recibir notificaciones en tiempo real de nuevos pedidos.
Estas actualizaciones transformarán completamente el plugin en una solución POS (Point of Sale) completa para restaurantes, cafeterías y negocios de comida. Mantente atento a los próximos lanzamientos en los Tutoriales Exclusivos.
Conclusión
La versión 5.0 con el plugin OV Card Menu representa la profesionalización completa del proyecto. Ya no es solo un tutorial de Divi, es un producto comercial real que puedes implementar, vender y escalar.
El salto de código personalizado a plugin hace que:
- La implementación sea 10 veces más rápida
- El mantenimiento sea infinitamente más sencillo
- Las actualizaciones sean automáticas
- La experiencia sea profesional de principio a fin
No pierdas la oportunidad de dominar esta tecnología y crear tu propio negocio de vCards digitales.
¡Te espero en el tutorial!
¿Listo para dar el salto a la versión 5.0? Únete ahora a los Tutoriales Exclusivos de la Academia OV DIVI y accede a este increíble proyecto completo.
0 comentarios