Giao diện Hairsalon (tiệm tóc, salon làm đẹp)
Giao diện Hairsalon (tiệm tóc, salon làm đẹp)
Đây là hướng dẫn sử dụng Hairsalon (hairsalon), giao diện chính thức của Zittme dành cho tiệm tóc và salon làm đẹp. Trang đầu bắt đầu bằng thanh trượt phủ kín màn hình, tiếp theo là menu dịch vụ, nhà tạo mẫu, phong cách, thông tin cửa hàng và khối mời đặt lịch. Dịch vụ và nhà tạo mẫu được lấy trực tiếp từ mô-đun đặt chỗ, thông tin cửa hàng lấy từ mô-đun chi nhánh, nên nội dung trang đầu và màn hình đặt lịch luôn khớp nhau. Nền màu mực và trắng ngà được điểm xuyết màu đồng, phông chữ được đóng gói sẵn trong giao diện nên không dùng CDN bên ngoài.
Demo: hairsalon-demo.zitt.me

Thành phần
| Thành phần | Vị trí | Vai trò |
|---|---|---|
| Layout | themes/hairsalon/layouts/hairsalon | Khung website + trang đầu (thanh trượt · giới thiệu · dịch vụ · nhà tạo mẫu · phong cách · cửa hàng · mời đặt lịch) |
| Skin đặt chỗ | themes/hairsalon/modules/reservation | Danh sách dịch vụ · chọn cửa hàng/nhà tạo mẫu/ngày·giờ · xác nhận đặt lịch · kết quả · lịch hẹn của tôi |
| Skin chi nhánh | themes/hairsalon/modules/branch | Danh sách cửa hàng (lọc theo khu vực) · chi tiết cửa hàng (giờ mở cửa · ngày nghỉ · bản đồ · tiện ích) |
| Skin bảng tin | themes/hairsalon/modules/board | Dạng ảnh (lookbook) · dạng danh sách bài (journal) |
| Skin thành viên · tin nhắn | themes/hairsalon/modules/{member, communication} | Đăng nhập · đăng ký · thông tin thành viên · tin nhắn |
| Skin zittme Pay | themes/hairsalon/modules/zittme_pay | Thanh toán tiền đặt cọc · kết quả thanh toán · hướng dẫn chuyển khoản ngân hàng |
Cài đặt và áp dụng
- Cài từ cửa hàng hoặc giải nén vào
themes/hairsalon. - Trong Quản trị > Cài đặt thiết kế, chọn Hairsalon để áp dụng.
- Cài mô-đun đặt chỗ và tạo trang đặt lịch (ví dụ mid
reservation), sau đó nhập/reservationvào Cài đặt layout > Cơ bản > Địa chỉ trang đặt lịch. Nút đặt lịch ở đầu trang và mục "Đặt lịch với nhà tạo mẫu này" trên thẻ nhà tạo mẫu sẽ liên kết tới địa chỉ này. - Nếu có nhiều cửa hàng, hãy đăng ký cửa hàng bằng mô-đun chi nhánh. Giao diện vẫn hoạt động khi không có mô-đun chi nhánh, chỉ riêng khối thông tin cửa hàng trên trang đầu không hiển thị.
- Để nhận tiền đặt cọc, hãy cài zittme Pay và bật phương thức thanh toán (chuyển khoản ngân hàng hoặc PG).
- Màu nhấn: mặc định là màu đồng (#b08d57). Khi bạn đổi màu nhấn, giao diện tự chọn màu chữ trên nút (trắng/màu mực) và màu nhấn dùng cho chữ (nhãn · liên kết), cân chỉnh độ tương phản để chữ vẫn đọc được dù bạn chọn màu sáng.
- Logo: nếu không có ảnh logo thì dùng chữ logo, nếu cũng không có thì dùng tiêu đề website. Trên thanh trượt sẽ dùng "ảnh logo sáng".
- Loại trang: nếu nhập
mvào lớp (class) của menu trong sơ đồ website thì menu đó được vẽ như trang đầu, nếu nhậpsthì được vẽ như trang con. - Danh sách dịch vụ: dịch vụ · mô tả · thời gian thực hiện · giá theo từng phân loại. Nhấn vào dịch vụ để chuyển sang bước đặt lịch.
- Cửa hàng · nhà tạo mẫu · ngày và giờ: khi chọn cửa hàng thì chỉ còn lại nhà tạo mẫu của cửa hàng đó. Chọn "Nhà tạo mẫu bất kỳ" thì hệ thống sẽ xếp người đang rảnh. Ngày hết chỗ không nhấn được, và nếu tháng này không còn ngày trống thì tháng sau được hiển thị trước.
- Xác nhận đặt lịch: tên · số liên lạc · email · mật khẩu tra cứu (khách không phải thành viên) · lời nhắn và đồng ý thu thập thông tin cá nhân. Nếu có tiền đặt cọc, nút "Thanh toán và đặt lịch" sẽ chuyển sang màn hình thanh toán zittme Pay.
- Kết quả · lịch hẹn của tôi: hiển thị mã đặt lịch và trạng thái. Khách không phải thành viên kiểm tra trong Lịch hẹn của tôi bằng mã đặt lịch và mật khẩu tra cứu. Thành viên còn xem được điểm thưởng · hộp phiếu giảm giá.
Môi trường khuyến nghị: Zittme 1.0.2 trở lên, đặt chỗ 1.0.0 trở lên. Đây là giao diện đáp ứng nên khuyến nghị tắt chế độ xem riêng cho di động.
Bố cục trang đầu
Thiết lập trong các tab Thanh trượt trang đầu và Bố cục trang đầu của cài đặt layout. Trang chủ website (menu bắt đầu) được xem là trang đầu mà không cần chỉ định riêng.
| Khối | Cài đặt | Nội dung | |||
|---|---|---|---|---|---|
| Thanh trượt | Slide, khoảng thời gian chuyển, chiều cao | Mỗi dòng một slide theo dạng `image-url \ | small-text \ | large-text \ | link. \n` trong dòng chữ lớn được đổi thành xuống dòng. Đặt khoảng thời gian là 0 thì không tự động chuyển. |
| Giới thiệu | Câu giới thiệu · nội dung · chữ ký | Một câu và một đoạn ngắn bên dưới thanh trượt. Để trống câu giới thiệu thì khối bị ẩn. | |||
| Menu dịch vụ | Hiện menu dịch vụ | Nhóm các dịch vụ đã đăng ký trong mô-đun đặt chỗ theo phân loại, hiển thị thời gian thực hiện và giá. | |||
| Nhà tạo mẫu | Hiện nhà tạo mẫu | Hiển thị người phụ trách của mô-đun đặt chỗ dưới dạng thẻ trượt ngang. Nếu không có ảnh, chữ cái đầu của tên được viết lớn. | |||
| Phong cách | Địa chỉ · số lượng bảng tin phong cách, ảnh lookbook | Nếu nhập mid bảng tin thì hiển thị ảnh của bảng tin đó, nếu để trống thì hiển thị các ảnh đã nhập trong "Ảnh lookbook" dạng khảm. Để khảm được lấp kín không có ô trống, ảnh được hiển thị theo bội số của 5 (ví dụ có 7 ảnh thì hiện 5). | |||
| Thông tin cửa hàng | Hiện thông tin chi nhánh | Hiển thị cửa hàng của mô-đun chi nhánh cùng trạng thái đang mở cửa/đã đóng cửa. | |||
| Mời đặt lịch | Câu kết · ảnh nền | Khối nút đặt lịch ở cuối trang đầu. Để trống câu thì khối bị ẩn. |
Màu sắc và logo
Màn hình đặt lịch (skin đặt chỗ)
Bảng tin
Chọn bằng kiểu danh sách trong cài đặt bảng tin. Nếu ảnh là trọng tâm thì chọn gallery (lookbook), nếu bài viết là trọng tâm thì chọn journal (thông báo · tạp chí). Khách không phải thành viên cũng có thể bình luận bằng biệt danh · mật khẩu (tùy theo quyền của bảng tin).
Chân trang
Trong Cài đặt layout > Chân trang, nhập thông tin doanh nghiệp (nhiều dòng, xuống dòng để tách), địa chỉ mạng xã hội (name | url) và dòng bản quyền.