Hướng dẫn tạo Web page cho Website trong Odoo/ERPOnline

Với Odoo/ERPOnline, bạn hoàn toàn có thể thiết kế một website độc đáo bằng những thao tác kéo, thả đơn giản, mà không cần kiến thức lập trình hay các công cụ hỗ trợ phức tạp.

Ở bài viết trước, chúng ta đã tìm hiểu tổng quan về ứng dụng website trong Odoo/ ERPOnline và các thiết lập cơ bản của một website. Bài viết này sẽ hướng dẫn các bạn tạo một Web Page (trang) trên website với các thao tác đơn giản.

1. Tạo mới Trang (Web page)

3. Thiết lập thuộc tính trang

Sau khi thiết kế trang, ta tiến hành thiết lập các thuộc tính cho trang bằng 1 trong 2 cách sau:

Cách 1: Trên bảng điều khiển: Chọn mục Trang > Quản lý Trang (Hình 3.1)

(Hình 3.1) Thiết lập thuộc tính trang bằng cách truy cập Trang > Quản lý trang trên bảng điều khiển.

(Hình 3.2) Tại phần quản lý trang, bạn có thể xem được các trang (web page) của website, URL (đường dẫn)
và các quy tắc hiển thị tương ứng 

Để thiết lập từng trang cụ thể, chúng ta di chuột tới trang tương ứng và click vào biểu tượng “Quản lý trang này”. 

Ví dụ: tại đây chúng ta sẽ thử thiết lập thuộc tính cho trang có tên là “Tiêu_đề_1” (như hình 3.3)

(Hình 3.3) Nhấn vào biểu tượng bánh răng để tiến hành thiết lập thuộc tính trang

Người dùng được chuyển đến cửa sổ mới với các thuộc tính của trang cần thiết lập. Tại Tab Tên, bạn có thể chỉnh sửa:

• Tên trang: Chỉnh sửa tên trang

• URL trang: Chỉnh sửa địa chỉ trang

(Hình 3.4) Thiết lập tên ở phần Thuộc tính trang

Tại Tab Xuất bản (Publish), bạn có thể lựa chọn cho phép Trang:

• Hiển thị trong Trình đơn Top: Chọn để hiển thị Trình đơn gắn với trang trên Header

• Dùng như Trang chủ: Chọn để đặt trang hiện tại thành trang chủ (trang đầu tiên xuất hiện khi người dùng truy cập vào website của bạn)

• Được lập chỉ mục: Những trang được lập chỉ mục có thể được tìm kiếm thông qua các từ khóa trên Google đồng thời giúp Google có thể nhận diện dữ liệu của Trang, hệ thống chúng và lưu lại vào cơ sở dữ liệu của họ phục vụ cho SEO (tối ưu hóa công cụ tìm kiếm).

• Xuất bản: Chọn để xuất bản trang.

• Ngày xuất bản trang: Chọn ngày dự tính xuất bản trang của bạn.

Sau đó chọn “Lưu” để lưu lại thông tin vừa thiết lập.

(Hình 3.5) Thiết lập tại phần Xuất bản (Publish)

Cách 2: Sau khi Tạo mới trang và click chọn “Thêm vào Trình đơn”, trên Header sẽ xuất hiện thêm Menu có tên trùng với tên trang.

Ví dụ: tại đây chúng ta sẽ thử thiết lập thuộc tính cho trang có tên là “Tiêu_đề_1” (như hình 3.6)

Đầu tiên Click vào Trình đơn có gắn với trang trên Header để mở trang. Trên bảng điều khiển chọn mục “Trang > Thuộc tính Trang” để mở cửa sổ thiết lập các thuộc tính cho trang.

Người dùng được chuyển tới cửa sổ thiết lập các thuộc tính cho trang như Hình 3.4, tại đây ta thiết lập các thuộc tính tương tự như Cách 1.

4. Thiết lập Trình đơn (Menu) hiển thị cho trang 

Trên bảng điều khiển: Chọn “Trang” > “Sửa Trình đơn” để mở cửa sổ thiết lập.

(Hình 4.1) Chọn “Trang” > “Sửa Trình đơn” để mở cửa sổ thiết lập bảng điều khiển

Người dùng được chuyển tới cửa sổ “Sửa Trình đơn” để thiết lập các thông tin như sau:

• Thêm/ Xóa Menu/ Mega Menu 

• Chỉnh sửa tên hiển thị, URL của các Menu

• Sắp xếp thứ tự hiển thị của các Menu 

• Kéo sang phải để sắp xếp một Menu thành Menu con 

(Hình 4.2) Tại cửa sổ “Sửa Trình đơn”, người dùng có thể Thêm/ Xóa/ Chỉnh sửa Menu, Sắp xếp thứ tự hiển thị của các Menu & Sắp xếp một Menu thành Menu con.

4.1 Thêm Menu mới

Trên cửa sổ “Sửa Trình đơn”  chọn “Thêm mục Menu”. Người dùng được chuyển tới cửa sổ để nhập các thông tin cho Trình đơn mới, bao gồm:

• Nhãn Trình đơn: Tên Trình đơn sẽ hiển thị trên Header

• Url or Email: điền địa chỉ trang hoặc email để gắn Trình đơn với trang và email có sẵn.

(Hình 4.3) Khi Thêm mục Menu, người dùng có thể thiết lập Tên và URL của Trình đơn đó. 

Nhấn “Lưu” sau khi hoàn tất nhập. Tại đây, bạn sẽ thấy Header xuất hiện thêm “Trình đơn mới” như hình. 

(Hình 4.4) Trình đơn mới hiển thị sau khi được tạo

Ở phần tiếp theo đây, chúng ta sẽ cùng làm rõ cách hành xử của phần mềm có gì khác nhau khi ta điền địa chỉ trang và điền địa chỉ email ở mục URL.

- Trường hợp Menu gắn với địa chỉ trang 

Thiết lập Menu mới như Hình 4.3 sau đó chọn “Lưu”, trên thanh Header xuất hiện Trình đơn mới ứng với tên vừa tạo (Hình 4.4). Ta nhấn vào trang này và chọn “Tạo trang”, màn hình sẽ nhảy ra phần “Thiết kế giao diện trang” cho bạn thiết kế, chỉnh sửa trang đó. Sau khi hoàn tất, bạn có thể vào xem thuộc tính của trang gắn với Trình đơn này bằng cách chọn “Trang” > “Thuộc tính trang” trên Bảng điều khiển.

Người dùng sẽ được chuyển tới cửa sổ thông tin thuộc tính của trang này (Hình 4.5). Ta có thể thấy phần tên trang hiển thị là Hướng dẫn tạo web page - khác với tên của Trình đơn gắn với nó (“Trình đơn mới”) và có chung địa chỉ trang. 

(Hình 4.5) Ở cửa sổ thuộc tính trang, có thể thấy phần URL hiển thị chính là
địa chỉ trang đã nhập khi “Thêm mục Menu” ở bước trước đó.

- Trường hợp Menu gắn với địa chỉ email

Tạo một Trình đơn khác có tên là “Trình đơn mới 2”. Ở đây, ta nhập địa chỉ email có tên là “vannguyen.viindoo@gmail.com” thay vì nhập địa chỉ trang. Sau đó chọn “Lưu”. 

(Hình 4.6) Tạo một Trình đơn mới và nhập địa chỉ email vào phần “URL or Email”, sau đó chọn “Lưu”. 

Trên thanh Header xuất hiện “Trình đơn mới 2” vừa tạo. Click chuột vào đó sẽ mở ra một cửa sổ mới, gợi ý chúng ta mở email của mình thông qua Ứng dụng email tương ứng để gửi mail tới địa chỉ “vannguyen.viindoo@gmail.com”

(Hình 4.7) Khi click chuột vào “Trình đơn mới 2”, màn hình chúng ta sẽ mở cửa sổ mới,
gợi ý mở Ứng dụng email để gửi mail tới địa chỉ đã thiết lập.

4.2 Thêm Mega Menu mới

Hiểu đơn giản, Mega Menu là một Menu thả xuống với các mở rộng nhiều cấp, cho phép bạn đóng gói toàn bộ điều hướng của trang web vào một Menu duy nhất. Để cài đặt một Mega Menu cho trang, ta thực hiện các bước sau đây:

• Đầu tiên tại cửa sổ “Sửa Trình đơn” chọn “Thêm mục Mega Menu”. 

• Người dùng được chuyển tới cửa sổ để điền “Nhãn Trình đơn” - Tên của Mega Menu. Sau đó chọn “Lưu”.

(Hình 4.8) Các bước cài đặt Mega Menu cho trang 

Đến đây ta vừa tạo được một Mega Menu có tên “Mega Menu 1”. Trên Header, ta click vào Mega Menu vừa tạo, màn hình sẽ xổ xuống một danh sách hiển thị gồm 4 Tiêu đề (Menu) lớn, trong mỗi tiêu đề lớn là danh sách các Menu con (Menu Item).

(Hình 4.9) Mega Menu hiển thị trên thanh Header

Để thiết kế giao diện cho Mega Menu này, trên bảng điều khiển ta chọn “Sửa”. Người dùng sẽ được chuyển tới cửa sổ thiết kế với cấu trúc khá tương tự với thiết kế trang. Tại đây chúng ta cần thiết lập các thông tin:

• Tên đề mục: đặt tên cho các đề mục chính

• Menu Item: Đặt tên cho các Trình đơn trong đề mục

• Chèn liên kết vào các Menu Item: chèn liên kết trang cho các Trình đơn bằng cách click đúp vào một Trình đơn bất kỳ.

(Hình 4.10) Để thiết kế giao diện cho Mega Menu, nhấn chọn “Sửa” trên bảng điều khiển. Tại đây chúng ta sẽ thiết lập các thông tin như Tên Menu, Tên và Liên kết trang cho từng Menu Item trong Menu lớn đó.

Ví dụ: Thiết lập cho Trình đơn “Menu Item 1”

Ta click đúp vào “Menu Item 1”. Người dùng sẽ được chuyển tới cửa sổ để tạo liên kết trang có tên là “Liên kết đến” để thiết lập các thông tin như:

• URL or Email: Gắn địa chỉ trang hoặc email (tương tự phần thiết lập cho Menu)

• Page Anchor: Lựa chọn phần trang được hiển thị đầu tiên (Top/Bottom) khi truy cập vào trang

• Kích thước: Chọn kích thước viền của Menu Item

• Phong cách: Chọn phong cách hiển thị cho Menu Item

• Màu sắc: chọn màu sắc hiển thị của Menu Item

• Mở trong cửa sổ mới: Chọn để mở liên kết trang trong cửa sổ mới

• Ở phía bên phải cửa sổ này có mục “Xem trước” để xem trước các lựa chọn hiển thị cho Menu Item đó.

Sau đó chọn “Lưu” để lưu lại thiết lập này.

(Hình 4.11) Click đúp vào “Menu Item 1” để chuyển tới cửa sổ thiết lập liên kết trang cho Menu Item 1. 

Người dùng thiết lập tương tự với các Đề mục và Menu Item còn lại trong Mega Menu.

5. Thiết lập các tính năng nâng cao cho web page