Este es el manual detallado de Jamgyeol (jamgyeol), el tema oficial de Zittme para plataformas de intermediación de hospedaje. Está diseñado para funcionar junto con el módulo de hospedaje (lodging), y el centro de la portada es la búsqueda de alojamientos por zona · fechas · número de huéspedes. Reúne todo el flujo de reserva como si fuera una app: calendario de tarifas y disponibilidad, cambio entre estancia y uso por horas, cupones, reseñas y consulta de reservas sin cuenta. Si usas también el módulo de comercio, puedes abrir con el mismo diseño una tienda que venda vales de hospedaje y artículos. Incluye modo oscuro y diseño responsivo de serie, y la fuente predeterminada es Pretendard.

Las pantallas de este documento son capturas directas de un sitio de demostración real. Puedes ver la demo en jamgyeol-demo.zitt.me.

Componentes

Todos los componentes comparten los mismos tokens de diseño (color de acento morado · fuente · redondeo · espaciado). Si cambias el color de acento en un solo lugar, la configuración del layout, se aplica en todas las pantallas, y en modo oscuro se calculan automáticamente tokens propios para mantener el contraste del texto.

Instalación y aplicación

1. Coloca los archivos del tema en themes/jamgyeol. (Instalación desde la tienda o descomprimiendo el archivo)
2. En Administración > Configuración de diseño, elige el tema Jamgyeol y aplícalo. El layout y los skins de los módulos se aplican de una sola vez.
3. Crea un mid de hospedaje (p. ej., stay) con el módulo de hospedaje y asígnalo como portada del sitio: la portada mostrará en una sola pantalla la búsqueda, alojamientos populares, zonas, precios más bajos, uso por horas, eventos y avisos.
4. Si creas un tablero de eventos (event) y uno de avisos (notice), se conectan automáticamente en la parte inferior de la portada.
5. Si el módulo de comercio está instalado, el menú de la tienda y el botón del carrito aparecen también en el encabezado.

Entorno recomendado: Zittme 1.0.2 o superior, hospedaje 1.0.0 o superior, comercio 1.1.1 o superior. Para usar el pago por adelantado necesitas zittme Pay; sin zittme Pay solo se muestra el pago en el lugar.

Configuración del sitio recomendada

• Cambio a diseño responsivo: como este tema es responsivo, se recomienda desactivar la vista exclusiva para móviles. Si está activada, en móviles se mostrará en su lugar un layout móvil aparte.
• Desactivar los estilos de botón compatibles con XE: el estilo .btn de la época de XE en el CSS común del núcleo puede sobrescribir los botones del skin. Agrega la siguiente línea en config/config.user.inc.php y vacía los archivos de files/cache/assets para eliminarlo.

define('DISABLE_XE_BTN_STYLES', true);

Encabezado

El encabezado tiene 3 niveles, de arriba abajo: barra de utilidades (inicio de sesión · registro · idioma · modo oscuro) → logo · búsqueda integrada · consulta de reservas sin cuenta · favoritos · alojamientos vistos recientemente → barra de menú.

• Búsqueda integrada: abre directamente la lista de alojamientos por zona o nombre del alojamiento.
• Favoritos · alojamientos vistos recientemente: se guardan en el navegador del visitante, así que funcionan sin iniciar sesión, y muestran la cantidad con una insignia numérica.
• Barra de menú: muestra el menú superior del mapa del sitio y, a la derecha, menús secundarios como eventos y avisos.

Buscar alojamiento



• En el cuadro de búsqueda cambias entre estancia / uso por horas y eliges zona · entrada · salida · número de huéspedes. Para uso por horas eliges solo un día de uso.
• Acotas con los chips de tipo (hotel · motel · casa de campo · hostal · resort) y los chips de zonas populares, y ordenas por recomendados · precio más bajo · precio más alto · calificación · más reseñas.
• Al elegir fechas, solo se muestran los alojamientos con habitaciones disponibles en esas fechas, según el precio más bajo por noche.

Detalle del alojamiento



• La disposición de las fotos cambia según su cantidad (1 · 2 a 3 · 4 o más). Al pulsarlas puedes verlas en grande y pasarlas.
• Cada habitación muestra la ocupación estándar y máxima, las habitaciones disponibles y la tarifa por noche, y lleva directamente a Reservar.
• Si eliges una habitación en el calendario de la derecha, se muestran la tarifa por fecha y si hay disponibilidad o está agotada. El primer toque fija la entrada y el segundo, la salida. Los meses y días de la semana del calendario siguen el idioma del sitio.
• Luego vienen los códigos de cupón que se pueden usar en este alojamiento, la política de cancelación, las reseñas con las respuestas del establecimiento y la ubicación.



Reserva y resultado



La pantalla de reserva sigue el orden datos de quien reserva → cupones · puntos → método de pago → aceptación de la política de cancelación, y el resumen de la derecha recalcula al instante el importe a pagar. Si reservas sin cuenta y defines una contraseña de consulta, puedes volver a encontrar la reserva en Consulta de reservas sin cuenta junto con el número de reserva.



La pantalla de resultado cambia de aspecto según el estado de la reserva.

Estado	Lo que se muestra
Reserva confirmada	Marca de verificación, número de reserva para mostrar en recepción, botón de cancelar y el reembolso si cancelas ahora
Pago pendiente	Ícono de reloj, aviso del plazo de pago y, si el pedido de zittme Pay sigue vigente, botón para continuar el pago
Plazo de pago vencido · cancelada · no presentado	Marca X y texto de aviso
Uso completado	Formulario para escribir una reseña

Cupones · puntos · Mis reservas

• Cupones · beneficios: muestra los cupones vigentes con forma de boleto, y los miembros pueden obtenerlos y guardarlos en su cuponera.
• Mis reservas: los miembros ven por separado las reservas próximas y las pasadas; quienes no tienen cuenta consultan con el número de reserva + la contraseña de consulta.
• Mi página: en Mi página del skin de miembros aparecen las tres próximas reservas y un resumen de cupones · puntos.

Skins de tablero

En Forma de lista de la configuración del skin de tablero eliges el aspecto de cada tablero.

Forma	Uso
Lista	Tableros generales como avisos
Webzine	Comunidades con miniatura + resumen
Tarjetas	Galería centrada en miniaturas
FAQ	Acordeón que despliega la respuesta al pulsar la pregunta
Eventos	Tarjetas de eventos con insignias de periodo · en curso · próximo · finalizado y D-day



La forma de eventos calcula el estado con los campos de fecha (fecha de inicio · fecha de fin) de las variables extendidas del tablero cuyo nombre de entrada es event_start · event_end. Para webzine · tarjetas · FAQ, la configuración de lista del tablero debe tener la columna Resumen para que aparezcan resúmenes y respuestas.

Móvil



• En la parte inferior queda fija una barra de pestañas: Inicio · Búsqueda · Mis reservas · Mi página.
• El encabezado se reduce a una línea con logo · consulta de reservas sin cuenta · favoritos · alojamientos vistos recientemente · botón de menú, más el cuadro de búsqueda.
• El cajón de menú contiene botones de cuenta · lista de menús · herramientas de modo oscuro · idioma.

Multilingüe

• Los textos del tema tienen archivos de idioma para 12 idiomas, incluidos coreano, inglés y japonés.
• En nombres de alojamientos · nombres de habitaciones · nombres de menús · texto del logo de la configuración del layout · textos del pie de página puedes poner un $user_lang->code creado en Administración > Multilingüe, y se mostrará según el idioma del visitante.
• El formato de fechas e importes sigue los archivos de idioma del módulo de hospedaje (lodging_date_fmt, lodging_money).

Pie de página

Se configura en la pestaña Pie de página de Configuración del layout. Si dejas vacío un elemento, ese bloque no se muestra.

Elemento	Descripción
Texto de presentación del sitio	Breve presentación debajo del logo
Teléfono / horario de atención al cliente	Bloque de atención al cliente. El horario se muestra con una línea por cada línea escrita
Correo de contacto	Enlace de consulta por correo electrónico
Datos de la empresa · de contacto	Cada línea separada por un salto se muestra como un elemento
Direcciones de Instagram · Facebook · YouTube · blog	Solo las que escribas se muestran como íconos
Texto de aviso inferior	Texto de exención de responsabilidad · aviso, como la declaración de intermediario de ventas por comunicación
Aviso de derechos de autor	Aviso al final de la página

Todos los elementos de la configuración del layout

Básico

Elemento	Valor predeterminado	Descripción
Imagen del logo / logo para modo oscuro	Ninguno	Si lo dejas vacío, se usa el texto del logo
Texto del logo	Ninguno	Si lo dejas vacío, el título del sitio
Color de acento	Morado	Define a la vez botones · enlaces · indicadores de activo · color de énfasis de los skins
Ancho máximo del contenido	1180px	1060 / 1180 / 1320
Ancho · color de la barra de menú	Ancho del contenido · oscuro	Puedes elegir llenar todo el ancho, color de acento · claro
Posición de los botones de modo oscuro · idioma en móvil	Dentro del cajón de menú	Se pueden mover al encabezado · pie de página
Modo de color	Según el dispositivo	Automático / siempre claro / siempre oscuro

Primera pantalla

Condición para mostrar el slider visual · intervalo de avance automático · lista de diapositivas (campo repetible). Cuando la portada es el módulo de hospedaje, el skin de hospedaje dibuja directamente la primera pantalla con fotos de los alojamientos.

Composición principal

Dirección del módulo de tienda (mid) · íconos de categoría · secciones de la página principal (campo repetible). Se usa cuando la portada es una tienda en lugar del hospedaje.

Contenido · barra lateral

Uso de la búsqueda integrada · (compatibilidad antigua) cuadro de inicio de sesión lateral.

Pie de página

Consulta la tabla de "Pie de página" más arriba.