ZaUI Fashion

ZaUI Fashion là bộ giao diện mẫu (Template) chuyên dụng cho các ứng dụng Thương mại điện tử (E-commerce), Shop thời trang hoặc Bán lẻ trên nền tảng Zalo Mini App.

Template này cung cấp đầy đủ các tính năng của một ứng dụng bán hàng hiện đại như xem danh sách sản phẩm, quản lý giỏ hàng và thanh toán.

Demo

Figma

QR Code

Tính năng chính

• Danh mục sản phẩm: Hiển thị sản phẩm theo nhóm/bộ sưu tập.
• Chi tiết sản phẩm: Xem ảnh, mô tả và thông số sản phẩm.
• Giỏ hàng (Cart): Thêm/bớt sản phẩm, tính tổng tiền.
• Thanh toán (Checkout): Quy trình đặt hàng và thanh toán hoàn chỉnh.
• Tương tác OA: Chat và quan tâm OA ngay trong ứng dụng.

Tech stack

Dự án sử dụng các công nghệ:

• Core: React, ZMP SDK, ZMP UI.
• State Management: Jotai (Tối ưu hiệu năng & đơn giản).
• Styling: TailwindCSS.
• Build Tool: Vite 5.x.

Hướng dẫn cài đặt và sử dụng

Sử dụng Zalo Mini App Extension

1. Cài đặt Visual Studio Code và Zalo Mini App Extension.
2. Nhấp vào Create Project > Chọn template ZaUI Fashion > Đợi khởi tạo dự án.
3. Cấu hình App ID và Install Dependencies, sau đó vào bảng Run > chọn Start để bắt đầu phát triển 🚀

Sử dụng Zalo Mini App CLI

Lưu ý: Hiện tại Zalo Mini App CLI đang cập nhật để tương thích hoàn toàn với Vite 5. Trong thời gian này, khuyến khích sử dụng Extension trên VS Code.

1. Cài đặt Node JS.
2. Cài đặt Mini App DevTools CLI.
3. Tải xuống hoặc clone repository này.
4. Cài đặt thư viện:

   npm install
5. Chạy dev server:

   zmp start
6. Mở localhost:3000 trên trình duyệt 🔥

Triển khai (Deployment)

1. Tạo Mini App ID mới (Tham khảo Hướng dẫn tạo Mini App).
2. Triển khai code lên Zalo:
   • Extension: Chọn tab Deploy > Login > Deploy.
   • CLI:

     zmp login
     zmp deploy
3. Quét mã QR bằng Zalo để xem trước phiên bản đã deploy.

Cấu trúc & Tùy biến (Usage)

Template cung cấp sẵn giao diện UI hoàn chỉnh. Bạn cần tích hợp API để lấy dữ liệu sản phẩm thật và xử lý đơn hàng.

Cấu trúc thư mục:

• src: Mã nguồn chính.

  • components: Các component React tái sử dụng.
  • css: Stylesheet (hỗ trợ Pre-processor).
  • mock: Dữ liệu mẫu (JSON).
  • pages: Các màn hình chính (Page). Mỗi Page được đăng ký trong Router.
  • static: Tài nguyên tĩnh (Ảnh, Icon...). Lưu ý: File lớn nên để trên CDN.
  • utils: Hàm tiện ích (API client, format tiền tệ, xử lý giỏ hàng client-side...).
  • app.tsx: Component gốc (Root).
  • hooks.ts: Các Custom Hooks.
  • router.ts: Cấu hình Router/Navigation của ứng dụng.
  • state.ts: Quản lý State toàn cục bằng Jotai.
  • types.d.ts: Khai báo kiểu dữ liệu TypeScript cho nghiệp vụ.

• app-config.json: Cấu hình Zalo Mini App.

Hướng dẫn tích hợp (Recipes)

Kết nối với Server (Load data)

Khác với các template khác, ZaUI Fashion định nghĩa API URL ngay trong file cấu hình JSON.

1. Mở file app-config.json, tìm key template.apiUrl và thay đổi thành đường dẫn server của bạn:

   "template": {
     "apiUrl": "[https://api.your-shop.com/v1/](https://api.your-shop.com/v1/)",
   }
2. Server cần triển khai các API sau:
   • GET /categories: Lấy danh sách danh mục.
   • GET /products: Lấy danh sách sản phẩm.
   • GET /banners: Lấy danh sách banner chạy ở trang chủ.

Mẹo: Bạn có thể xem cấu trúc dữ liệu mẫu trong thư mục src/mock/*.json.

Tích hợp Zalo OA

Template hỗ trợ sẵn 2 tính năng liên quan đến OA:

Tính năng	Hình ảnh Demo	Cấu hình
Nút Chat OA		Trong app-config.json, cập nhật template.oaIDtoOpenChat thành OA ID của bạn.
Widget Quan tâm OA		Cần thực hiện Xác thực Mini App với OA. Xem thêm tài liệu về showOAWidget.

Tùy chỉnh giao diện (Theme)

Thay đổi màu sắc chủ đạo (Primary Color) bằng cách sửa biến CSS trong file src/css/tailwind.scss:

--primary: red;	--primary: #008000;

Design Disclaimer

Lưu ý:

• Nội dung thiết kế, hình ảnh minh họa và ví dụ trong bài viết này chỉ mang tính chất tham khảo nhằm phục vụ mục đích nghiên cứu, minh họa và thử nghiệm.

• Zalo Group không chịu trách nhiệm cho bất kỳ việc sử dụng, triển khai hoặc diễn giải nào phát sinh từ nội dung này trong môi trường thực tế hoặc thương mại.

License

Copyright (c) Zalo Group and its affiliates. All rights reserved.

The examples provided by Zalo Group are for non-commercial testing and evaluation purposes only. Zalo Group reserves all rights not expressly granted.