Використовуйте компоненти Owl на порталі та вебсайті

У цій статті ви дізнаєтеся, як використовувати компоненти Owl на порталі та вебсайті.

Огляд

Щоб використовувати компоненти Owl на веб-сайті або порталі, вам потрібно буде зробити кілька речей:

  • Створіть свій компонент Owl та зареєструйте його в реєстрі public_components

  • Додайте цей компонент до пакету web.assets_frontend

  • Додайте тег <owl-component> до веб-сайту або сторінки порталу, щоб використовувати компонент

1. Створення компонента Owl

Щоб спростити все, почнемо з дуже простого компонента, який просто відтворює «Hello, World!». Це одразу покаже нам, чи працює наша система.

Спочатку створіть шаблон у /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>

Потім створіть файл JavaScript для цього компонента у /your_module/static/src/portal_component/your_component.js та додайте його до реєстру 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);

Перегляньте також

Посилання на компоненти Owl.

2. Додавання вашого компонента до пакету web.assets_frontend

Пакет web.assets_frontend – це пакет ресурсів, який використовується порталом і веб-сайтом. Вам потрібно додати код вашого компонента до цього пакета, щоб служба публічних компонентів могла знайти ваш компонент і змонтувати його. У маніфесті вашого модуля, в розділі ресурсів, додайте запис для web.assets_frontend і додайте файли вашого компонента:

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

Перегляньте також

Посилання на маніфест модуля.

3. Додавання тегу <owl-component> на сторінку

Тепер нам потрібно додати тег <owl-component>, який слугуватиме цільовим ресурсом для монтованого компонента. Для цього прикладу ми додамо його безпосередньо на головну сторінку порталу з xpath у /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>

Не забудьте додати цей файл до розділу даних вашого пакета ресурсів:

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

Ось і все! Якщо ви відкриєте головну сторінку порталу, ви побачите повідомлення «Hello, World!» у верхній частині сторінки.

Застереження

Компоненти Owl повністю відображаються браузером на JavaScript. Це може спричинити деякі проблеми:

  • Зміна макета

  • Гірша індексація пошуковими системами

З цих причин, вам слід використовувати компоненти Owl на порталі та вебсайті лише для конкретних випадків використання, описаних нижче.

Зміна макета

Коли сторінка спочатку відображає вміст, а потім цей вміст переміщується («зміщується») в межах сторінки, це називається зміщенням макета. Під час використання компонентів Owl на порталі або веб-сайті весь HTML-код, що оточує компонент Owl, відображається сервером і є першим, що відображається користувачеві. Коли JavaScript починає працювати, Owl монтує ваш компонент, що, ймовірно, призведе до переміщення навколишніх елементів на сторінці. Це може призвести до поганого користувацького досвіду: користувач бачить елемент на сторінці, який був спочатку відображений і з яким він хоче взаємодіяти, тому він переміщує курсор або палець над цим елементом. Як тільки користувач збирається клацнути, компонент Owl монтується, і елемент, з яким він хоче взаємодіяти, переміщується. Натомість користувач клацає та взаємодіє з додатком Owl.

Це може бути неприємним досвідом, тому під час розробки сторінки слід бути обережним, щоб компонент Owl не переміщував елементи. Цього можна досягти різними способами, наприклад, розташувавши його під усіма іншими існуючими елементами, не розміщуючи навколо інших інтерактивних елементів або резервуючи фіксований простір для компонента Owl за допомогою CSS.

Перегляньте також

Сукупний зсув макета на web.dev

Гірша індексація пошуковими системами

Коли пошукові системи створюють свій індекс вмісту Інтернету, вони використовують веб-сканери для пошуку сторінок та аналізу їхнього вмісту, щоб відображати ці сторінки в результатах пошуку. Хоча сучасні пошукові системи, як правило, здатні виконувати код JavaScript і повинні мати можливість переглядати та індексувати вміст, відтворений на JavaScript, вони можуть не індексувати вміст так швидко, що негативно впливає на сторінку в результатах пошуку.

Оскільки більшість пошукових систем не розкривають точний спосіб сканування та індексації веб-сторінок, не завжди легко зрозуміти ступінь впливу клієнтського рендерингу на ваші рейтинги в пошукових системах. Хоча це навряд чи вплине на вашу SEO-стратегію, вам все одно слід використовувати компоненти Owl лише тоді, коли вони додають реальну цінність порівняно з серверним рендерингом.

Коли використовувати компоненти Owl на порталі та вебсайті

Як пояснювалося в попередніх розділах, використання компонента Owl може дещо погіршити взаємодію з користувачем, якщо ви не будете обережні, а також може зашкодити вашій SEO-оптимізації. Тож коли варто використовувати компоненти Owl у таких випадках? Ось деякі загальні рекомендації.

Коли тобі байдуже на SEO

Якщо сторінку не можуть проіндексувати пошукові системи, оскільки вона недоступна для публіки, наприклад, будь-що на порталі користувача, ефективність SEO не має значення, оскільки веб-сканери все одно не можуть отримати доступ до цих сторінок. Є також деякі речі, які ви не хочете або не хочете індексувати, наприклад, якщо ви хочете мати сторінку, де користувач може вибрати дату та час для зустрічі, ви, ймовірно, не хочете, щоб пошукові системи індексували дати, коли зустріч можлива в певний момент часу.

Коли вам потрібна потужна інтерактивність

Рішення використовувати Owl – це компроміс між згаданими раніше недоліками та зусиллями, які Owl заощаджує, спрощуючи створення багатофункціонального інтерактивного користувацького інтерфейсу. Основна причина використання Owl полягає в тому, що ви хочете створити інтерфейс, який може реагувати в режимі реального часу на введення даних користувача, не вимагаючи перезавантаження сторінки. Якщо ви хочете переважно показувати користувачеві статичний контент, вам, ймовірно, не варто використовувати компонент Owl.