Odoo 19+ по-прежнему предлагает мощную платформу для веб-сайтов, позволяющую разработчикам использовать XML и шаблоны QWeb для создания уникальных страниц, меню и мега-меню. Эти функции обеспечивают модульность и управляемость реализации, а также помогают создавать масштабируемые, фирменные и удобные для пользователей веб-сайты.

1. Создание пользовательской веб-страницы

В Odoo 19+ пользовательские страницы по-прежнему отображаются с использованием шаблонов QWeb и определяются с помощью модели website.page.

Используемые ключевые поля

• имя – Отображаемое имя страницы
• тип – Тип страницы (qweb)
• URL – Общедоступный URL
• индексация веб-сайта – SEO-видимость
• is_published – Видимость страницы
• ключ – Уникальный технический идентификатор
• структура страниц arch – QWeb

Структура модуля

odoo19_website_menu_demo/
+-- __init__.py
+-- __manifest__.py
+-- views/
    +-- website_menus.xml
    +-- website_pages.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <record id="my_page" model="website.page">
       <field name="name">My Custom Page</field>
       <field name="type">qweb</field>
       <field name="url">/my_page</field>
       <field name="website_indexed" eval="False"/>
       <field name="is_published">True</field>
       <field name="key">module_name.my_page</field>
       <field name="arch" type="xml">
           <t t-name="module_name.my_page">
               <t t-call="website.layout">
                   <div class="container text-center my-5">
                       <h1 class="text-primary">
                           Welcome to My Custom Page (Odoo 19)
                       </h1>
                       <p class="mt-3">
                           This page is created using XML and QWeb in Odoo 19.
                       </p>
                   </div>
               </t>
           </t>
       </field>
   </record>
</odoo>

<record id="menu_my_custom_page" model="website.menu">
    <field name="name">My Page</field>
    <field name="url">/my_page</field>
    <field name="page_id" ref="my_module.my_page"/>
    <field name="parent_id" ref="website.main_menu"/>
    <field name="sequence">50</field>
</record>

Этот код генерирует пользовательскую страницу « Моя страница », доступ к которой можно получить по адресу « .my_custom_page ». Посетители могут легко получить доступ к этой странице, поскольку она автоматически добавляется в главное навигационное меню вашего веб-сайта.

Как добавить меню на пользовательскую страницу в Odoo 19?

Для обеспечения доступности страницы необходимо использовать модель website.menu , чтобы связать её с меню сайта.

Пример XML-кода: Создание пункта меню

<record id="menu_my_custom_page" model="website.menu">
    <field name="name">My Page</field>
    <field name="url">/my_page</field>
    <field name="page_id" ref="my_module.my_page"/>
    <field name="parent_id" ref="website.main_menu"/>
    <field name="sequence">50</field>
</record>

« Моя страница » отображается в главном меню. Перенаправляет пользователей на персонализированную страницу. Порядок пунктов меню определяется с помощью параметра Sequence.

После добавления этой опции в главном навигационном меню появится раздел « Моя страница », который будет перенаправлять пользователей на пользовательскую страницу. Поле «Последовательность» управляет порядком отображения пунктов меню.

Что такое мега-меню в Odoo 19?

Мега-меню — это сложное выпадающее меню, отображающее несколько столбцов, разделов и ссылок в одной панели.

Мега-меню изначально поддерживаются Odoo 19 через модель website.menu .

Мега-меню лучше всего подходят для:

• Крупные веб-сайты
• Категории товаров или услуг
• Образовательные или ресурсоемкие платформы

Как создать мега-меню в Odoo 19?

Для создания мега-меню:

1. Создайте запись website.menu.
2. Установите значение is_mega_menu в True.
3. Определите макет с помощью HTML внутри переменной mega_menu_content.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <record id="menu_education_hub" model="website.menu">
       <field name="name">Education Hub</field>
       <field name="url">/my_custom_page</field>
       <field name="parent_id" ref="website.main_menu"/>
       <field name="sequence">20</field>
       <field name="is_mega_menu">True</field>
       <field name="mega_menu_content" type="html">
           <section class="py-4">
               <div class="container">
                   <div class="row">
                       <div class="col-lg-4">
                           <h6>Learning</h6>
                           <ul class="list-unstyled">
                               <li><a href="#">Courses</a></li>
                               <li><a href="#">Tutorials</a></li>
                               <li><a href="#">Certifications</a></li>
                           </ul>
                       </div>
                       <div class="col-lg-4">
                           <h6>Resources</h6>
                           <ul class="list-unstyled">
                               <li><a href="#">Blogs</a></li>
                               <li><a href="#">Docs</a></li>
                               <li><a href="#">FAQs</a></li>
                           </ul>
                       </div>
                       <div class="col-lg-4">
                           <h6>Community</h6>
                           <ul class="list-unstyled">
                               <li><a href="#">Events</a></li>
                               <li><a href="#">Webinars</a></li>
                               <li><a href="#">Forums</a></li>
                           </ul>
                       </div>
                   </div>
               </div>
           </section>
       </field>
   </record>
</odoo>

Это позволяет создать полностью адаптивное мега-меню с тремя колонками, используя сеточную систему Bootstrap.

Эта конфигурация создает мега-меню «Образовательный центр» в главном меню навигации веб-сайта. При наведении курсора на меню появляется широкая выпадающая панель, отображающая несколько разделов, расположенных в столбцах. Каждый столбец представляет собой категорию, например, «Обучение», «Ресурсы» и «Сообщество», что позволяет пользователям легко находить связанный контент, не переходя на множество страниц.

Макет создан с использованием сеточной системы Bootstrap, что обеспечивает полную адаптивность мега-меню на настольных компьютерах, планшетах и ​​мобильных устройствах. Такой подход обеспечивает чистую, структурированную и удобную навигацию, особенно для сайтов с большим объемом контента.

Какие преимущества предлагают мега-меню?

• Улучшена навигация для доступа к обширному контенту.
• Улучшенный пользовательский опыт
• Более упорядоченная иерархия меню
• поддерживает заголовки, столбцы и значки.
• Полностью адаптивный дизайн с использованием сетки Bootstrap.

Рекомендации по созданию меню веб-сайта в Odoo 19

• Для единообразия используйте website.layout.
• Используйте модульную структуру для шаблонов QWeb.
• Используйте классы Bootstrap для обеспечения адаптивности.
• Избегайте встроенных стилей; отдавайте предпочтение CSS-файлам.
• Сохраняйте уникальные ключевые значения для страниц.

С Odoo 19 компании могут создавать меню, пользовательские страницы и мега-меню для формирования хорошо организованного, удобного для пользователя веб-сайта, который четко отображает информацию. Разработчики могут сохранять согласованность со стандартным дизайном веб-сайта Odoo, имея при этом полный контроль над макетом страницы, иерархией навигации и структурой контента, используя XML и шаблоны QWeb.

Стандартные меню гарантируют бесперебойную навигацию, мега-меню облегчают пользователям поиск информации в больших объемах, а настраиваемые страницы помогают предоставлять целевой контент, соответствующий конкретным потребностям бизнеса. Правильно реализованные функции способствуют созданию профессионального веб-сайта, повышают вовлеченность пользователей и улучшают удобство использования.

Веб-сайты, созданные на Odoo 19, остаются масштабируемыми, удобными в обслуживании и готовыми к будущему благодаря соблюдению лучших практик, таких как использование адаптивного дизайна, многоразовых шаблонов QWeb и чистых XML-структур. Такой методичный подход гарантирует, что ваш веб-сайт сможет расширяться вместе с вашей компанией, сохраняя при этом простой и удобный интерфейс для пользователей.