Phần 7: Thực hành thay đổi giao diện với sự hỗ trợ của AI

Trong phần này, chúng ta sẽ nhờ AI hỗ trợ tạo bố cục đơn giản cho giao diện trang chủ. Nếu thuần thục các bước căn bản này, bạn hoàn toàn có thể tạo ra những khối nội dung đặc biệt như: Flash Sale, Game... thông qua AI.

Tác giả: Minh Nguyen 22 tháng 8 2025 Hướng dẫn sử dụng Khang Affiliate Suite 0 Comments

Phần 7: Thực hành thay đổi giao diện với sự hỗ trợ của AI

Phần trước

Phần tiếp theo

Thực hành thay đổi giao diện với sự hỗ trợ của AI

Bạn cần xem lại và chuẩn bị:

Cách thiết lập ngôn ngữ và tiền tệ.
Cách sử dụng Khang Scraper để thu thập dữ liệu sản phẩm.
Tài khoản AI đã kích hoạt (ChatGPT, Gemini…).

Tôi sẽ chọn Amazon là trang để thu thập dữ liệu vì nó có nhiều ngôn ngữ để lựa chọn. Vì thế, bạn cần thay đổi ngôn ngữ Amazon phù hợp với cài đặt của web bạn. Nếu bạn không tìm thấy ngôn ngữ mong muốn, tạm thời chọn ngôn ngữ English để thực hành nhé. Chúng ta sẽ thực hành với ngành hàng thời trang nữ.

Lời khuyên: Hãy kiên nhẫn làm theo cho đến khi hoàn thành dù đây không phải là ngành hàng bạn mong muốn.

Chuẩn bị

1. Tạo 3 danh mục như: Coats, Sweaters, Pants

Cách làm như sau:

Truy cập: /admin/catalog/categories/create.
Trong trang Add New Category điền đầy đủ thông tin bắt buộc (có dấu *).
Lưu ý: check vào Parent Category - Root (danh mục tạo sẽ là danh mục cha).

2. Scrape sản phẩm và import nó vào đúng danh mục

Hãy chọn mẫu template để scrape sản phẩm trên Amazon để có dữ liệu thô.
Xem lại bài viết: Hướng dẫn sử dụng Khang Scraper cơ bản.
Và dừng lại ở bước 3 của bài viết này: Tôi sẽ hướng dẫn tiếp cách import sản phẩm vào danh mục bạn muốn.
Truy cập /admin/scraper/import-setting mục đích:
- Chọn danh mục sản phẩm sẽ import;
- Cài đặt các thẻ meta theo cấu trúc chung cho từng sản phẩm.

Truy cập trang dữ liệu thô: admin/scraper.
Chọn các sản phẩm cùng danh mục và import.

3. Ảnh banner

Chuẩn bị trước 3 ảnh banner, kích thước 1920px x 700px (.jpeg, .webp) phù hợp với ngành hàng.

4. Tạo logo và favicon

Truy cập /admin/settings/channels/edit/1, để upload logo (192px x 50px) và favicon (16px x 16px).

Thao tác với Setting Theme

Bước 1: Chúng ta sẽ tạo 1 theme mới, vì thế hãy tạm ẩn tất cả các khối nội dung hiện tại

Click check all, sau đó chọn “Select Action > Change status > Inactive”.

Bây giờ bạn chọn Filter/ Status/Active -> Apply Filters : chỉ hiển thị các khối active.

Sau đó, click Admin/ Clear Cache để xóa dữ liệu cũ.

Bước 2: Tạo bố cục cho trang chủ:

Nếu bạn muốn AI thiết kế giúp bạn thì hãy điền prompt này:

Copy nội dung bên trong:

                    **Nhiệm vụ:**  
                    Thiết kế bố cục **trang chủ ngành “Thời trang nữ”** trên **Bagisto – mục Themes**. Tông màu chủ đạo **trắng – hồng**.  
                    Chỉ sắp xếp và cấu hình **các khối có sẵn** trong Themes, **không viết code giao diện** trừ khi là trong `static_content`.

                    **RÀNG BUỘC QUAN TRỌNG (đọc kỹ):**
                    1. Chỉ dùng đúng các **Type** sau (ghi đúng tên):
                    - `product_carousel` – Dãy sản phẩm trượt ngang.
                    - `category_carousel` – Dãy danh mục trượt ngang.
                    - `static_content` – Nội dung tĩnh; **chỉ khối này mới được phép có HTML/CSS/JavaScript và hiệu ứng**.
                    - `image_carousel` – Slider ảnh, có thể auto chạy.
                    - `footer_links` – Nhóm liên kết chân trang.
                    - `services_content` – Các dịch vụ/cam kết ở chân trang.
                    2. **Tuyệt đối KHÔNG** chèn hoặc mô tả HTML/CSS/JS cho bất kỳ Type nào ngoài `static_content`.
                    3. Không tạo Type mới, không giả định chức năng không có trong Bagisto Themes.
                    4. Cần **thứ tự sắp xếp (Sort Order)** tăng dần 1 → n, và **Status** = Active cho các khối hiển thị.
                    5. Với `product_carousel`/`category_carousel`: chỉ mô tả **nhóm sản phẩm/danh mục** sẽ hiển thị (ví dụ: “New Arrivals”, “Best Seller”, “Váy, Áo, Quần…”), **không chèn code**.
                    6. Với `image_carousel`: mô tả **số slide**, thông điệp từng slide, có/không auto-play.
                    7. Với `footer_links` & `services_content`: liệt kê nhóm liên kết/dịch vụ.
                    8. Mỗi khối đều phải có **tên hiển thị (Name)** và **nội dung chi tiết** phù hợp tông **trắng – hồng nữ tính**.

                    **ĐẦU RA BẮT BUỘC – VIẾT THEO BẢNG SAU (KHÔNG THÊM CỘT MỚI):**

                    | Sort Order | Name (Tên khối) | Type (chọn 1 trong danh sách) | Nội dung hiển thị (không dùng code trừ khi Type = static_content) | Hiệu ứng (CHỈ cho static_content) | Status |
                    |---|---|---|---|---|---|

                    - Ở cột **Nội dung hiển thị**:
                    - `image_carousel`: mô tả slide 1..n (thông điệp/hình ảnh mong muốn, auto-play: có/không).  
                    - `category_carousel`: liệt kê danh mục sẽ hiển thị.  
                    - `product_carousel`: nêu bộ sưu tập/tiêu chí lọc (New Arrivals/Best Seller/Sale…).  
                    - `footer_links`: liệt kê nhóm liên kết.  
                    - `services_content`: liệt kê 3–4 cam kết/dịch vụ.  
                    - `static_content`: **được phép** trình bày HTML/CSS/JS **(mô tả ngắn gọn ý tưởng & hiệu ứng ở cột “Hiệu ứng”)**.
                    - Ở cột **Hiệu ứng**: chỉ điền khi Type = `static_content` (ví dụ: fade-in, zoom on hover, typing text). Không mô tả hiệu ứng cho các Type khác.

                    **YÊU CẦU PHONG CÁCH:**
                    - Tông **trắng – hồng** dịu, hiện đại, nữ tính; ưu tiên ảnh sáng, typography mềm.
                    - Thông điệp ngắn gọn, bán hàng rõ ràng: “New Collection”, “Sale up to 40%”, “Miễn phí vận chuyển 500K+”, v.v.

                    **KẾT QUẢ:**  
                    Trả về **một bảng duy nhất** liệt kê từ 8–12 khối theo đúng mẫu và ràng buộc trên. Không kèm mã nguồn ngoài nội dung của `static_content`.

Với mẫu prompt như vậy, đây là kết quả của Gemini AI (2.5 flash) trả về:

Dưới đây là bố cục trang chủ bằng tiếng Anh cho ngành "Thời trang nữ" trên Bagisto Themes, vẫn giữ nguyên tông màu trắng-hồng và các ràng buộc đã nêu.

Sort Order	Name (Tên khối)	Type (chọn 1 trong danh sách)	Nội dung hiển thị (không dùng code trừ khi Type = static_content)	Hiệu ứng (CHỈ cho static_content)	Status
1	NEW COLLECTION	image_carousel	Slide 1: Title "New Collection - Effortless Elegance", image of a model in a pastel pink dress. Slide 2: Title "20% Off on New Arrivals", image of accessories like handbags and heels. Slide 3: Title "Find Your Unique Style", image of a joyful, confident model. Auto-play: Yes		Active
2	WELCOME TO OUR WORLD	static_content	`<div style="text-align:center; padding: 20px 0; background-color: #FFF0F5; color: #333;"><h2 style="font-family: 'Playfair Display', serif; font-weight: 700; color: #FF69B4; margin-bottom: 10px;">HELLO GORGEOUS!</h2><p style="font-size: 16px; line-height: 1.6;">Welcome to our world of femininity and charm. Let us help you refresh your wardrobe with our latest designs.</p></div>`	Fade-in effect for the entire block.	Active
3	LATEST PRODUCTS	product_carousel	Displays products from the "New Arrivals" collection.		Active
4	POPULAR CATEGORIES	category_carousel	Dresses; Blouses; Skirts; Culottes; Jackets		Active
5	SPECIAL OFFER	static_content	`<div style="text-align:center; padding: 40px 0; background-color: #F8F8FF; color: #333;"><h3 style="font-family: 'Playfair Display', serif; color: #FF69B4;">SALE UP TO 50% OFF</h3><p style="font-size: 18px; font-weight: 600; text-transform: uppercase;">Selected Items - End of Season Sale.</p></div>`	Subtle zoom-on-hover effect.	Active
6	BEST SELLERS	product_carousel	Displays "Best Seller" products.		Active
7	QUOTE OF THE DAY	static_content	`<div style="text-align:center; padding: 30px 0; background-color: #FFF0F5; color: #333;"><p style="font-style: italic; font-size: 16px; font-weight: 400;">"Fashion is what you buy. Style is what you do with it."</p><span style="color: #FF69B4; font-weight: 600;">- Unkown -</span></div>`		Active
8	OUR COMMITMENTS	services_content	Express Delivery; 7-Day Free Returns; 24/7 Online Support; Flexible Payment Options		Active
9	INFORMATION & SUPPORT	footer_links	About Us; Return Policy; How to Order; Contact Us		Active
10	FOLLOW US	static_content	`<div style="text-align: center; padding: 20px 0; background-color: #F8F8FF;"><p style="font-size: 14px; margin-bottom: 10px;">Connect with us on social media</p><div style="font-size: 24px; color: #FF69B4;"><a href="#" style="margin: 0 10px; color: inherit;">🌸</a><a href="#" style="margin: 0 10px; color: inherit;">🎀</a><a href="#" style="margin: 0 10px; color: inherit;">💖</a></div></div>`	Subtle color change on hover for social icons.	Active
11	FOOTER LEGAL	footer_links	Terms of Service; Privacy Policy; Copyrights		Active
12	CONTACT INFO	services_content	Address: 123 Fashion St., Ho Chi Minh City; Hotline: 0123.456.789; Email: contact@fashionista.vn		Active

Bước 3: Tạo các khối dữ liệu mới:

Như đã nói ở phần trước, trong settings/theme chúng ta có 6 loại type khác nhau. Nên tôi sẽ hướng dẫn bạn nhập 6 khối nội dung tương ứng vào 6 loại type này nhé. Các khối còn lại bạn làm tương tự.

Các bước tạo khối nội dung

Khối 1

Khối 2

Khối 3

Khối 4

Khối 5

Khối 6

Khối 1 - NEW COLLECTION

Type: Image Carousel

Mục tiêu: Hiển thị Slider về sản phẩm, chương trình khuyến mãi.

Click Create Theme, điền thông tin và nhấn Save.

Hệ thống sẽ chuyển đến Edit Theme. Lần lượt nhập nội dung cho 3 ảnh và chọn Status là Active.

Sau khi đã thêm tất cả các khối nội dung nhớ "Clear Cache" như hướng dẫn ở trên. Và sau đó xem kết quả đạt được.

Lưu ý: Trường hợp nếu có lỗi về giao diện - hiển thị không đầy đủ các khối nội dung thì hãy thay đổi vị trí Type: Footer Links xuống vị trí cuối cùng.

Chia sẻ:

Tags:

Phần 7: Thực hành thay đổi giao diện với sự hỗ trợ của AI

Phần 7: Thực hành thay đổi giao diện với sự hỗ trợ của AI