Đây là hướng dẫn chi tiết cho Jamgyeol (jamgyeol), giao diện chính thức của Zittme dành cho nền tảng trung gian đặt phòng lưu trú. Giao diện được thiết kế đi kèm với mô-đun lưu trú (lodging), và trung tâm của trang chủ là ô tìm chỗ nghỉ theo khu vực · ngày · số người. Toàn bộ luồng đặt phòng — lịch giá · phòng trống, chuyển đổi nghỉ qua đêm · nghỉ theo giờ, phiếu giảm giá, đánh giá, tra cứu đặt phòng cho khách không phải thành viên — được gói gọn như một ứng dụng, và nếu dùng kèm mô-đun thương mại, cửa hàng bán phiếu lưu trú · hàng lưu niệm cũng mở ra với cùng thiết kế. Giao diện hỗ trợ sẵn chế độ tối và thiết kế đáp ứng, phông chữ mặc định là Pretendard.

Các ảnh chụp màn hình trong tài liệu này được chụp trực tiếp từ website demo thật. Bạn có thể xem demo tại jamgyeol-demo.zitt.me.

Thành phần

Mọi thành phần dùng chung một bộ design token (màu nhấn tím · phông chữ · bo góc · khoảng cách). Chỉ cần đổi màu nhấn ở một chỗ trong cài đặt layout là toàn bộ màn hình thay đổi theo, và ở chế độ tối, token riêng được tính tự động để giữ độ tương phản của chữ.

Cài đặt và áp dụng

1. Đặt các tệp giao diện vào themes/jamgyeol. (Cài từ cửa hàng hoặc giải nén)
2. Vào Quản trị > Cài đặt thiết kế, chọn giao diện Jamgyeol rồi áp dụng. Layout và skin mô-đun được áp dụng cùng lúc.
3. Tạo một mid lưu trú (ví dụ: stay) bằng mô-đun lưu trú và đặt làm trang đầu website, trang chủ sẽ hiển thị tìm kiếm · chỗ nghỉ phổ biến · khu vực · giá thấp nhất · nghỉ theo giờ · sự kiện · thông báo trên cùng một màn hình.
4. Khi tạo bảng tin sự kiện (event) và thông báo (notice), chúng sẽ tự động được liên kết ở cuối trang chủ.
5. Nếu đã cài mô-đun thương mại, menu cửa hàng và nút giỏ hàng cũng xuất hiện trên header.

Môi trường khuyến nghị: Zittme 1.0.2 trở lên, lưu trú 1.0.0 trở lên, thương mại 1.1.1 trở lên. Để dùng thanh toán trước cần có zittme Pay, nếu không có zittme Pay thì chỉ hiển thị thanh toán tại chỗ.

Cài đặt website nên dùng kèm

• Chuyển sang đáp ứng: Giao diện này có thiết kế đáp ứng nên bạn nên tắt chế độ xem riêng cho di động. Nếu còn bật, trên di động sẽ hiển thị bố cục di động riêng thay thế.
• Tắt kiểu nút tương thích XE: Kiểu .btn từ thời XE trong CSS chung của lõi có thể đè lên nút của skin. Thêm dòng dưới đây vào config/config.user.inc.php và xóa các tệp trong files/cache/assets là loại bỏ được.

define('DISABLE_XE_BTN_STYLES', true);

Header

Header gồm 3 tầng từ trên xuống: thanh tiện ích (đăng nhập · đăng ký · ngôn ngữ · chế độ tối) → logo · tìm kiếm tích hợp · tra cứu đặt phòng cho khách · yêu thích · chỗ nghỉ đã xem gần đây → thanh menu.

• Tìm kiếm tích hợp: Mở ngay danh sách chỗ nghỉ theo khu vực hoặc tên chỗ nghỉ.
• Yêu thích · chỗ nghỉ đã xem gần đây: Được lưu trong trình duyệt của khách truy cập nên hoạt động cả khi không đăng nhập, và hiển thị số lượng bằng huy hiệu số.
• Thanh menu: Hiển thị menu trên cùng trong sơ đồ website, bên phải có thêm menu phụ như sự kiện · thông báo.

Tìm chỗ nghỉ



• Trong ô tìm kiếm, chuyển giữa nghỉ qua đêm / nghỉ theo giờ rồi chọn khu vực · nhận phòng · trả phòng · số người. Với nghỉ theo giờ, chỉ chọn một ngày sử dụng.
• Thu hẹp bằng chip loại hình (khách sạn · nhà nghỉ · pension · guesthouse · resort) và chip khu vực phổ biến, sắp xếp theo đề xuất · giá thấp nhất · giá cao nhất · điểm đánh giá · nhiều đánh giá nhất.
• Khi chọn ngày, chỉ hiển thị những chỗ nghỉ còn phòng trống vào ngày đó, theo giá thấp nhất cho 1 đêm.

Chi tiết chỗ nghỉ



• Cách sắp xếp ảnh thay đổi theo số lượng ảnh (1 ảnh · 2~3 ảnh · từ 4 ảnh trở lên). Bấm vào để xem ảnh lớn và lướt qua.
• Mỗi phòng hiển thị số người tiêu chuẩn · tối đa, số phòng còn trống, giá 1 đêm và dẫn thẳng tới Đặt phòng.
• Chọn phòng trên lịch bên phải sẽ hiển thị giá theo ngày và trạng thái còn trống · hết phòng. Bấm một lần để chọn ngày nhận phòng, bấm lần nữa để chọn ngày trả phòng. Cách ghi tháng và thứ trong lịch theo ngôn ngữ của website.
• Tiếp theo là mã phiếu giảm giá dùng được cho chỗ nghỉ này, chính sách hủy, đánh giá và phản hồi của cơ sở, vị trí.



Đặt phòng và kết quả



Màn hình đặt phòng theo thứ tự thông tin người đặt → phiếu giảm giá · điểm thưởng → phương thức thanh toán → đồng ý chính sách hủy, và số tiền thanh toán được tính lại ngay trong phần tóm tắt bên phải. Khách không phải thành viên nếu đặt mật khẩu tra cứu thì có thể tìm lại bằng mã đặt phòng tại 비회원 예약조회.



Màn hình kết quả thay đổi hình thức theo trạng thái đặt phòng.

Trạng thái	Hiển thị
Đã xác nhận đặt phòng	Dấu tích, mã đặt phòng để xuất trình tại quầy lễ tân, nút hủy và số tiền hoàn lại nếu hủy ngay
Chờ thanh toán	Biểu tượng đồng hồ, thông báo hạn thanh toán, nút tiếp tục thanh toán nếu đơn zittme Pay còn hiệu lực
Quá hạn thanh toán · đã hủy · không đến	Dấu X và câu thông báo
Đã sử dụng	Mẫu viết đánh giá

Phiếu giảm giá · điểm thưởng · đặt phòng của tôi

• Phiếu giảm giá · ưu đãi: Hiển thị các phiếu giảm giá đang diễn ra dưới dạng vé, thành viên có thể nhận và lưu vào hộp phiếu giảm giá của mình.
• Đặt phòng của tôi: Thành viên xem riêng đặt phòng sắp tới và đặt phòng đã qua, khách không phải thành viên tra cứu bằng mã đặt phòng + mật khẩu tra cứu.
• Trang cá nhân: Trang cá nhân của skin thành viên hiển thị ba đặt phòng sắp tới cùng tóm tắt phiếu giảm giá · điểm thưởng.

Skin bảng tin

Trong Kiểu danh sách của cài đặt skin bảng tin, bạn chọn kiểu cho từng bảng tin.

Kiểu	Mục đích
Dạng danh sách	Bảng tin thông thường như thông báo
Dạng webzine	Cộng đồng có ảnh thu nhỏ + tóm tắt
Dạng thẻ	Thư viện ảnh lấy ảnh thu nhỏ làm trọng tâm
Dạng FAQ	Accordion mở câu trả lời khi bấm vào câu hỏi
Dạng sự kiện	Thẻ sự kiện có huy hiệu thời gian · đang diễn ra · sắp diễn ra · đã kết thúc và D-day



Dạng sự kiện tính trạng thái dựa trên các ô ngày (ngày bắt đầu · ngày kết thúc) có tên nhập là event_start · event_end trong biến mở rộng của bảng tin. Dạng webzine · dạng thẻ · dạng FAQ cần có cột Tóm tắt trong cài đặt danh sách bảng tin thì tóm tắt và câu trả lời mới hiển thị.

Di động



• Thanh tab Trang chủ · Tìm kiếm · Đặt phòng của tôi · Trang cá nhân được cố định ở dưới cùng.
• Header thu gọn thành một hàng logo · tra cứu đặt phòng cho khách · yêu thích · chỗ nghỉ đã xem gần đây · nút menu cùng ô tìm kiếm.
• Ngăn menu chứa nút tài khoản · danh sách menu · chế độ tối · công cụ ngôn ngữ.

Đa ngôn ngữ

• Câu chữ của giao diện có tệp ngôn ngữ cho 12 ngôn ngữ, bao gồm tiếng Hàn · tiếng Anh · tiếng Nhật.
• Tên chỗ nghỉ · tên phòng · tên menu · chữ logo trong cài đặt layout · câu chữ footer có thể dùng $user_lang->code tạo trong Quản trị > Đa ngôn ngữ, và sẽ hiển thị theo ngôn ngữ của khách truy cập.
• Cách ghi ngày · số tiền theo tệp ngôn ngữ của mô-đun lưu trú (lodging_date_fmt, lodging_money).

Footer

Cấu hình trong tab Footer của Cài đặt layout. Mục nào để trống thì khối đó không hiển thị.

Mục	Mô tả
Câu giới thiệu website	Giới thiệu ngắn dưới logo
Số điện thoại / giờ làm việc chăm sóc khách hàng	Khối chăm sóc khách hàng. Giờ làm việc hiển thị mỗi dòng một hàng
Email liên hệ	Liên kết liên hệ qua email
Thông tin doanh nghiệp · liên hệ	Mỗi dòng xuống hàng hiển thị thành một mục
Địa chỉ Instagram · Facebook · YouTube · blog	Chỉ mục đã nhập mới hiển thị thành biểu tượng
Câu hướng dẫn cuối trang	Câu miễn trừ · hướng dẫn như thông báo về bên trung gian thương mại điện tử
Ghi chú bản quyền	Dòng ghi ở cuối cùng

Toàn bộ mục cài đặt layout

Cơ bản

Mục	Mặc định	Mô tả
Ảnh logo / logo chế độ tối	Không có	Để trống thì dùng chữ logo
Chữ logo	Không có	Để trống thì dùng tiêu đề website
Màu nhấn	Tím	Đồng thời quyết định màu nhấn của nút · liên kết · trạng thái kích hoạt · skin
Chiều rộng nội dung tối đa	1180px	1060 / 1180 / 1320
Chiều rộng · màu thanh menu	Theo nội dung · tối	Có thể chọn phủ toàn chiều rộng, màu nhấn · sáng
Vị trí nút chế độ tối · ngôn ngữ trên di động	Trong ngăn menu	Có thể chuyển lên header · footer
Chế độ màu	Theo cài đặt thiết bị	Tự động / luôn sáng / luôn tối

Màn hình đầu

Điều kiện hiển thị slider trình chiếu · khoảng thời gian tự chuyển · danh sách slide (trường lặp). Khi mô-đun lưu trú là trang đầu, skin lưu trú tự vẽ màn hình đầu bằng ảnh chỗ nghỉ.

Bố cục trang chủ

Địa chỉ mô-đun cửa hàng (mid) · biểu tượng danh mục · khối trang chủ (trường lặp). Dùng khi trang đầu là cửa hàng thay vì lưu trú.

Nội dung · thanh bên

Có dùng tìm kiếm tích hợp hay không · (tương thích cũ) hộp đăng nhập ở thanh bên.

Footer

Xem bảng "Footer" ở trên.