5. Tienda online

Objetivo

Trailhead Shop es una tienda online de equipo para expediciones: tiendas de campaña, sacos de dormir, termos, cuchillos, cuerdas, hornillos, iluminación y mochilas. Tu tarea es probar todo el proceso de compra —desde la búsqueda en el catálogo hasta realizar un pedido y seguir su estado— según los requisitos de abajo, y encontrar todos los bugs y problemas de usabilidad.

Requisitos

General:

• La tienda está disponible en español, inglés, ruso, alemán y francés. Los precios están en dólares estadounidenses ($) en todas las versiones de idioma.
• Cualquiera puede ver el catálogo y las páginas de producto. Para añadir productos al carrito o a la lista de deseos y para realizar pedidos hay que iniciar sesión.
• Todos los datos (usuarios, carritos, pedidos, reseñas, stock) se guardan en tu navegador. El botón Restablecer la tienda del menú de Realbugz (el botón redondo «Rb» de la esquina superior izquierda de la tienda) los borra todos y restablece el stock inicial. Ese mismo menú abre estos requisitos en una pestaña aparte.
• Todas las páginas se pueden usar en un móvil (ancho de pantalla desde 360 px) sin desplazamiento horizontal. En el móvil, los filtros se ocultan tras el botón Filtros y la navegación, tras el botón de menú.
• La cabecera de la tienda contiene el logotipo (lleva al catálogo), la búsqueda, Lista de deseos y Carrito con contadores de productos, e Iniciar sesión o el nombre del usuario (lleva a la cuenta).

Catálogo:

• El catálogo contiene 64 productos en 8 categorías.
• La tarjeta de producto muestra una foto, el nombre, el precio (y el precio anterior tachado si hay descuento), la valoración, el botón Añadir al carrito y el botón de la lista de deseos.
• Los productos sin stock están marcados como «Agotado» y no se pueden añadir al carrito.
• La búsqueda funciona por el nombre del producto, no distingue mayúsculas de minúsculas, ignora los espacios al principio y al final y empieza a partir de 2 caracteres. Si no se encuentra nada, se muestra el mensaje «No se encontró nada».
• Filtros: categoría (se pueden seleccionar varias), precio desde / hasta (números enteros desde 0, «desde» no mayor que «hasta»; los límites son inclusivos: un producto con un precio exactamente igual al límite se muestra), «Solo en stock».
• Ordenación: por popularidad (por defecto), precio de menor a mayor, precio de mayor a menor, nombre A–Z, valoración.
• La búsqueda, los filtros y la ordenación funcionan juntos. 12 productos por página, con los números de página debajo.
• Al volver desde una página de producto, se conservan los filtros, la ordenación y el número de página.
• Cuando un invitado pulsa Añadir al carrito o el botón de la lista de deseos, se abre la página de inicio de sesión; después de iniciar sesión, el usuario vuelve a la página de la que venía.

Página de producto:

• Ruta de navegación: Catálogo → Categoría → Producto.
• Foto, nombre, categoría, precio, descripción y características.
• Stock: «En stock: N uds.» o «Agotado».
• Cantidad: de 1 a 10, pero no más que el stock.
• Pulsar de nuevo el botón de la lista de deseos quita el producto de la lista.
• Reseñas: una valoración de 1 a 5 estrellas y un texto de 10–500 caracteres (los espacios al principio y al final no cuentan). Solo los usuarios que han iniciado sesión pueden escribir una reseña, una por producto. La valoración media se muestra con un decimal, junto al número de reseñas.

Registro e inicio de sesión:

• Nombre: 2–30 caracteres, letras (latinas, incluidas las acentuadas como é, ü, ñ, y cirílicas), espacios y guiones.
• Email: formato válido, único (sin distinguir mayúsculas de minúsculas).
• Contraseña: 8–20 caracteres, al menos una letra y un dígito. Hay un botón Mostrar.
• La confirmación de la contraseña debe coincidir con la contraseña.
• La casilla «Acepto las condiciones de uso» es obligatoria.
• Los errores se muestran debajo del campo en cuanto sales de él. Después del registro, el usuario queda con la sesión iniciada.
• Si el email o la contraseña son incorrectos, se muestra el mensaje «Email o contraseña incorrectos» (sin especificar cuál de los dos).
• El usuario sigue con la sesión iniciada después de cerrar la pestaña, hasta que pulsa Cerrar sesión.
• Cada usuario tiene su propio carrito y su propia lista de deseos: al cerrar sesión se ocultan y al iniciar sesión vuelven.

Carrito:

• Cada línea muestra una foto, el nombre, el precio por unidad, la cantidad (botones − / + y un campo), el importe de la línea y un botón Eliminar.
• Cantidad: de 1 a 10 y no más que el stock. Al intentar poner más, se muestra el mensaje «Máximo 10 uds. de un mismo producto por cliente» o «Solo hay N uds. disponibles».
• Añadir un producto que ya está en el carrito aumenta su cantidad (con los mismos límites).
• Un carrito vacío muestra un mensaje y un enlace al catálogo.
• El coste de envío se calcula en el pago. Todos los importes se redondean a céntimos.

Códigos promocionales:

• Solo un código promocional por pedido. No importan las mayúsculas ni las minúsculas, y se ignoran los espacios al principio y al final.
• TREK10: 10 % de descuento, solo en productos sin descuento.
• SAVE15: $15 de descuento si el total de los productos es de $100 o más.
• FREESHIP: envío por mensajero gratis (no exprés).
• SUMMER24: caducado; se muestra el mensaje «Este código promocional ha caducado».
• Un código desconocido muestra el mensaje «Código promocional no encontrado».

Pago:

• Destinatario (prerrellenado con el nombre del perfil), teléfono («+» y 10–15 dígitos), ciudad (2–50 caracteres), calle y número (3–100 caracteres), código postal (5–6 dígitos): obligatorios; comentario para el mensajero: hasta 200 caracteres, opcional.
• Envío: recogida en tienda, $0; mensajero, $10, gratis si el total de los productos después del descuento es de $150 o más; exprés, siempre $25.
• Forma de pago: «Tarjeta online» o «Contra reembolso».
• Un clic en Realizar pedido crea exactamente un pedido. El pedido recibe un número del tipo RB-10001 (correlativo), el carrito se vacía, el código promocional se anula y el stock se reduce.
• El pago con tarjeta se hace en la página del pedido mientras el estado es «Pendiente de pago»: número de tarjeta de 16 dígitos, fecha de caducidad MM/AA no pasada, CVV de 3 dígitos. Usa la tarjeta de prueba 4242 4242 4242 4242.

Estados del pedido:

• «Pendiente de pago»: justo después de realizar el pedido con «Tarjeta online».
• «Pagado, en preparación»: después del pago con tarjeta, o justo después de realizar el pedido con «Contra reembolso».
• «Enviado»: después de «Pagado, en preparación», cuando el pedido sale del almacén.
• «Entregado»: después de «Enviado», cuando el mensajero entrega el pedido.
• «Cancelado»: el usuario pulsó Cancelar pedido; el stock se devuelve. Un pedido solo se puede cancelar antes de enviarse.
• La página del pedido muestra el historial de estados con fecha y hora.

Mi cuenta:

• Perfil: el nombre se puede cambiar, el email no. Cambio de contraseña: contraseña actual, nueva contraseña, confirmación.
• Mis pedidos: número, fecha, total y estado; los más recientes primero. Al hacer clic en un pedido se abren sus detalles.
• Lista de deseos: lista de productos, quitar, añadir al carrito.

Resultado esperado

Crea un informe de bugs detallado con los problemas claramente identificados, los pasos para reproducirlos, los resultados real y esperado, capturas de pantalla y una valoración del posible impacto. Intenta aplicar técnicas de diseño de pruebas: valores límite, clases de equivalencia, tablas de decisión y transiciones de estado.

Características del simulador:

Esta tienda tiene fines exclusivamente formativos: no se vende nada ni se realizan pagos. Todo lo que introduces —cuentas, carritos, pedidos, reseñas— se guarda solo en el almacenamiento local de tu navegador (localStorage) y se queda en tu ordenador: no se envía ningún dato a ningún servidor. Aun así, no uses datos reales de tarjetas, direcciones de email ni contraseñas.

En la esquina superior izquierda de la tienda hay un botón redondo «Rb»: el menú de Realbugz. Abre estos requisitos en una pestaña aparte (práctico para alternar mientras pruebas), el botón Restablecer la tienda borra todos los datos guardados y restablece el stock inicial, y ← Volver a Realbugz te lleva de vuelta al sitio principal.

No hay un almacén ni un mensajero reales: la tienda los simula. Un pedido pasa a «Enviado» 15 minutos después de «Pagado, en preparación» y a «Entregado» un día después de «Enviado». La hora se toma del reloj de tu ordenador: para comprobar estas transiciones sin esperar, adelanta el reloj.