Asistente E-commerce
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asistente Virtual</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f6f8;
}
#chat-container {
max-width: 600px;
margin: 40px auto;
background-color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow-y: auto;
height: 80vh;
}
.chat-box {
margin-bottom: 20px;
animation: fadeIn 0.5s;
}
.chat-box p {
margin: 5px;
padding: 12px;
border-radius: 8px;
background-color: #e1f5fe;
max-width: 85%;
font-size: 16px;
line-height: 1.5;
}
.chat-box.user p {
background-color: #c1e8b6;
text-align: right;
}
.chat-box.bot p {
background-color: #e1f5fe;
}
.product {
display: flex;
align-items: center;
margin-bottom: 20px;
animation: fadeIn 0.5s;
}
.product img {
width: 80px;
height: 80px;
margin-right: 15px;
border-radius: 8px;
}
.product-details {
max-width: 500px;
}
.product-name {
font-weight: bold;
font-size: 18px;
}
.product-price {
color: #00796b;
font-size: 16px;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 15px 0;
border: 2px solid #00796b;
border-radius: 10px;
outline: none;
font-size: 16px;
}
input[type="text"]:focus {
border-color: #004d40;
}
button {
width: 15%;
padding: 12px;
background-color: #00796b;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #004d40;
}
.loading {
display: none;
margin-top: 20px;
text-align: center;
font-size: 18px;
color: #00796b;
}
.loading span {
font-weight: bold;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="chat-container">
<div class="chat-box bot">
<p>隆Hola! Soy tu asistente virtual. 驴Cu谩l es tu ID de usuario?</p>
</div>
<div id="chat-box"></div>
<div class="loading" id="loading-indicator">
<span>Estamos buscando productos...</span>
</div>
<input type="text" id="user-input" placeholder="Escribe tu respuesta..." autocomplete="off" autofocus>
<button onclick="handleUserInput()">Enviar</button>
</div>
<script>
// Datos de productos
const productos = [
{ id: 1, nombre: "Antena wifi rompemuros", categoria: "Electr贸nica", precio: 199.99, descripcion: "Un dispositivo electr贸nico de alta calidad.", imagen: "https://placehold.co/150x200/555/ddd?text=imagen_producto_a&font=Montserrat" },
{ id: 2, nombre: "Parlante Inteligente", categoria: "Hogar", precio: 49.99, descripcion: "Producto esencial para el hogar.", imagen: "https://placehold.co/150x200/555/ddd?text=imagen_producto_b&font=Montserrat" },
{ id: 3, nombre: "Auriculares Inal谩mbricos", categoria: "Electr贸nica", precio: 129.99, descripcion: "Auriculares con cancelaci贸n de ruido y sonido envolvente.", imagen: "https://placehold.co/150x200/555/ddd?text=auriculares&font=Montserrat" },
{ id: 4, nombre: "L谩mpara LED Inteligente", categoria: "Hogar", precio: 29.99, descripcion: "L谩mpara con control remoto y colores ajustables.", imagen: "https://placehold.co/150x200/555/ddd?text=lampara_led&font=Montserrat" },
{ id: 5, nombre: "Cafetera Express", categoria: "Cocina", precio: 249.99, descripcion: "Prepara caf茅 profesional en casa con facilidad.", imagen: "https://placehold.co/150x200/555/ddd?text=cafetera&font=Montserrat" },
{ id: 6, nombre: "Bicicleta de Monta帽a", categoria: "Deportes", precio: 499.99, descripcion: "Ideal para aventuras al aire libre en cualquier terreno.", imagen: "https://placehold.co/150x200/555/ddd?text=bicicleta&font=Montserrat" },
{ id: 7, nombre: "Zapatillas Running", categoria: "Deportes", precio: 89.99, descripcion: "Dise帽adas para brindar comodidad y rendimiento al correr.", imagen: "https://placehold.co/150x200/555/ddd?text=zapatillas&font=Montserrat" },
{ id: 8, nombre: "Set de Herramientas B谩sico", categoria: "Hogar", precio: 39.99, descripcion: "Incluye todo lo necesario para reparaciones en casa.", imagen: "https://placehold.co/150x200/555/ddd?text=herramientas&font=Montserrat" },
{ id: 9, nombre: "Smartwatch Deportivo", categoria: "Electr贸nica", precio: 99.99, descripcion: "Monitorea tu actividad f铆sica y notificaciones en tiempo real.", imagen: "https://placehold.co/150x200/555/ddd?text=smartwatch&font=Montserrat" },
{ id: 10, nombre: "Set de Cuchillos Premium", categoria: "Cocina", precio: 149.99, descripcion: "Cuchillos de acero inoxidable para chefs profesionales.", imagen: "https://placehold.co/150x200/555/ddd?text=cuchillos&font=Montserrat" }
];
const data = {
'product_id': [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
'user_id': [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
'view_count': [5, 3, 2, 6, 4, 1, 2, 3, 4, 5, 8, 2, 1, 7, 6],
'purchase_count': [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0],
'price': [19.99, 59.99, 29.99, 39.99, 89.99, 19.99, 59.99, 29.99, 39.99, 89.99, 25.99, 50.99, 29.99, 20.99, 34.99],
'rating': [4.5, 4.7, 4.3, 4.8, 4.6, 4.2, 4.4, 4.1, 4.9, 4.3, 4.2, 4.5, 4.6, 4.0, 4.1]
};
// Funci贸n para mostrar los productos recomendados
function showRecommendedProducts(userId) {
const recommendedProducts = [];
// Filtramos los productos que corresponden al userId
for (let i = 0; i < data.user_id.length; i++) {
if (data.user_id[i] === userId) {
const productId = data.product_id[i];
// Buscamos el producto por su id
const product = productos.find(p => p.id === productId);
// Verificamos si el producto existe
if (product) {
recommendedProducts.push(product);
}
}
}
document.getElementById("loading-indicator").style.display = "none";
if (recommendedProducts.length > 0) {
// Mostrar productos recomendados en el chat
let productsHTML = "";
recommendedProducts.forEach(product => {
productsHTML += `
<div class="product">
<img src="${product.imagen}" alt="${product.nombre}">
<div class="product-details">
<p class="product-name">${product.nombre}</p>
<p>${product.descripcion}</p>
<p class="product-price">$${product.precio.toFixed(2)}</p>
</div>
</div>
`;
});
document.getElementById("chat-box").innerHTML += `<div class="chat-box bot"><p>Recomendamos estos productos para ti:</p></div>`;
document.getElementById("chat-box").innerHTML += productsHTML;
} else {
document.getElementById("chat-box").innerHTML += `<div class="chat-box bot"><p>No se encontraron productos recomendados.</p></div>`;
}
}
// Funci贸n para manejar la entrada del usuario
function handleUserInput() {
const userInput = document.getElementById("user-input").value.trim();
if (!userInput) return;
const userId = parseInt(userInput, 10);
if (isNaN(userId) || userId < 1 || userId > 10) {
document.getElementById("chat-box").innerHTML += `<div class="chat-box bot"><p>Por favor, ingresa un ID de usuario v谩lido (1-10).</p></div>`;
} else {
document.getElementById("chat-box").innerHTML += `<div class="chat-box user"><p>Mi ID es ${userId}.</p></div>`;
document.getElementById("loading-indicator").style.display = "block";
setTimeout(() => showRecommendedProducts(userId), 1500);
}
document.getElementById("user-input").value = "";
document.getElementById("user-input").focus();
}
</script>
</body>
</html>