El sitio web de alojamientos
Lo que hace el sitio web de reservas: la página de inicio, los alojamientos y sus filtros, la página del alojamiento con su calendario y su tarjeta de reserva, el pago, la página de reserva del huésped, los alojamientos guardados, las preguntas, los buscadores y las etiquetas de marketing.
Para el paquete Full Stack
Páginas
Cada página existe en inglés bajo /en y en árabe bajo /ar. El sitio web no tiene cuentas ni inicio de sesión. La cabecera se queda arriba de la ventana al desplazar la página, cada campo de formulario muestra un ejemplo de lo que espera, y el texto árabe en una página en inglés, como la entrada en árabe del menú de idiomas, se dibuja con la tipografía árabe.
| Página | Ruta | Qué muestra |
|---|---|---|
| Inicio | /en | Una búsqueda unida al hero (destino, check-in, check-out, huéspedes), las fotografías del alojamiento del hero junto a los primeros destinos, cada destino, los alojamientos destacados que el anfitrión elige en el panel, los seis tipos de lugar, cómo funciona una reserva, un fin de semana largo y un mes como dos búsquedas ya preparadas, por qué reservar directamente, las preguntas que hacen los huéspedes y una forma de ponerse en contacto. |
| Alojamientos | /en/stays, p. ej. /en/stays?destination=marisol-coast&guests=2 | Los alojamientos publicados, con filtros, orden y páginas. |
| Un alojamiento | /en/stays/cedar-house | Las fotografías, los datos, la tarjeta de reserva, la descripción, las comodidades, los horarios y las normas de la casa, el calendario de disponibilidad, las reseñas, la zona en un mapa, alojamientos similares y un diálogo de preguntas. |
| Pago | /en/book/cedar-house?checkIn=…&checkOut=…&guests=2 | Se abre desde el botón Reservar de un alojamiento: los datos del huésped, el método de pago, la política de cancelación y el resumen. |
| Una reserva | /en/bookings/<reference> | La reserva del propio huésped, que se abre desde el enlace tras el pago o se encuentra con la referencia y el correo electrónico. |
| Buscar mi reserva | /en/bookings/find | Una referencia de reserva y el correo electrónico con el que se hizo. |
| Destinos | /en/destinations, /en/destinations/marisol-coast | Cada destino, y un destino con sus alojamientos. |
| Alojamientos guardados | /en/saved | Los alojamientos que el visitante guardó, conservados en su navegador. |
| Información, contacto, privacidad | /en/about, /en/contact, /en/privacy | La historia de la empresa, sus datos y el formulario de contacto, y un texto de privacidad de plantilla para reescribir antes de pasar a producción. |
Encontrar un alojamiento
- Filtros por destino, fechas, huéspedes y tipo de alojamiento (
villa,apartment,cabin,chalet,loft,cottage), guardados en la dirección, así que una búsqueda se puede compartir, recargar y recorrer con atrás y adelante. Los filtros aplicados se muestran como chips, y un teléfono abre los mismos filtros en una hoja, que se cierra con su botón Cerrar. - Con fechas, solo se listan los alojamientos libres todas las noches de
[check-in, check-out); con huéspedes, solo los que alojan a ese número de personas. - Orden según el orden propio de la empresa, precio de menor a mayor o de mayor a menor, o valoración, seis alojamientos por página.
- Solo aparecen los alojamientos publicados. Cada precio es el código de la moneda seguido del importe, como
USD 240 / night.
La página del alojamiento
- Una galería con una fotografía grande y sus miniaturas, una tira deslizable en el teléfono, y los datos: huéspedes, dormitorios, camas, baños y superficie.
- La tarjeta de reserva calcula el precio de las noches a medida que se eligen: la tarifa por noche por el número de noches, la tarifa de limpieza una vez y el total, según la cotización de la API. En un teléfono, el total y el botón Reservar quedan fijados en la parte inferior de la pantalla.
- El calendario de disponibilidad muestra dos meses con cinco estados: disponible, no disponible (pasado, o dentro del mínimo del alojamiento), ocupado, el check-in y el check-out elegidos, y las noches entre ellos.
- La descripción, las comodidades, los horarios de check-in y check-out y las normas de la casa, las reseñas publicadas con la media del alojamiento, la zona aproximada en un mapa (nunca la dirección exacta), hasta tres alojamientos similares y un diálogo de preguntas.
El pago
- El nombre y apellido del huésped, el correo electrónico, el teléfono y las peticiones especiales opcionales, un solo número de huéspedes (adultos y niños no se separan), y el método de pago entre los que ofrece la API: tarjeta, PayPal o pago a la llegada.
- El huésped confirma la política de cancelación, que la empresa edita en sus ajustes. Un huésped cancela gratis en línea hasta siete días antes de la hora local de check-in.
- Una reserva con tarjeta o PayPal se termina en la propia página de Stripe o de PayPal, así que ningún número de tarjeta llega al sitio web ni a la API. El webhook es lo que la confirma, nunca que el huésped vuelva; hasta que llega, la página de la reserva dice que el pago se está confirmando.
- Mientras no haya ningún procesador configurado, el simulador incluido recoge una tarjeta en la propia página, bajo la nota "Modo de prueba: no se cobra ninguna tarjeta.", y la liquida al instante; un número que termina en
0es rechazado. Cuando Stripe o PayPal están configurados, el pago ofrece solo los métodos que aceptan, más el pago a la llegada mientras esté activado.
Una reserva después
- La página posterior al pago abre la reserva con un token privado en su dirección. Más tarde, un huésped la encuentra en Buscar mi reserva con su referencia (como
B0021) y el correo electrónico con el que se hizo; un par incorrecto responde que no se encontró ninguna reserva. - Muestra el alojamiento, las fechas y las noches, los huéspedes, el precio y el pago, y lo que ocurre a continuación.
- El huésped la cancela allí mientras está pendiente o confirmada y el check-in está al menos a siete días; después, la página indica que contacte con el anfitrión.
- Una vez completada la estancia, el huésped puede reseñarla desde la misma página, una vez por reserva, con una valoración y un comentario de 10 a 2000 caracteres. Las reseñas aparecen en la página del alojamiento de inmediato, y el equipo puede ocultar una desde el panel.
Preguntas al anfitrión
La página de contacto y el diálogo de preguntas de la página del alojamiento envían una pregunta al anfitrión: un nombre, un correo electrónico, un teléfono opcional y un mensaje de 10 a 4000 caracteres, y desde la página de un alojamiento, ese alojamiento con las fechas y los huéspedes elegidos. Cada una se convierte en una consulta en el panel, con una notificación. No se envía ningún correo: el huésped ve una confirmación en la página, y el equipo responde desde su propio buzón.
El pago y ambos formularios llevan un campo oculto que atrapa a los bots y un token de un solo uso, de modo que el mismo envío se guarda una sola vez, y cada dirección puede enviar cinco reservas, cinco preguntas y cinco reseñas en diez minutos.
Alojamientos guardados
Un visitante guarda hasta 12 alojamientos sin una cuenta. La lista se conserva en el navegador del visitante y nunca llega a la API, salvo para leer las tarjetas de los alojamientos guardados.
Buscadores
- Cada página define su propio título, descripción, dirección canónica y el idioma alternativo, construidos a partir de
NEXT_PUBLIC_SITE_URL. La página de un alojamiento usa el título y la descripción SEO propios del alojamiento y su fotografía de portada para compartir, y la página de un destino, su propio nombre y portada. /sitemap.xmllista todas las páginas públicas en ambos idiomas, todos los alojamientos publicados y todos los destinos;/robots.txtapunta a él. Una reserva, la página de pago cancelado y los alojamientos guardados están marcados comonoindex.
Etiquetas de analítica y seguimiento
Hay seis redes integradas. Activa una poniendo su id en .env (con Docker Compose, en el .env junto a docker-compose.yml) y volviendo a construir; un id en blanco no carga ningún script.
| Variable | Red |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook e Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
El sitio notifica page_view y cinco eventos:
| Evento | Cuándo |
|---|---|
page_view | Cada cambio de ruta |
view_stay | Se muestra la página de un alojamiento |
save_stay | Se guarda un alojamiento |
booking_started | Se envía el pago |
booking_paid | Un huésped que llegó desde el pago ve la reserva como pagada, una vez por reserva |
inquiry_submit | Se envía una pregunta |
booking_paidespera a que el pago se liquide, así que una reserva con tarjeta o PayPal cuenta cuando el webhook o el simulador la ha marcado como pagada. La misma página de reserva abierta más tarde con la referencia y el correo electrónico no se cuenta, una recarga nunca la notifica dos veces, y una reserva pagada a la llegada no se notifica como compra.- Si GA4 funciona dentro de tu contenedor de Tag Manager, deja en blanco el id de GA4, o cada sesión se contará dos veces.
NEXT_PUBLIC_ANALYTICS_CURRENCY(USDpor defecto) se envía con cada precio registrado, yNEXT_PUBLIC_ANALYTICS_DEBUG=trueregistra cada evento en la consola del navegador.- Las etiquetas se cargan en cuanto carga la página. Si atiendes a visitantes de la UE o del Reino Unido, pon antes delante un banner de consentimiento.
Cómo encaja el código del sitio web
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
La estructura del código y las convenciones que debes mantener al cambiarlo.