Trong bài này chúng ta sẽ xây dựng các bộ khung giao diện cho dự án sử dụng Tailwind CSS kết hợp với Alpine.js. Giao diện sẽ được chia làm 2 phần trong đó 1 dành cho khách hàng và một dành cho quản trị viên.
E-commerce với Laravel là loạt bài ghi lại toàn bộ quá trình xây dựng hệ thống thương mại điện tử được thực hiện bởi Transmoni team nhắm hướng dẫn mọi người làm quen với Laravel, Livewire, Alpine.js và Tailwind CSS. Hiện dự án đang được cập nhật liên tục, toàn bộ mã nguồn của dự án sẽ được công khai miễn phí theo hình thức mã nguồn mở trên trang Github của Transmoni sau khi hoàn tất loạt bài hướng dẫn này.
Quay trở lại bài trước, sau khi cài đặt Laravel Breeze thì package này đã bao gồm cả việc cài đặt Tailwind CSS và Alpine.js rồi và bạn không cần phải mất công cài đặt lại nữa mà có thể sử dụng được luôn.
Đầu tiên hãy tìm đến thư mục app/View/Components bạn sẽ thấy Laravel Breeze cung cấp sẵn 2 layouts là AppLayout và GuestLayout trong đó:
AppLayout dành cho các trang yêu cầu đăng nhập
GuestLayout dành cho các trang không cần đăng nhập.
Ở đây chúng ta sẽ thay đổi lại một chút như sau:
AppLayout đổi tên thành AdminLayout và nhận nhiệm vụ quản lý bố cục trang dành cho quản trị viên.
GuestLayout vẫn giữ nguyên, tuy nhiên chúng ta sẽ sử dụng luôn cho các trang yêu cầu đăng nhập dành cho khách hàng [ví dụ thông tin tài khoản, theo dõi đơn hàng...]
Tại file app/View/Components/AppLayout.php chúng ta tiến hành đổi thành AdminLayout.php và nội dung của nó như sau: