Розділ 5 – Динамічні шаблони

Адаптуйте шаблон магазину

Тепер давайте адаптуємо динамічні розділи веб-сайту. Як ви, можливо, знаєте, деякі сторінки, такі як сторінки для електронної комерції, генеруються автоматично. Такі сторінки, як магазин, продукт та оформлення замовлення, генеруються автоматично після встановлення додатку website_sale. Ці шаблони сторінок отримують відображену інформацію з серверної частини.

Щоб змінити ці сторінки, нам потрібно відредагувати стандартний шаблон Odoo. Це можна зробити за допомогою SCSS, пресетів та, особливо, XPath. Знайдіть стандартний шаблон Odoo, який ви хочете змінити, та розширте його за допомогою XPath. Після розробки дизайну Airproof, почнемо зі зміни вигляду магазину.

1. Спочатку знайдіть стандартний шаблон в Odoo: website_sale ‣ templates.xml ‣ id=»products».

2. Застосуйте всі зміни до вашого файлу website_sale_templates.xml. Почніть з:

   • Додайте банер.

   • Адаптуйте макет фільтра категорій електронної комерції ліворуч.

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

   • Перемістіть навігаційні елементи.

   • Приховайте опцію перегляду у представленні списку або сітки.

   • Створіть відповідний дизайн та інформацію для карток товарів.

Порада

• Застосуйте свої зміни, використовуючи пресетні налаштування, XPath та SCSS.

• Щоб увімкнути фільтрацію атрибутів/варіантів, активуйте опцію Варіанти продукту у налаштуваннях серверної частини веб-сайту та налаштувати атрибути та варіанти для продуктів.

Solutions

Знайдіть рішення в нашому прикладі Airproof на presets.xml, website_sale_templates.xml частина сторінка магазину, та shop.scss.

Адаптуйте шаблон сторінки товару

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

• Видаліть рядок пошуку (якщо це не було зроблено в попередній вправі).

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

• Оновіть значок кнопки Додати до кошика.

• Вставте заголовок над специфікаціями продукту (цей розділ відображається лише тоді, коли продукт має один варіант для кожного атрибута).

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

• Додайте заголовок і застосуйте раніше створений шаблон продукту до розділу Alternative products (переконайтеся, що альтернативні продукти призначені продукту в серверній частині, щоб цей розділ відображався).

• Впровадьте нову зону випадання під інформацією про товар, видиму для всіх товарів. Як варіант використання, додайте структурний блок Text-Image за допомогою Конструктора веб-сайтів (наприклад: Див. знімок екрана сторінки герметичного товару з “Шість причин купити…”).

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

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

Порада

• Внесіть зміни, використовуючи пресети, XPath та SCSS. Обов’язково правильно прокоментуйте свій код, щоб ви могли зорієнтуватися.

• Зона випадання буде видимою для всіх товарів. Щоб створити окрему зону випадання для кожного товару, потрібно додати нове поле до моделі товару.

Solutions

Знайдіть рішення в нашому прикладі Airproof на presets.xml, website_sale_templates.xml частина сторінка продукту, та product_page.scss.