Skip to main content

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

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ị:

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).
Create Category

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.
Giao diện trang Scraper Setting
  • 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.
Import products

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”.
Chọn các sản phẩm cùng danh mục
  • Bây giờ bạn chọn Filter/ Status/Active -> Apply Filters : chỉ hiển thị các khối active.
Chọn các sản phẩm cùng danh mục
  • Sau đó, click Admin/ Clear Cache để xóa dữ liệu cũ.
Trang Data với tùy chọn Import

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.

Chọn các sản phẩm cùng danh mục

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.

Chọn các sản phẩm cùng danh mục

Khối 3 - LATEST PRODUCTS

Type: Product Carousel

Mục tiêu: Hiển thị sản phẩm mới nhất theo kiểu băng chuyền.

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

Chọn các sản phẩm cùng danh mục

Hệ thống sẽ tự động chuyển đến Edit Theme và nhập vào giá trị như ảnh.

Chọn các sản phẩm cùng danh mục

Khối 4 - POPULAR CATEGORIES

Type: Category Carousel

Mục tiêu: Hiển thị danh mục sản phẩm nổi bật.

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

Chọn các sản phẩm cùng danh mục

Hệ thống sẽ tự động chuyển đến Edit Theme và nhập vào giá trị như ảnh.

Chọn các sản phẩm cùng danh mục

Khối 5 - SPECIAL OFFER

Type: Static Content

Mục tiêu: Hiển thị sản phẩm có ưu đãi đặc biệt.

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

Chọn các sản phẩm cùng danh mục

Hệ thống sẽ tự động chuyển đến Edit Theme và nhập vào giá trị như ảnh.

Chọn các sản phẩm cùng danh mục

Khối 8 - OUR COMMITMENTS

Type: Services Content

Mục tiêu: Hiển thị dịch vụ bán hàng.

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

Chọn các sản phẩm cùng danh mục

Hệ thống sẽ tự động chuyển đến Edit Theme và nhập vào giá trị như ảnh.

Chọn các sản phẩm cùng danh mục

Khối 9 - INFORMATION & SUPPORT

Type: Footer Links

Mục tiêu: Hiển thị các chính sách của website.

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

Chọn các sản phẩm cùng danh mục

Hệ thống sẽ tự động chuyển đến Edit Theme và nhập vào giá trị như ảnh.

Chọn các sản phẩm cùng danh mục

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.

Giao diện trang Scraper Setting

Bình luận (0)

Để lại bình luận

Chat với KhangWeb
KhangWeb

KhangWeb

Trợ lý AI hỗ trợ doanh nghiệp

👋

Xin chào anh/chị

Em là trợ lý AI của KhangWeb. Anh/chị có thể cho em biết tên để em tiện xưng hô không ạ?