Đây là hướng dẫn chi tiết cho Sinsunhan (sinsunhan), giao diện chính thức của Zittme dành cho cửa hàng thực phẩm tươi sống trực tuyến. Giao diện được thiết kế đi kèm với mô-đun thương mại, và điểm nổi bật nhất là bố cục tự vẽ trang chủ — không cần tạo riêng trang widget, bạn vẫn có ngay trang chủ cửa hàng đầy đủ slider, ưu đãi trong ngày, chương trình khuyến mãi, các khối sản phẩm, bảng xếp hạng và bài viết mới nhất từ bảng tin. 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 shopdemo.zitt.me.

Thành phần

Mọi thành phần dùng chung một bộ design token (xanh lá thương hiệu · 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.

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

1. Đặt các tệp giao diện vào themes/sinsunhan. (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 Sinsunhan rồi áp dụng. Layout và skin mô-đun được áp dụng cùng lúc.
3. Từ Zittme 1.0.1 trở lên, skin tin nhắn · thông điệp · trung tâm thông báo cũng đổi theo khi áp dụng giao diện. Ở 1.0.0, bạn hãy chọn 신선한 trong cài đặt của từng mô-đun giao tiếp · thông điệp · trung tâm thông báo.
4. Nếu đã cài mô-đun thương mại, menu cửa hàng · ô tìm kiếm trên header · các khối sản phẩm ở trang chủ sẽ tự động liên kết. Nếu có nhiều mô-đun cửa hàng, hãy nhập mid muốn dùng vào "Địa chỉ mô-đun cửa hàng (mid)" trong Cài đặt layout > Bố cục trang chủ.

Môi trường khuyến nghị: Zittme 1.0.1 trở lên, thương mại 0.2.15 trở lên. Giao diện vẫn chạy trên 1.0.0, nhưng một số skin phải chỉ định thủ công như mục 3.

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. Tắt chế độ xem di động trong Cài đặt hệ thống > Nâng cao, hoặc không dùng config/config.user.inc.php mà tắt mobile.enabled. 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 (height 24px !important) 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ỏ gọn gàng.

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 · liên kết quản trị · ngôn ngữ) → logo · tìm kiếm · trang cá nhân · giỏ hàng · thông báo → menu danh mục.

• Lối tắt quản trị: Khi đăng nhập bằng tài khoản quản trị, ngoài 관리자, thanh tiện ích còn hiện thêm liên kết 쇼핑 관리 (bảng điều khiển thương mại) và 페이 설정 (cài đặt zittme Pay). Hàng công cụ trong ngăn menu di động cũng có các liên kết này. Thành viên thường không nhìn thấy.
• Mega menu toàn bộ danh mục: Danh mục cấp 1 làm tiêu đề cột, danh mục cấp 2 xếp thành danh sách dọc. Số cột tự tăng theo số danh mục cấp 1 (đến 6 mục là 3 cột, đến 8 mục là 4 cột, nhiều hơn là 5 cột).
• Chuông thông báo: Chỉ xuất hiện khi đã cài trung tâm thông báo, có ít nhất một loại thông báo đang dùng và thiết bị thuộc đối tượng hiển thị (PC · di động) trong cài đặt trung tâm thông báo. Bấm chuông sẽ mở các thông báo gần đây, và nếu "Hiển thị trong menu thành viên" của trung tâm thông báo đang bật thì bên dưới có thêm liên kết 전체 알림 보기. Liên kết dẫn tới mid được chỉ định trong mô-đun thành viên nếu có, nếu không thì tới địa chỉ action danh sách thông báo.

Trang chủ tích hợp sẵn trong giao diện (Bố cục trang chủ)

Đây là vùng do layout tự vẽ khi trang đầu website ở dạng trang chủ. Bạn lắp ráp các khối theo thứ tự bằng trường lặp "Khối trang chủ" trong tab Bố cục trang chủ của Cài đặt layout. Nếu không đăng ký khối nào, cấu hình mặc định (danh mục → ưu đãi trong ngày → khuyến mãi → đề xuất → banner → xếp hạng → sản phẩm mới → banner → giảm giá → bài viết mới) sẽ được dùng.

Loại khối	Nội dung	Nguồn (source)	Số lượng (count)
Ô danh mục cửa hàng	Ô lối tắt tới danh mục cấp 1	-	Số ô hiển thị
Ưu đãi trong ngày	Mỗi ngày luân phiên một sản phẩm có tỷ lệ giảm cao nhất, đếm ngược đến nửa đêm	-	-
Thẻ khuyến mãi đang diễn ra	Chương trình khuyến mãi của mô-đun thương mại dưới dạng thẻ ảnh	-	Số thẻ
Sản phẩm đề xuất / mới / giảm giá / phổ biến	Lưới thẻ sản phẩm (có thanh thêm vào giỏ)	-	Số sản phẩm
Xếp hạng phổ biến theo thời gian thực	Hạng 1~N theo lượt mua → lượt xem	-	Số hạng
Dải banner	Dùng lại ảnh slide trình chiếu làm banner giữa trang	Số thứ tự slide (để trống thì lần lượt)	-
Bài viết mới từ bảng tin	Danh sách bài viết của bảng tin. Nhập nhiều mid cách nhau bằng dấu phẩy để xếp nhiều cột	mid bảng tin (ví dụ: notice,board)	Số bài viết

Nếu để trống tiêu đề khối, tiêu đề mặc định theo loại sẽ được dùng.

Biểu tượng ô danh mục

Mặc định ô danh mục hiển thị lớn âm tiết đầu tiên của tên danh mục. Với những ngôn ngữ khó phân biệt bằng chữ cái đầu như tiếng Anh · tiếng Tây Ban Nha, hoặc khi muốn dùng biểu tượng hình ảnh, hãy dùng trường lặp Biểu tượng danh mục trong Cài đặt layout > Bố cục trang chủ.

Mục	Mô tả
Tên danh mục	Phải trùng khớp chính xác với tên danh mục cửa hàng (nếu là tên đa ngôn ngữ thì là tên đang hiển thị ở ngôn ngữ hiện tại)
Ảnh biểu tượng	Nếu tải ảnh lên thì ảnh được ưu tiên. Khuyến nghị PNG · SVG hình vuông
Emoji hoặc chữ	Emoji hoặc một hai chữ hiển thị thay thế khi không có ảnh

Danh mục chưa đăng ký vẫn hiển thị âm tiết đầu tiên như cũ.

Slider trình chiếu

Đăng ký slide trong tab Màn hình đầu của Cài đặt layout (ảnh nền · tiêu đề · mô tả · nút · căn lề). Bộ điều khiển (mũi tên + chấm) gom thành một cụm ở góc dưới bên phải nên không che chữ kể cả trên di động.

Nếu không đăng ký slide nào, slider sẽ tự động kế thừa banner trang chủ cửa hàng thương mại — chỉ cần quản lý banner cửa hàng là slider trang chủ cũng được lấp đầy.

Màn hình cửa hàng (skin thương mại)



Trang chủ cửa hàng gồm slider banner · ô danh mục · khuyến mãi · các khối đề xuất/sản phẩm mới/giảm giá. Banner được đăng ký trong Quản trị thương mại > Cài đặt giao diện cửa hàng.



Phía trên màn hình danh sách có chip danh mục cấp 1, chip cấp 2 của danh mục hiện tại, tìm kiếm và sắp xếp. Trên di động, hàng chip không gập thành nhiều dòng mà hiển thị một dòng vuốt ngang.



Chi tiết sản phẩm hỗ trợ đầy đủ tùy chọn thường · tùy chọn bổ sung · tùy chọn kết hợp (trục × trục). Màn hình trên là ví dụ tùy chọn kết hợp 2 trục độ xay × dung tích. Dưới giá là một cụm liền mạch gồm ưu đãi tích điểm · phí vận chuyển · hướng dẫn giao hàng/độ tươi/đổi trả. Nội dung hướng dẫn được quản lý trong Cài đặt thương mại > Hướng dẫn giao hàng · đổi trả.

Khuyến mãi



Khi tạo chương trình khuyến mãi trong quản trị thương mại, chương trình sẽ tự động xuất hiện ở thẻ khuyến mãi trên trang chủ cửa hàng và trang chủ website. Banner có thể chọn giữa ảnh · màu đơn · màu chuyển sắc.

Nếu tự nhập thời gian hiển thị khuyến mãi (start_date / end_date) bằng DB hoặc script, bắt buộc phải lưu dạng 14 chữ số (YmdHis). Nếu nhập 8 chữ số, phép so sánh ngày luôn coi là đã hết hạn và chương trình không được hiển thị.

Skin bảng tin

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

Kiểu	Mục đích	Ví dụ
Dạng danh sách	Bảng tin thông thường như thông báo. Khung thẻ + hàng có đường kẻ phân cách	Màn hình thông báo bên dưới
Dạng webzine	Cộng đồng có ảnh thu nhỏ + tóm tắt	Màn hình bảng tin tự do bên dưới
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	Màn hình hỏi đáp bên dưới







Cài đặt bắt buộc cho dạng webzine · dạng thẻ · dạng FAQ

Để ảnh thu nhỏ và tóm tắt hiển thị, cần hai cài đặt.

1. Thêm cột 'Tóm tắt' vào cài đặt danh sách bảng tin — nếu cài đặt danh sách không có summary, truy vấn danh sách sẽ không lấy nội dung bài nên phần tóm tắt · câu trả lời FAQ bị trống.
2. Đặt đối tượng ảnh thu nhỏ trong cài đặt tài liệu thành 'Bao gồm nội dung' (content) — với giá trị mặc định (chỉ tệp đính kèm), ảnh trong nội dung không được dùng làm ảnh thu nhỏ. Sau khi đổi cài đặt, phải xóa các tệp trong files/thumbnails để loại bỏ bộ nhớ đệm lỗi cũ (tệp 0 byte) thì ảnh mới được tạo lại.

Thành viên · tin nhắn · trung tâm thông báo

Skin thành viên gói đăng nhập · đăng ký · trang cá nhân trong một thẻ, chiều cao ô nhập · ô chọn · nút được thống nhất 46px. Màn hình tin nhắn (giao tiếp) và trung tâm thông báo kế thừa nguyên khung trang cá nhân của skin thành viên (hồ sơ bên trái + nội dung bên phải) và mở ra cùng vị trí với menu thành viên. Màn hình thông điệp hệ thống (lỗi · thông báo) được làm để tự hoàn chỉnh ngay cả khi nằm ngoài bố cục.

Di động



• Thanh 5 tab Trang chủ · Danh mục · Tìm kiếm · Giỏ hàng · Trang cá nhân được cố định ở dưới cùng.
• Tab danh mục mở bottom sheet danh mục cửa hàng (tiêu đề cấp 1 + chip cấp 2), tab tìm kiếm mở bottom sheet tìm kiếm cửa hàng từ dưới lên. Trên website không có cửa hàng, ngăn menu sẽ mở thay thế.
• Ngăn menu gồm nút tài khoản · chip danh mục · danh sách menu · công cụ chế độ tối/ngôn ngữ. Với quản trị viên, hàng công cụ có thêm liên kết quản lý mua sắm · cài đặt thanh toán.

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	Một dòng giới thiệu 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 bên trái. Để trống số điện thoại thì toàn bộ khối bị ẩn
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 mạng xã hội
Câu hướng dẫn cuối trang	Câu miễn trừ · hướng dẫn nhỏ phía trên bản quyền
Ghi chú bản quyền	Dòng ghi ở cuối cùng

Loại trang và LNB

Nhập m (chính) / sl (phụ) / sf (toàn chiều rộng) vào lớp menu trong sơ đồ website để chỉ định loại trang. Trang đầu website được xử lý là trang chính dù không chỉ định lớp, còn màn hình thành viên · tin nhắn · thanh toán tự động ở dạng toàn chiều rộng. Trang phụ của giao diện này hoạt động không có LNB, nội dung chiếm toàn bộ chiều rộ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ó	Chuẩn chiều cao 40px. Để trống thì dùng chữ logo
Chữ logo	Không có	Để trống thì dùng tiêu đề website
Màu nhấn	Xanh lá thương hiệu	Đồ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).

Bố cục trang chủ

Địa chỉ mô-đun cửa hàng (mid) · biểu tượng danh mục (trường lặp) · khối trang chủ (trường lặp). Xem mục "Trang chủ tích hợp sẵn trong giao diện" ở trên.

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.