Макети

Макети в ocStore дають повний контроль над структурою сторінок магазину. Кожен макет визначає, які модулі показуються в певних позиціях (бічні колонки, верх і низ вмісту), а також для яких роутів (шляхів) вітрини він застосовується. Завдяки цьому можна створювати окреме компонування для різних типів сторінок.

Стандартні макети#

ocStore має низку готових макетів для типових сторінок, наприклад:

Точні назви та набір стандартних макетів залежать від встановлених даних вашого магазину — перевірте список у розділі Дизайн → Макети.

Як відкрити макети#

Крок 1. Увійдіть в адмінпанель#

Відкрийте в браузері адресу адмінпанелі ocStore (зазвичай yourstore.com/admin).

Введіть облікові дані адміністратора.

Крок 2. Перейдіть до «Дизайн → Макети»#

У головному меню адмінпанелі виберіть Дизайн, а потім Макети.

Крок 3. Перегляньте список макетів#

Відкриється сторінка зі списком усіх наявних макетів.

У списку показано назви макетів і кнопки дій для редагування.

Створення нового макета#

Крок 1. Натисніть «Додати»#

Натисніть кнопку Додати (+) у правому верхньому куті списку макетів.

Крок 2. Налаштуйте макет#

Заповніть форму макета.

Назва макету

Роути макета

Розташування модулів

Крок 3. Збережіть макет#

Натисніть Зберегти. З'явиться повідомлення про успішне збереження.

Редагування наявного макета#

Крок 1. Знайдіть макет#

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

Натисніть кнопку Редагувати (іконка олівця) біля назви макета.

Крок 2. Змініть налаштування#

Внесіть зміни у формі макета:

• Назва макету: за потреби оновіть назву
• Роути: додайте, видаліть або змініть пари «магазин — шлях»
• Розташування модулів: змініть порядок, додайте нові модулі або приберіть наявні

Керуйтеся тими самими правилами, що й під час створення макета.

Крок 3. Збережіть зміни#

Натисніть Зберегти.

З'явиться повідомлення про успішне оновлення макета.

Докладно про налаштування макета#

Крок 1. Задайте назву макета#

Назва макета — це внутрішній ідентифікатор в адмінпанелі. Вона має бути зрозумілою та унікальною.

Докладні вимоги — у розділі Назва макету нижче.

Крок 2. Налаштуйте роути макета#

Роути визначають, які сторінки вітрини використовують цей макет. Можна призначити кілька пар «магазин — шлях».

Шаблони роутів і приклади — у розділі Роути макета нижче.

Крок 3. Розставте модулі#

Модулі розміщуються в певних позиціях сторінки. У кожній позиції може бути кілька модулів із власним порядком сортування.

Опис позицій і додавання модулів — у розділі Розташування модулів нижче.

Назва макету

• Обов'язкове поле: так
• Довжина: від 3 до 64 символів
• Призначення: внутрішня назва для адміністраторів
• Рекомендація: робіть назву унікальною та зрозумілою

Роути макета

Роути визначають, які сторінки використовують цей макет. Кожен роут складається з:

Параметр	Опис	Приклади
Магазин	До якого магазину застосовується (мультимагазин)	За замовчуванням, Магазин 2
Шлях	Роут, для якого вмикається макет	product/product, information/contact, common/home

Поширені шаблони роутів:

• product/product — усі сторінки товарів
• product/category — усі сторінки категорій
• product/manufacturer — сторінки виробників
• information/information — усі статті (інформаційні сторінки)
• information/contact — сторінка контактів
• common/home — головна сторінка
• account/% — сторінки особистого кабінету
• checkout/% — сторінки оформлення замовлення

Зіставлення роутів: роут порівнюється із шаблоном через SQL LIKE, тому символ % означає «будь-яке продовження». Для товарів, категорій, виробників і статей спершу перевіряється макет, вибраний у самому записі (вкладка Дизайн, поле Змінити макет). Якщо жоден роут не підходить, використовується Макет за замовчуванням із Система → Налаштування (вкладка Загальні).

Розташування модулів

Модулі можна розміщувати в чотирьох основних позиціях:

Позиція	Розташування	Типове використання
Верх сторінки	Над основним вмістом	Банери, рекомендовані товари, акції
Низ сторінки	Під основним вмістом	Супутні товари, додаткова інформація
Ліва колонка	Ліва бічна панель	Категорії, фільтри, навігація
Права колонка	Права бічна панель	Акції, спеціальні пропозиції

Порядок сортування: у межах позиції модулі показуються за зростанням порядку сортування (0 — перед 1).

Додавання модулів:

1. Виберіть модуль зі списку в потрібній позиції
2. Перевірте позицію (Верх сторінки, Низ сторінки, Ліва колонка, Права колонка)
3. Вкажіть порядок сортування (0, 1, 2 тощо)
4. Натисніть кнопку Додати модуль

Сценарії використання власних макетів#

1. Особливий макет головної сторінки

Створіть унікальну головну сторінку з іншим набором модулів:

• Роут: common/home
• Модулі: рекомендовані товари у верху сторінки, новинки внизу сторінки, акції в правій колонці
• Мета: виділити акції та новинки на головній

2. Покращена сторінка товару

Додайте модулі на сторінки товарів:

• Роут: product/product
• Модулі: рекомендовані товари внизу сторінки, категорії в лівій колонці, банер у правій колонці
• Мета: збільшити перехресні продажі та дати покупцю більше інформації

3. Оптимізація сторінок категорій

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

• Роут: product/category
• Модулі: фільтр у лівій колонці, рекомендовані товари категорії у верху сторінки, банер унизу сторінки
• Мета: допомогти покупцям швидше знаходити товари та просувати пропозиції категорії

4. Спрощене оформлення замовлення

Приберіть зайве з процесу оформлення:

• Роут: checkout/%
• Модулі: без бічних колонок (вміст на всю ширину), блок довіри внизу сторінки
• Мета: менше відволікати покупця й підвищити конверсію

Практичний приклад: особливий макет головної сторінки#

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

Крок 1. Сплануйте макет#

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

• Верх сторінки: слайдер рекомендованих товарів
• Низ сторінки: сітка новинок
• Права колонка: банер зі спецпропозиціями
• Ліва колонка: навігація категоріями

Накидайте ескіз, щоб уявити розташування модулів.

Крок 2. Створіть макет#

1. Перейдіть до Дизайн → Макети
2. Натисніть Додати
3. Введіть назву макета: «Спеціальна головна»
4. Додайте роут: магазин — «За замовчуванням», шлях — common/home
5. Натисніть Зберегти

Крок 3. Додайте модулі до позицій#

• Верх сторінки: модуль «Рекомендовані», порядок сортування 0
• Низ сторінки: модуль «Новинки», порядок сортування 0
• Права колонка: модуль «Банер» (налаштований зі спецпропозиціями), порядок сортування 0
• Ліва колонка: модуль «Категорії», порядок сортування 0

Для кожного натисніть Додати модуль, а потім Зберегти макет.

Модулі мають бути заздалегідь встановлені й налаштовані в Доповнення → Доповнення (тип «Модулі»). Назви модулів у списку залежать від того, як ви назвали їхні екземпляри.

Крок 4. Перевірте макет#

1. Відкрийте головну сторінку магазину
2. Переконайтеся, що всі модулі на своїх місцях
3. Перевірте вигляд на мобільних пристроях
4. Перевірте різні розміри екрана

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

Якщо для роуту common/home уже є інший макет (наприклад, стандартний «Головна»), приберіть цей роут з нього, щоб уникнути конфлікту.

Зв'язок з іншими можливостями#

Підтримка кількох магазинів

Макети підтримують мультимагазин:

1. Створюйте різні макети для різних магазинів
2. Прив'язуйте макети до конкретних магазинів через налаштування роутів
3. Кожен магазин може мати зовсім іншу структуру сторінок

Керування модулями

Макети працюють з усіма модулями ocStore:

1. Встановіть і налаштуйте модулі в Доповнення → Доповнення (тип «Модулі»)
2. Додайте налаштовані модулі до макетів у Дизайн → Макети
3. Кожен екземпляр модуля можна розмістити в різних позиціях різних макетів

Зв'язок із шаблоном

Макети доповнюють систему шаблонів:

1. Шаблон (тема) відповідає за зовнішній вигляд (HTML/CSS)
2. Макет відповідає за розміщення модулів і структуру сторінки
3. Разом вони дають повний контроль над дизайном

Найкращі практики#

Стратегія макетів#

1. Починайте з простого: беріть стандартні макети й змінюйте за потреби
2. Однакова структура: використовуйте схоже розташування модулів для схожих типів сторінок
3. Мобільні пристрої: враховуйте, як макет виглядає на смартфонах
4. Швидкодія: обмежуйте кількість модулів на сторінці для швидшого завантаження

5. Спершу конкретні: уникайте ситуацій, коли загальний шаблон (наприклад, account/%) перекриває конкретний роут в іншому макеті
6. Без конфліктів: стежте, щоб роути різних макетів ненавмисно не перетиналися
7. Ретельна перевірка: переконайтеся, що всі шаблони роутів працюють як очікується
8. Документування: ведіть список власних роутів на майбутнє

9. Логічний порядок: розташовуйте модулі в порядку читання (згори вниз, зліва направо)
10. Візуальна ієрархія: важливі модулі мають бути помітнішими
11. Баланс: рівномірно розподіляйте модулі між позиціями
12. Порожні позиції: залишайте позиції порожніми, якщо вони не потрібні (вони не відображаються)

Усунення проблем#

Поширені проблеми#

Макет не застосовується до сторінок

Можливі причини:

• Шаблон роуту не відповідає роуту сторінки
• Для цього роуту вже є інший макет
• Для запису (товару, категорії тощо) на вкладці Дизайн вибрано інший макет
• Макет прив'язано не до того магазину

Рішення: перевірте налаштування роутів і переконайтеся, що вони точно відповідають роуту сторінки.

Не вдається видалити макет

Можливі причини:

• Макет призначено макетом за замовчуванням для магазину
• Макет використовують товари, категорії, виробники, статті або записи блогу
• Обмеження прав доступу

Рішення:

1. Перевірте поле Макет за замовчуванням у Система → Налаштування (вкладка Загальні)
2. Спершу призначте записам інші макети
3. Переконайтеся, що користувач має право змінювати макети

Модулі не відображаються

Можливі причини:

• Модуль вимкнено
• Модуль не додано до макета
• Шаблон (тема) не виводить цю позицію
• Конфлікт порядку сортування

Рішення:

1. Перевірте статус модуля в Доповнення → Доповнення (тип «Модулі»)
2. Переконайтеся, що модуль додано до макета в правильну позицію
3. Перевірте, чи підтримує шаблон цю позицію
4. За потреби змініть порядок сортування

Конфлікти макетів між магазинами

Можливі причини:

• Пари «магазин — шлях» перетинаються
• Макет за замовчуванням конфліктує з макетами конкретного магазину

Рішення: перегляньте всі призначення роутів і переконайтеся, що кожна пара «магазин — шлях» унікальна.