Layout trang chủ 2 cột Opencart Việt Nam

Mặc định trong phần Layout >> Home sẽ có 3 cột để chúng ta thêm các tiện ích (danh mục, sản phẩm nổi bật, sản phẩm mới, sản phẩm bán chạy ...v.v)

Để có 1 giao diện 2 cột tôi đã sắp xếp layout như trên , và ngoài trang chủ sẽ hiện thi như sau:



Phần code sẽ hiện thị ra sao:


Chú thích các thành phần cơ bản của file home.twig

{{ header }}

{{ content_top }}

{{ content_bottom }}

{{ column_left }}

{{ column_right }}

{{ footer }}

tương ứng với các thành phần là file trong folder common

Bạn hãy tìm hiểu thêm về mô hình MCV để hiểu cách hoạt động của mô hình này trên Opencart nhé.

Công việc của 1 thiết kế chỉ là dùng css sắp xếp các thành phần kia lại 1 file hoàn chỉnh.

Sau đây tôi sẽ cho các bạn 1 ví dụ về bố cục dạng 1 cột mà tôi sử dụng boostrap 4



Vậy muốn thiết kế 1 giao diện Opencart , bạn cần có các kiến thức cơ bản về CSS, PHP, JS cơ bản

Bạn có thể tải về tempalte trắng của file home.twig tại link dưới đây:




Chúc bạn thành công !!!




0 Nhận xét