Sử dụng các component Owl trên portal và website

Trong bài viết này, bạn sẽ tìm hiểu cách tận dụng các component Owl trên portal và website.

Tổng quan

Để sử dụng các component Owl trên website hoặc portal, bạn cần thực hiện một vài việc sau:

  • Tạo component Owl của bạn và đăng ký nó trong registry public_components

  • Thêm component đó vào bundle web.assets_frontend

  • Thêm một tag <owl-component> vào một trang website hoặc portal để sử dụng component

1. Tạo component Owl

Để đơn giản hóa mọi thứ, hãy bắt đầu với một component rất đơn giản chỉ hiển thị "Hello, World!". Điều này sẽ giúp chúng ta biết ngay liệu thiết lập của mình có hoạt động hay không.

Đầu tiên, hãy tạo template trong /your_module/static/src/portal_component/your_component.xml.

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.YourComponent">
        Hello, World!
    </t>
</templates>

Sau đó tạo file JavaScript cho component đó trong /your_module/static/src/portal_component/your_component.js, và thêm nó vào registry public_components:

/** @odoo-module */
import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry"

export class YourComponent extends Component {
    static template = "your_module.YourComponent";
    static props = {};
}

registry.category("public_components").add("your_module.YourComponent", YourComponent);

Xem thêm

Tài liệu tham khảo về component Owl.

2. Thêm component của bạn vào bundle web.assets_frontend

Bundle web.assets_frontend là asset bundle được sử dụng bởi portal và website. Bạn sẽ cần thêm mã của component vào bundle đó để service public components có thể tìm thấy component của bạn và mount nó. Trong manifest của module bạn, ở phần assets, hãy thêm một mục cho web.assets_frontend và thêm các file của component:

{
    # ...
    'assets': {
        'web.assets_frontend': [
            'your_module/static/src/portal_component/**/*',
        ],
    }
}

Xem thêm

Tài liệu tham khảo module manifest.

3. Thêm một tag <owl-component> vào một trang

Bây giờ chúng ta cần thêm một tag <owl-component> để làm điểm mount cho component. Để đơn giản cho ví dụ này, chúng ta sẽ thêm nó trực tiếp vào trang chủ của portal bằng một xpath trong /your_module/views/templates.xml.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="your_module.portal_my_home" inherit_id="portal.portal_my_home">
        <xpath expr="//*[hasclass('o_portal_my_home')]" position="before">
            <owl-component name="your_module.YourComponent" />
        </xpath>
    </template>
</odoo>

Đừng quên thêm file này vào phần data trong assets bundle của bạn:

{
    # ...
    'data': {
        'views/templates.xml',
    }
}

Vậy là xong! Nếu bạn mở trang chủ của portal, bạn sẽ thấy thông báo "Hello, World!" ở đầu trang.

Những điều cần lưu ý

Các component Owl được render hoàn toàn bằng JavaScript bởi trình duyệt. Điều này có thể gây ra một số vấn đề:

  • Dịch chuyển bố cục (layout shift)

  • Việc lập chỉ mục kém hiệu quả hơn bởi các công cụ tìm kiếm

Vì những lý do này, bạn chỉ nên sử dụng các component Owl trên portal và website cho các trường hợp cụ thể được mô tả bên dưới.

Dịch chuyển bố cục (layout shift)

Khi một trang ban đầu render nội dung, rồi nội dung đó sau đó di chuyển ("dịch chuyển") trong trang, đây được gọi là hiện tượng dịch chuyển bố cục (layout shift). Khi sử dụng component Owl trong portal hoặc website, toàn bộ phần HTML bao quanh component Owl được server render và là thứ đầu tiên hiển thị cho người dùng. Khi JavaScript bắt đầu chạy, Owl sẽ mount component của bạn, điều này có khả năng khiến các phần tử xung quanh dịch chuyển trên trang. Điều này có thể gây ra trải nghiệm người dùng kém: người dùng thấy một phần tử trên trang đã được render ban đầu và muốn tương tác với nó, nên họ di chuyển con trỏ hoặc ngón tay đến phần tử đó. Ngay khi họ chuẩn bị nhấp chuột, component Owl được mount, và phần tử họ muốn tương tác đã bị dịch chuyển. Họ nhấp chuột và tương tác với ứng dụng Owl thay vào đó.

Đây có thể là một trải nghiệm gây khó chịu, vì vậy bạn nên cẩn thận khi thiết kế trang để component Owl không làm dịch chuyển các phần tử khác. Điều này có thể đạt được bằng nhiều cách, ví dụ như đặt nó bên dưới tất cả các phần tử hiện có khác, không có các phần tử tương tác khác xung quanh, hoặc dành riêng một không gian cố định cho component Owl bằng CSS.

Xem thêm

Cumulative Layout Shift trên web.dev

Việc lập chỉ mục kém hiệu quả hơn bởi các công cụ tìm kiếm

Khi các công cụ tìm kiếm xây dựng chỉ mục nội dung của web, họ sử dụng các web crawler để tìm trang và phân tích nội dung nhằm hiển thị các trang này trong kết quả tìm kiếm. Mặc dù các công cụ tìm kiếm hiện đại nhìn chung có khả năng thực thi mã JavaScript và thường có thể xem cũng như lập chỉ mục nội dung được render bằng JavaScript, chúng có thể không lập chỉ mục nội dung đó nhanh bằng và có thể làm giảm thứ hạng của trang trong kết quả tìm kiếm.

Vì hầu hết các công cụ tìm kiếm không tiết lộ chính xác cách họ crawl và lập chỉ mục các trang web, nên không phải lúc nào cũng dễ biết được mức độ ảnh hưởng mà việc render phía client có thể gây ra đối với điểm số SEO của bạn. Mặc dù điều này khó có thể làm nên hay phá hỏng chiến lược SEO của bạn, bạn vẫn chỉ nên sử dụng component Owl khi chúng mang lại giá trị thực sự so với việc render phía server.

Khi nào nên sử dụng component Owl trên portal và website

Như đã giải thích ở các phần trước, việc sử dụng component Owl có thể làm giảm nhẹ trải nghiệm người dùng nếu bạn không cẩn thận và cũng có thể cản trở SEO của bạn. Vậy khi nào bạn nên chọn sử dụng component Owl ở những nơi này? Dưới đây là một số hướng dẫn chung.

Khi bạn không quan tâm đến SEO

Nếu một trang không thể được lập chỉ mục bởi các công cụ tìm kiếm vì nó không dành cho công chúng, ví dụ như bất cứ thứ gì trong portal người dùng, thì hiệu suất SEO không phải là mối quan tâm, vì các web crawler dù sao cũng không thể truy cập những trang này. Cũng có một số thứ mà bạn không muốn hoặc không quan tâm đến việc lập chỉ mục, ví dụ nếu bạn muốn có một trang nơi người dùng có thể chọn ngày giờ cho một cuộc hẹn, có lẽ bạn sẽ không muốn các công cụ tìm kiếm lập chỉ mục các ngày mà một cuộc hẹn khả dụng tại một thời điểm cụ thể.

Khi bạn cần tính tương tác cao

Quyết định sử dụng Owl là một sự đánh đổi giữa các nhược điểm đã đề cập ở trên và công sức mà Owl giúp bạn tiết kiệm nhờ việc dễ dàng xây dựng các trải nghiệm người dùng có tính tương tác phong phú. Lý do chính để sử dụng Owl là khi bạn muốn xây dựng một giao diện có thể phản ứng theo thời gian thực với thao tác của người dùng mà không cần tải lại trang. Nếu bạn chủ yếu muốn hiển thị nội dung tĩnh cho người dùng, có lẽ bạn không nên sử dụng component Owl.