Trình dựng website của Odoo cho người dùng kéo–thả các khối dựng sẵn — một tiêu đề, một dải giới thiệu, một bảng giá — vào trang mà không cần biết code. Những khối đó gọi là snippet. Nghe cao siêu, nhưng bóc ra thì đơn giản đến bất ngờ: một snippet chỉ là một đoạn HTML <section> đóng gói trong template, cộng một dòng đăng ký để nó xuất hiện trong bảng chọn. Bài này viết snippet đầu tiên: một khối giới thiệu thẻ thành viên cho quán.
Hai mảnh: template HTML + đăng ký vào bảng chọn
Hình 1: Hai mảnh. (1) Template s_the_quan là chính snippet — một <section> HTML bình thường, có class="s_the_quan" và data-snippet="s_the_quan" để editor nhận diện. (2) Template kế thừa website.snippets (bảng chọn snippet của editor): dùng xpath chèn một <t t-snippet="quan_ca_phe.s_the_quan" ... group="text"> — đây là dòng khiến snippet xuất hiện trong bảng chọn, nhóm "Text", với thumbnail và từ khoá tìm kiếm.
Đó là toàn bộ cơ chế: viết HTML thành template, rồi "khai báo sự tồn tại" của nó với bảng chọn bằng một t-snippet chèn qua inherit_id. Sau -u, snippet nằm sẵn trong trình dựng website, người dùng kéo thả vào bất kỳ trang nào.
Snippet render ra HTML thật
Snippet cuối cùng chỉ là HTML, nên nó render ở đâu cũng được. Mình nhúng nó vào một trang demo (t-call="quan_ca_phe.s_the_quan") để xem nó ra hình gì:
Hình 2: Snippet s_the_quan render thật — một dải giới thiệu căn giữa với tiêu đề, mô tả và nút bấm, dùng đúng các class Bootstrap/website (container, text-center, btn-primary) nên hoà vào giao diện site. Đây chính xác là khối mà người dùng sẽ thấy khi kéo snippet "Thẻ quán" từ bảng chọn vào trang của họ. Đăng ký (template kế thừa website.snippets) đã kích hoạt — snippet nằm trong nhóm "Text" của trình dựng.
Vài điều cần biết
class="s_ten"+data-snippet="s_ten"là quy ước để editor nhận diện và gắn tuỳ chọn cho snippet. Đặt tên bắt đầu bằngs_theo lệ Odoo.grouptrongt-snippetxếp snippet vào nhóm nào trong bảng chọn (text,structure,content...). Chọn nhóm hợp ngữ nghĩa để người dùng dễ tìm.- CSS/JS riêng của snippet vào
web.assets_frontend(bundle của website), không phảiassets_backend— vì snippet sống trên trang công khai, như bài bundle đã phân biệt. oe_structurelà vùng cho phép thả snippet. Trang nào muốn người dùng tự sắp snippet thì bọc nội dung trong<div class="oe_structure">.
Ba ý mang về
- Snippet là khối nội dung kéo–thả trong trình dựng website, và bản chất chỉ là một template
<section>HTML — không có phép thuật, chỉ là HTML đóng gói vớiclass="s_ten"+data-snippet. - Để snippet xuất hiện trong bảng chọn, kế thừa
website.snippetsvà chèn một<t t-snippet="module.s_ten" string="..." group="...">quaxpath. Đó là dòng biến một template thành một mục kéo–thả. - CSS/JS của snippet vào
web.assets_frontend; vùng thả làoe_structure. Đặt tên bắt đầu bằngs_và chọngrouphợp ngữ nghĩa để người dùng dễ tìm.
Snippet trên là "tĩnh" — kéo vào rồi sửa chữ. Nhưng snippet thật của Odoo còn có bảng tuỳ chọn riêng (đổi màu, số cột, bật/tắt phần). Phần sau nói về snippet options: thêm các nút tuỳ chỉnh cho snippet của bạn bằng JS, để người dùng chỉnh khối ngay trong trình dựng.
