Розділ 3 - Налаштування, частина I¶

Додати користувацький SCSS¶

Ви налаштували змінні Odoo та Bootstrap і встановили пресети, але все ще помічаєте розбіжності між дизайном вашого вебсайту та клієнта. Єдине рішення - інтегрувати користувацький SCSS.

У theme.scss відтворіть такі елементи дизайну:

Додайте зелене підкреслення до активних елементів навігації.
Змініть стрілку для елементів навігації, що згортаються.
Змініть стрілки слайдера, додавши зелений фон та змінивши їхній дизайн.

Ви знайдете різні медіафайли тут.

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

Див. довідкову документацію щодо того, як додати ваші правила SCSS.

Примітка

Завжди бажано включати всі ваші правила SCSS у #wrapwrap. Цей ID застосовується до div, який групує вміст header, footer та main усіх ваших сторінок.

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

Solutions

Знайдіть рішення в нашому прикладі Airproof на header.scss та caroussel.scss.

Додати користувацький JS¶

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

Використайте свої навички JavaScript, щоб реалізувати це.

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

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

Solutions

Знайдіть рішення в нашому прикладі Airproof на mouse_follower.js та mouse_follower.scss.

Створення користувацького заголовка¶

Після налаштування змінних, пресетів та користувацького SCSS настав час удосконалити макет і додати ключові елементи на сторінках, починаючи із заголовка.

На основі дизайну Airproof створіть користувацький заголовок з такими елементами:

Центрований логотип. Переконайтеся, що ви оголосили логотип, щоб він автоматично відображався в заголовку.
Значок користувацького кошика для покупок.
Логін/користувач у вигляді кнопки.
Текст навігації до 14 пікселів.

Ви можете знайти логотип, іконка кошика та ілюстрація шаблону.

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

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

створити користувацькі заголовки,
виконайте XPath,
оголосити Логотип компанії.

Порада

Спирайтеся на код існуючих шаблонів заголовків, які ви можете знайти за адресою odoo/addons/website/views/website_templates.xml.
Гарною практикою має бути створення різних файлів для керування вашими власними представленнями та шаблонами. Наприклад, усе, що стосується загального макета (заголовок, нижній колонтитул…), у website_templates.xml, все, що стосується блогу, у website_blog_templates.xml, події у website_event_templates.xml тощо.
Щоб змінити значок кошика, можна використовувати XPath.

Оскільки це пов’язано з електронною комерцією, помістіть це в новий файл з назвою website_sale_templates.xml.
Не забувайте продовжувати вносити якомога більше змін за допомогою Змінні Bootstrap та primary variables (шрифт, кольори, розмір…). Ви можете використовувати їх для допомоги у цій вправі.

Solutions

Знайдіть рішення в нашому прикладі герметичності для:

структуру xml та додати шаблон до списку опцій на website_template.xml.

вимкнути заголовок за замовчуванням:

/website_airproof/data/presets.xml¶

<!-- Disable default header -->
<record id="website.template_header_default" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

запис логотипу:

/website_airproof/data/images.xml¶

<!-- Set as the logo of the website -->
<record id="website.default_website" model="website">
   <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
</record>

оголосіть ваш файл website_templates.xml разом з усіма новими у вашому manifest.
вимкніть непотрібні параметри у своєму заголовку за допомогою presets.
використовувати primarys такі як header-template, navbar-font, header-font-size…
використовуйте bootstrap_overridden як $navbar-light-color, $navbar-light-hover-color, $navbar-padding-y…
додати деякі правила scss.

Створення власного нижнього колонтитула¶

Клієнт задоволений новим заголовком, оскільки він ідеально відповідає наданому дизайну. Тепер він хоче відповідний власний нижній колонтитул.

На основі дизайну Airproof створіть власний нижній колонтитул з такими елементами:

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

Ви знайдете ці значки тут.

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

Дивіться довідкову документацію щодо створення користувацький нижній колонтитул та адаптації Авторське право.

Порада

Ви можете ввімкнути або вимкнути розділ авторських прав за допомогою пресетів.
Щоб розділ розсилки працював, вам потрібно встановити застосунок website_mass_mailing.

Solutions

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

додайте mass mailing до ваших залежних адрес:
/website_airproof/__manifest__.py¶
```
'depends': ['website_sale', 'website_sale_wishlist', 'website_blog',
'website_mass_mailing'],
```
знайдіть структуру xml та додайте шаблон до списку опцій на website_template.xml.

вимкніть нижній колонтитул за замовчуванням та ввімкніть авторські права:

/website_airproof/data/presets.xml¶

<!-- Disable Default Footer -->
<record id="website.footer_custom" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>
<!-- Enable Copyright -->
<record id="website.footer_no_copyright" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

використовуйте primarys такі як footer-template, footer, o-cc4-link…
додайте невелике правило scss для розділу інформаційний бюлетень.

Створіть користувацькі будівельні блоки¶

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

На основі дизайну Airproof створіть власний фрагмент каруселі для демонстрації дронів. Потім додайте його як розділ обкладинки на головній сторінці.

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

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

Перегляньте також
Див. довідкову документацію щодо додавання параметри фрагмента коду.
Додайте фрагмент коду на головну сторінку.

Порада

Не забувайте завжди правильно оголошувати нові файли у вашому __manifest__.py та дотримуватися гарної структури папок, яку ми бачили раніше.

Solutions

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

Створіть свій шаблон.

Ви можете знайти всю необхідну інформацію у файлах s_airproof_carousel.xml та s_airproof_carousel/000.scss з нашого прикладу модуля.
Запишіть свої зображення у файлі images.xml.
Оголосіть свої файли у файлі __manifest__.py.

Додайте його до списку будівельних блоків. У нашому прикладі це виглядає так:

/website_airproof/views/snippets/options.xml¶

<!-- Add custom snippets to the builder -->
<template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
   <xpath expr="//*[@id='default_snippets']" position="before">
      <t id="x_theme_snippets">
         <div id="x_airproof_snippets" class="o_panel">
            <div class="o_panel_header">Airproof</div>
            <div class="o_panel_body">
               <!-- Carousel snippet -->
               <t t-snippet="website_airproof.s_airproof_carousel"
               t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg">
                  <keywords>Carousel block</keywords>
               </t>
            </div>
         </div>
      </t>
   </xpath>
</template>

Додайте опцію до Конструктора веб-сайтів. У нашому прикладі це виглядає так:

/website_airproof/views/snippets/s_airproof_carousel.xml¶

<!-- Add options to snippets -->
<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof -
Snippets Options">
   <xpath expr="." position="inside">
      <!-- *** Carousel snippet : blue or green bubble *** -->
      <div data-selector=".x_bubble_item">
         <we-button-group string="Bubble shadow">
            <we-button data-select-class="x_bubble1">Blue</we-button>
            <we-button data-select-class="x_bubble2">Green</we-button>
         </we-button-group>
      </div>
   </xpath>
</template>

Крім того, SCSS пов’язаний з бульбашками у файлі s_airproof_carousel/000.scss.

Додайте свій фрагмент коду на головну сторінку. Ви можете знайти всю необхідну інформацію у файлі home.xml з нашого прикладу модуля.

Створіть новий шаблон динамічних фрагментів¶

Динамічні фрагменти – це корисні структурні блоки. Вони дозволяють отримувати інформацію з серверної частини та відображати її на вебсайті відповідно до певних фільтрів.

Вже існує кілька шаблонів макетів для відображення динамічних фрагментів. Однак жоден з існуючих шаблонів повністю не відповідає потребам вашого клієнта.

На основі дизайну Airproof створіть власний шаблон, який ви застосуєте до динамічного фрагмента продукту на головній сторінці.

Спочатку створіть власний шаблон, який буде додано до списку шаблонів динамічних товарів. Він має містити такі елементи:
- Додайте посилання Дізнатися більше.
- Додайте ефект наведення курсора на картки.
- Перемістіть стрілки навігації.
Ви знайдете ці значки тут.

Перегляньте також
Див. довідкову документацію щодо створення шаблону для динамічних фрагментів.

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

Перегляньте також
Див. довідкову документацію щодо того, як виклик шаблона.

Solutions

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

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

Редагувати на GitHub