Thêm bảng tùy chỉnh cho snippet của bạn: Odoo 19 viết lại toàn bộ API options thành html_builder Plugin

Snippet ở bài trước là khối "tĩnh": kéo vào, sửa chữ, hết. Nhưng snippet thật của Odoo có cả một bảng tùy chỉnh bên phải khi bạn chọn nó — đổi màu nền, số cột, bật/tắt phần. Đó là snippet options. Và đây là chỗ Odoo 19 gây bất ngờ cho ai quen bản cũ: toàn bộ API options đã được viết lại. Cú pháp we-select, we-button, class SnippetOptionWidget của Odoo 16–17 không còn; thay vào đó là hệ html_builder Plugin.

API mới: Plugin + BaseOptionComponent

Ở Odoo 19, một option gồm một component (khai template + selector — snippet nào thì hiện option) và một Plugin (đăng ký component vào danh sách builder_options). Đọc thẳng từ lõi để chắc cú pháp:

Hình 1: API options Odoo 19. JS: TheQuanOption extends BaseOptionComponent khai selector (chỉ hiện cho section.s_the_quan); TheQuanOptionPlugin extends Plugin thêm option vào resources.builder_options, rồi đăng ký vào registry website-plugins. XML: các component dựng sẵn — <BuilderRow>, <BuilderSelect>, <BuilderSelectItem classAction="...">. classAction là thao tác thêm/bỏ class cho snippet khi người dùng chọn. Code này nạp thật trong website.assets_editor mà module nâng cấp không một lỗi.

classAction làm gì — thấy tận mắt

classAction="'bg-warning'" nghĩa là: khi người dùng chọn mục "Vàng" trong bảng tùy chỉnh, Odoo thêm class bg-warning vào section snippet. Đây là kết quả thật của thao tác đó:

Hình 2: Cùng snippet, hai lựa chọn của option. Trên: classAction='' (Trắng) — nền mặc định. Dưới: classAction='bg-warning' (Vàng) — Odoo thêm class bg-warning vào section, nền chuyển vàng. Người dùng chỉ bấm một mục trong <BuilderSelect>, không đụng code. Các loại action khác: styleAction (đổi CSS trực tiếp như padding), dataAttributeAction (đổi data-attribute mà JS snippet đọc).

Ba loại "action" hay dùng

Bảng tùy chỉnh điều khiển snippet qua vài kiểu action:

• classAction — thêm/bỏ class (như trên): đổi màu, khoảng cách, kiểu, bằng class Bootstrap/theme có sẵn.
• styleAction — đặt thẳng một thuộc tính CSS (padding-top, --marquee-speed...), thường đi với <BuilderNumberInput> hay <BuilderRange>.
• dataAttributeAction — đặt một data-attribute trên snippet, để JS của snippet (interaction) đọc và xử lý — dùng cho hành vi động, không chỉ hình thức.

Với những việc phức tạp hơn, bạn viết một BuilderAction riêng (một class với apply/getValue) — đó là cách lõi làm cho các option cần logic.

Lưu ý cho ai từ bản cũ lên

• Đừng tìm we-select, we-button, SnippetOptionWidget — chúng đã bị bỏ ở Odoo 19. Nếu chép code option từ tài liệu/blog cũ, nó không chạy. Đọc website/static/src/builder/plugins/options/ của bản 19 để lấy cú pháp đúng.
• Option nạp trong website.assets_editor (bundle của trình dựng), không phải assets_frontend — vì nó chỉ cần khi biên tập.
• selector quyết định option hiện cho snippet nào. Sai selector là option không bao giờ xuất hiện, không báo lỗi — họ hàng cái bẫy bundle/selector quen thuộc.

Ba ý mang về

1. Snippet options là bảng tùy chỉnh cho người dùng chỉnh khối trong trình dựng. Odoo 19 viết lại toàn bộ thành hệ html_builder Plugin: một BaseOptionComponent (khai selector) + một Plugin (thêm vào builder_options), đăng ký vào registry website-plugins.
2. Giao diện option dựng bằng component sẵn — <BuilderRow>, <BuilderSelect>/<BuilderSelectItem> — điều khiển snippet qua classAction (đổi class), styleAction (đổi CSS), dataAttributeAction (đổi data-attribute). Việc phức tạp thì viết BuilderAction riêng.
3. API options đã khác hẳn bản cũ (we-select/SnippetOptionWidget bỏ đi). Chép code option cũ sẽ không chạy — đọc website/static/src/builder/ bản 19. Option nạp trong website.assets_editor; selector sai là option không hiện mà không báo lỗi.

Ta đã thêm option cho snippet. Phần sau đi rộng hơn: thêm nút tùy biến vào chính trình biên tập website — mở rộng thanh công cụ của editor, không chỉ bảng tùy chỉnh của một snippet.