Від автора: у цьому уроці ми розглянемо концепцію того, що таке макет OpenCart. Ми почнемо з вивчення основних макетів, доступних в OpenCart, і по мірі просування дізнаємося, як можна створювати нові макети. Далі ми побачимо зв’язок макетів з продуктами, категоріями і модулями.
Я припускаю, що ви використовуєте останню версію OpenCart 2.0. Звичайно, макети також доступні і в попередніх версіях OpenCart, але ми будемо дотримуватися останньої версії, оскільки інтерфейс дещо інший, ніж у версії OpenCart 1.x.
Концептуальне розуміння макетів OpenCart
«Макети» в OpenCart – це концепція організації та надання шаблонів для різних сторінок під front-end. Що це означає «інший «вид» сторінки»? Якщо подивитися на різні сторінки в OpenCart, можна помітити, що структура «макета» не скрізь однакова. Наприклад, макет сторінки «Список продуктів» не збігається з макетом сторінки «Відомості про продукт».
Крім того, структура варіюється на різних сторінках, таких як «Сторінки облікових записів», «Контактна сторінка», сторінка «Оформити замовлення» і т. д. Таким чином, на картинці з’являється макет. Іншими словами, макети — це шаблони — декоратори, які готують повну сторінку, заповнюючи слоти і модулі, доступні для цього конкретного макета.
З іншого боку, макети також корисні в OpenCart для призначення на сторінці різних модулів. Наприклад, якщо потрібно відобразити модуль «Банер» на сторінці відомостей про продукті, можна зробити це з back-end, оскільки макет сторінки деталей продукту вже доступний в ядрі. OpenCart також дозволяє створювати нові макети з back-end, щоб ви могли перекрити макети за замовчуванням, призначені різним сторінкам front-end.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
Дослідження основних макетів
Давайте подивимося на вбудовані макети, доступні в OpenCart. Перейдіть до сервера OpenCart. У навігації перейдіть в розділ System > Design > Layouts в якому будуть перераховані основні макети.
Як ви бачите, є список вже існуючих макетів. Натисніть на значок «Edit» макета Home, як показано на скріншоті вище, щоб налаштувати параметри, пов’язані з компонуванням.
Варто розуміти, що означає саме кожен розділ конфігурації.
Layout Name (Назва макета)
Це просто назву макета. Він повинен бути налаштований на щось розумне, так як це допоможе нам пізніше під час призначення модуля.
Route Assignment (Призначення маршруту)
Тут важлива цінність стовпця «Route», який пропонує OpenCart, що всякий раз, коли на сторінці front-end є URL-адреса «common/home», він повинен активувати цю настройку, пов’язану з компонуванням. Це означає, що він активує всі модулі, призначені цього макету під час запиту домашньої сторінки під front-end.
Module Assignment (Призначення модуля)
У цьому розділі ви побачите, що модулі вже настроєно для відображення на головній сторінці. Для позиції «Content Top» призначено три модулі, хоча за бажанням можна додати і більше, щоб відображати їх у різних позиціях на головній сторінці. Наприклад, ви можете додати модуль «Банер» в положення «Content Bottom».
Точно так само можна налаштувати параметри для інших макетів. OpenCart дійсно надає зручний інтерфейс для призначення модулів різних позиціях макета.
У наступних розділах ми побачимо, як створити новий макет і використовувати цей макет, щоб перевизначити основні макети OpenCart.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
Додавання нового макета з вихідного коду
Перейдіть на сторінку System > Design > Layouts. Натисніть знак”+”, щоб додати новий макет. Заповніть необхідну інформацію, як показано на знімку екрана, і збережіть її.
Ми ввели «Custom Product Layout» в якості назви макета і призначили модуль «Banner > Category»» в положення «Column Right». Це означає, що всякий раз, коли наш макет активується для будь-якого запиту в інтерфейсі, він відображає модуль «Банер» на правій бічній панелі.
Існує два способи активувати макет для будь-якого front-end запиту. Ми вже обговорювали перше – призначення «Route» в налаштуваннях конфігурації макета. Інша опція «override» доступна для певних сторінок front-end. Ми розглянемо окремо.
Макети, пов’язані з продуктами і категоріями
Тепер, коли ми створили макет, давайте розглянемо, як можна використовувати функцію перевизначення макета в OpenCart. Щоб спростити роботу, я буду використовувати приклад продуктів, за замовчуванням доступних в OpenCart.
Перейдіть в Catalog > Products, де будуть перераховані всі продукти, доступні в магазині. Давайте відредагуємо продукт «iMac» в категорії «Desktops > Mac».
В інтерфейсі редагування продукту перейдіть на вкладку «Design», де ви побачите параметр Layout Override для сховища за замовчуванням. Виберіть Custom Layout в розкривному списку і збережіть продукт.
Ви тільки що переопределили макет продукту за замовчуванням продукту «iMac» за допомогою нашого макета «CustomLayout»! Це означає, що всякий раз, коли хтось відвідує сторінку дані про продукт «iMac» front-end, для цієї сторінки буде активовано «CustomLayout». І, як ми говорили в попередньому розділі, він відобразить модуль «Банер» в позиції «Column Right». Давайте перевіримо!
Точно так само ви можете змінити макети для категорій!
Висновок
Я вважаю, що ви повинні мати базове уявлення про те, як працюють макети OpenCart. Макети дійсно корисні для перевизначення макетів за замовчуванням і призначення модулів на різні позиції в OpenCart.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
