Productos - La Botica del Restaurador de la Salud
// Configuración de Tailwind para usar la fuente Inter y colores de salud/bienestar
tailwind.config = {
theme: {
extend: {
colors: {
// Colores basados en el azul oscuro (#1E3A5F) y el verde (#28a745) de tu diseño
'primary-blue': '#1E3A5F',
'secondary-green': '#28a745',
'text-dark': '#333',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
boxShadow: {
'custom': '0 3px 10px rgba(0,0,0,0.08)',
'hover': '0 5px 15px rgba(0,0,0,0.1)',
}
}
}
}
/* Estilos específicos para la transición y la tipografía */
body { font-family: 'Inter', sans-serif; }
/* Aseguramos la visibilidad del foco en los botones */
.filtro-btn:focus, .btn-comprar:focus {
outline: 2px solid #28a745;
outline-offset: 2px;
}
/* Estilo para la lista de beneficios que simula tu diseño original (con círculos) */
.producto-beneficios {
list-style-type: none;
padding-left: 0;
}
.producto-beneficios li {
position: relative;
padding-left: 1rem; /* Espacio para el bullet */
margin-bottom: 0.3rem;
font-size: 0.875rem; /* text-sm */
color: #4a5568; /* gray-700 */
}
.producto-beneficios li:before {
content: "•";
position: absolute;
left: 0;
color: #28a745; /* secondary-green */
font-weight: 900;
}
Productos - Medicamentos Homeopáticos
Soluciones naturales para tu salud y bienestar
¡Advertencia de imagen! Algunas imágenes de producto no se cargaron correctamente. Por favor, verifica que todas las URLs son accesibles.
// --- DATOS DE PRODUCTOS (EXTRAÍDOS DE TU CÓDIGO) ---
// Número de teléfono de WhatsApp proporcionado por el usuario: +573118576670
const WHATSAPP_NUMBER = '573118576670';
const productos = [
{
id: 1,
nombre: "CIRCULENO",
precio: 100000,
categoria: "circulacion",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/circuleno02.png",
beneficios: ["Circulación", "Varices", "Trombosis"],
descripcion: "Tratamiento homeopático y botánico para desórdenes circulatorios."
},
{
id: 2,
nombre: "COLON PSYLLIUM",
precio: 100000,
categoria: "sistema-digestivo",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/colon01.png",
beneficios: ["Salud intestinal", "Gases", "Estreñimiento"],
descripcion: "Medicamento alternativo y regenerativo para la salud del colon."
},
{
id: 3,
nombre: "PROSTENO",
precio: 150000,
categoria: "sistema-urinario",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/prosteno01.png",
beneficios: ["Próstata", "Uretra", "Orina"],
descripcion: "Desinflama la próstata y la uretra disminuyendo la probabilidad de cirugía."
},
{
id: 4,
nombre: "UROPROSTIN",
precio: 100000,
categoria: "sistema-urinario",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/uroprostin01.png",
beneficios: ["Riñones", "Vejiga", "Arenillas"],
descripcion: "Desinflama riñones, uréteres, vejiga y uretra."
},
{
id: 5,
nombre: "ULCEFENO",
precio: 100000,
categoria: "sistema-digestivo",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/ulcefeno01.png",
beneficios: ["Acidez", "Digestión", "Gases"],
descripcion: "Tratamiento homeopático para enfermedades estomacales."
},
{
id: 6,
nombre: "PURIFICADOR",
precio: 100000,
categoria: "sistema-digestivo",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/purificador01.png",
beneficios: ["Desintoxica", "Metabolismo", "Estreñimiento"],
descripcion: "Remedio natural que mejora el metabolismo y expulsa toxinas."
},
{
id: 7,
nombre: "ENERGIZANTE",
precio: 150000,
categoria: "energia",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/energizante01.png",
beneficios: ["Energía", "Vitalidad", "Memoria"],
descripcion: "Restaura y vigoriza el apetito sexual y mejora la concentración."
},
{
id: 8,
nombre: "BERENJENA COMPUESTA",
precio: 150000,
categoria: "control-peso",
imagen: "https://laboticadelrestauradordelasalud.gt.tc/berenjena01.png",
beneficios: ["Control peso", "Colesterol", "Desinflama"],
descripcion: "Tratamiento diurético natural que permite adelgazar de forma saludable."
},
/* --- PRODUCTOS DE ARTICULACIONES COMENTADOS --- */
/*
{
id: 9,
nombre: "ARTROSIS",
precio: 150000,
categoria: "articulaciones",
// *** REEMPLAZA ESTA URL con la URL real de la imagen de ARTROSIS ***
imagen: "https://placehold.co/400x400/1E3A5F/ffffff?text=ARTROSIS",
beneficios: ["Huesos", "Cartílagos", "Columna"],
descripcion: "Tratamiento exclusivo para enfermedades degenerativas en huesos y cartílagos."
},
{
id: 10,
nombre: "ARTRITIS",
precio: 150000,
categoria: "articulaciones",
// *** REEMPLAZA ESTA URL con la URL real de la imagen de ARTRITIS ***
imagen: "https://placehold.co/400x400/28a745/ffffff?text=ARTRITIS",
beneficios: ["Inflamación", "Fuerza", "Flexibilidad"],
descripcion: "Suplemento con sustancias naturales para reducir la inflamación."
},
{
id: 11,
nombre: "OSTEO SILI",
precio: 150000,
categoria: "articulaciones",
// *** REEMPLAZA ESTA URL con la URL real de la imagen de OSTEO SILI ***
imagen: "https://placehold.co/400x400/1E3A5F/ffffff?text=OSTEO+SILI",
beneficios: ["Articulaciones", "Huesos", "Mineralización"],
descripcion: "Tratamiento para disminuir la degeneración de articulaciones."
}
*/
/* ----------------------------------------------- */
];
// --- FUNCIÓN PARA CARGAR Y FILTRAR PRODUCTOS ---
function cargarProductos(categoria = 'todo') {
const grid = document.getElementById('productos-grid');
grid.innerHTML = '';
const productosFiltrados = categoria === 'todo'
? productos
: productos.filter(producto => producto.categoria === categoria);
if (productosFiltrados.length === 0) {
grid.innerHTML = '
No hay productos disponibles en esta categoría.
';
return;
}
let imagesFailed = false;
productosFiltrados.forEach(producto => {
// Formato de precio en pesos colombianos (o similar)
const precioFormateado = producto.precio.toLocaleString('es-CO', {
style: 'currency',
currency: 'COP',
minimumFractionDigits: 0
});
// Mensaje y URL de WhatsApp
const mensajeWhatsApp = `¡Hola! Estoy interesado/a en comprar el producto: ${producto.nombre} - ${precioFormateado}`;
const urlWhatsApp = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(mensajeWhatsApp)}`;
const card = document.createElement('div');
card.className = 'bg-white rounded-xl overflow-hidden shadow-custom transition duration-300 hover:shadow-hover flex flex-col';
card.setAttribute('data-categoria', producto.categoria);
// Función que verifica si la imagen falla y activa la bandera de error
const onErrorHandler = `this.onerror=null; this.src='https://placehold.co/400x400/e0e0e0/555?text=FOTO+FALLIDA'; document.getElementById('image-error-message').classList.remove('hidden');`;
card.innerHTML = `
