Розділ 1 - Тематизація

Тепер, коли у вас встановлено Odoo, а ваш сервер працює локально, настав час створити власний модуль теми для вашого вебсайту.

Налаштування

Перший крок – переконатися, що Odoo працює коректно локально. Для цього скористайтеся скриптом оболонки для запуску сервера.
У цьому скрипті визначте назву бази даних та встановіть лише модуль website.

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

Див. довідкову документацію щодо того, як запустити Odoo.

Створіть структуру вашого модуля

Тепер, коли ми знаємо, що все працює належним чином, давайте почнемо збирати наш модуль.

Спираючись на наступну структуру, почніть створювати модуль, який використовуватиметься як тема. Тут ви збираєтеся додавати свої XML-сторінки, SCSS, JS тощо…

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

Дивіться довідкову документацію щодо структурування вашого Модуль теми.

Почніть з основ: /data, /img, /scss, /js.
Не забудьте додати файли __init__.py та __manifest__.py.

У вашому файлі __manifest__.py ви можете оголосити свій модуль з такою інформацією:

  • ім’я (обов’язково)

  • description

  • category

  • version

  • author

  • license

  • depends

Оголосити змінні Odoo

У файлі primary_variables.scss ви можете перевизначити стандартні змінні Odoo SCSS, щоб вони відповідали вашому дизайну.

На основі дизайну Airproof створіть файл primary_variables.scss та визначте такі елементи:

  • Сімейство шрифтів Headings: Space Grotesk

  • Сімейство шрифтів контенту: Lato

  • Назва колірної палітри та 5 основних кольорів, що її складають: #000000, #BBE1FA, #CEF8A1, #FFFFFF, #0B8EE6

  • Заголовок і нижній колонтитул: поки що використовуйте один із шаблонів за замовчуванням, пізніше ми створимо власний заголовок.

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

Дивіться довідкову документацію про те, як використовувати первинні змінні, а також перелік усіх доступних первинних змінних.

Перезапустіть скрипт, щоб одразу побачити застосування ваших змін.
Не забудьте додати шлях до вашого маніфесту у скрипті та встановити ваш модуль як програму для встановлення.

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

Порада

Вам потрібно буде перевизначити більше змінних, щоб відтворити дизайн Airproof. Не забудьте додати їх під час створення вашого вебсайту.

Примітка

Сімейства шрифтів взяті з Google fonts.

Щоб виконати цю вправу, вам потрібно:

  1. Створіть файл primary_variables.scss. Ви можете знайти всю необхідну інформацію у файлі primary_variables.scss з нашого прикладу модуля.

  2. Оголосіть свій файл у __manifest__.py, як зазначено в документації.

  3. Встановіть свій модуль за допомогою скрипта. У нашому прикладі це виглядає так:

./odoo-bin --addons-path=../enterprise,addons,../myprojects --db-filter=theming -d theming
--without-demo=all -i website_airproof --dev=xml

Оголосити змінні Bootstrap

Окрім змінних Odoo за замовчуванням, ви також можете перевизначити змінні Bootstrap. Bootstrap - це фронтенд-фреймворк, який включено до Odoo за замовчуванням.

Виходячи з Airproof дизайну, визначте такі елементи:

  • Розміри шрифту заголовків:

    • h1 : 3.125rem

    • h2 : 2.5rem

    • h3 : 2rem

    • h4 : 1.75rem

    • h5 : 1.5rem

    • h6 : 1.25rem

  • Радіус межі вхідних даних: 10px

  • Колір межі вхідних даних: black

  • Ширина межі вхідних даних: 1px

  • Радіус межі великих кнопок: 0px 10px 10px 10px

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

Порада

  • Вам потрібно буде перевизначити більше змінних, щоб відтворити дизайн Airproof. Не забудьте додати їх під час створення вашого вебсайту.

  • Візьміть за звичку регулярно перевіряти локально, чи успішно застосовані ваші зміни та чи не спричинили вони жодних помилок.

Щоб виконати цю вправу, вам потрібно:

  1. Створіть файл bootstrap_overridden.scss. Ви можете знайти всю необхідну інформацію у файлі bootstrap_overridden.scss з нашого прикладу модуля.

  2. Оголосіть свій файл у __manifest__.py, як зазначено в документації.

Визначення пресетів

Окрім змінних, які ми щойно розглянули, ви також можете активувати певні представлення для зміни дизайну.

Додайте файл presets.xml та, виходячи з дизайну Airproof, активуйте відповідні вигляди, щоб задовольнити наступні запити клієнта:

  • Деактивуйте Заклик до дії в заголовку.

  • Деактивуйте функцію списку бажань у магазині, але активуйте її на сторінці товару.

  • На сторінці магазину активуйте фільтрацію лише за категоріями з лівого боку.

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

Подивіться, як можна визначити ваші presets.
Щоб розпочати написання файлу, дотримуйтесь інструкцій для будь-якої XML-сторінки Odoo, описаної в Макет.

Порада

  • Щоб виконати вправу, вам потрібно встановити додатки eCommerce (website_sale) та список бажань (website_sale_whishlist). Будьте обережні! Посилання на програму у вашому коді, яка не була встановлена, призведе до помилки.

  • Щоб знайти шаблони, які потрібно активувати чи ні, перейдіть до вихідного коду: odoo/addons/website/views/**.
    Наприклад, ви можете знайти всі шаблони для заголовка у website_templates.xml.

  • Щоб побачити ефект від ваших пресетів, додайте деякі продукти (Airproof Mini, Airproof Robin, Warranty, Charger cable) та створіть категорії електронної комерції (Гарантії, Аксесуари та Дрони з Дронами-камерами та Водонепроникними дронами) у базі даних. Ви знайдете тут зображення товарів.

  • Вам потрібно буде активувати більше представлень, щоб відтворити дизайн Airproof. Не забудьте додати їх під час створення вашого веб-сайту.

Щоб деактивувати Заклик до дії:

  1. Вид, який вам потрібно знайти, знаходиться у файлі odoo/addons/website/views/website_templates.xml l:2113

  2. Створіть файл presets.xml з потрібними записами

    /website_airproof/data/presets.xml
    <?xml version="1.0" encoding="utf-8"?>
<odoo>
   <!-- Disable Call-to-action in header -->
   <record id="website.header_call_to_action" model="ir.ui.view">
      <field name="active" eval="False"/>
   </record>
</odoo>

  3. У маніфесті додайте 2 додатки та оголосіть свій файл.

    /website_airproof/__manifest__.py
    'depends': ['website_sale', 'website_sale_wishlist'],
'data': [
   # Options
   'data/presets.xml',
]