От автора: в этом уроке мы рассмотрим концепцию того, что такое макет OpenCart. Мы начнем с изучения основных макетов, доступных в OpenCart, и по мере продвижения узнаем, как можно создавать новые макеты. Далее мы увидим связь макетов с продуктами, категориями и модулями.
Я предполагаю, что вы используете последнюю версию OpenCart 2.0. Конечно, макеты также доступны и в предыдущих версиях OpenCart, но мы будем придерживаться последней версии, поскольку интерфейс несколько иной, чем у версий OpenCart 1.x.
Концептуальное понимание макетов OpenCart
«Макеты» в OpenCart- это концепция организации и предоставления шаблонов для разных страниц вo front-end. Что это означает «другой «вид» страницы»? Если посмотреть на разные страницы в OpenCart, можно заметить, что структура «макета» не везде одинакова. Например, макет страницы «Список продуктов» не совпадает с макетом страницы «Сведения о продукте».
Кроме того, структура варьируется на разных страницах, таких как «Страницы учетных записей», «Контактная страница», страница «Оформить заказ» и т. д. Таким образом, на картинке появляется макет. Иными словами, макеты — это шаблоны — декораторы, которые готовят полную страницу, заполняя слоты и модули, доступные для этого конкретного макета.
С другой стороны, макеты также полезны в OpenCart для назначения на странице разных модулей. Например, если нужно отобразить модуль «Баннер» на странице сведений о продукте, можно сделать это из back-end, поскольку макет страницы деталей продукта уже доступен в ядре. OpenCart также позволяет создавать новые макеты из back-end, чтобы вы могли переопределять макеты по умолчанию, назначенные различным страницам front-end.
Исследование основных макетов
Давайте посмотрим на встроенные макеты, доступные в OpenCart. Перейдите к серверу OpenCart. В навигации перейдите в раздел System > Design > Layouts в котором будут перечислены основные макеты.
Как вы видите, есть список уже существующих макетов. Нажмите на значок «Edit» макета Home, как показано на скриншоте выше, чтобы настроить параметры, связанные с компоновкой.
Стоит понимать, что именно означает каждый раздел конфигурации.
Layout Name (Название макета)
Это просто название макета. Он должен быть настроен на нечто разумное, так как это поможет нам позже во время назначения модуля.
Route Assignment (Назначение маршрута)
Здесь важна ценность столбца «Route», который предлагает OpenCart, что всякий раз, когда на странице front-end есть URL-адрес, содержащий «common/home», он должен активировать эту настройку, связанную с компоновкой. Это означает, что он активирует все модули, назначенные этому макету во время запроса домашней страницы во front-end.
Module Assignment (Назначение модуля)
В этом разделе вы увидите, что модули уже настроены для отображения на главной странице. Для позиции «Content Top» назначены три модуля, хотя по желанию можно добавить и больше, чтобы отображать их в разных позициях на главной странице. Например, вы можете добавить модуль «Banner» в положение «Content Bottom».
Точно так же можно настроить параметры для других макетов. OpenCart предоставляет действительно удобный интерфейс для назначения модулей различным позициям макета.
В следующих разделах мы увидим, как создать новый макет и использовать этот макет, чтобы переопределить основные макеты OpenCart.
Добавление нового макета из исходного кода
Перейдите на страницу System > Design > Layouts. Нажмите знак +, чтобы добавить новый макет. Заполните необходимую информацию, как показано на следующем снимке экрана, и сохраните ее.
Мы ввели «Custom Product Layout» в качестве названия макета и назначили модуль «Banner > Category»» в положение «Column Right». Это означает, что всякий раз, когда наш макет активируется для любого запроса в интерфейсе, он отображает модуль «Banner» на правой боковой панели.
Существует два способа активировать макет для любого front-end запроса. Мы уже обсуждали первое- назначение «Route» в настройках конфигурации макета. Другая опция «override» доступна для определенных страниц front-end. Мы рассмотрим это отдельно.
Макеты, связанные с продуктами и категориями
Теперь, когда мы создали пользовательский макет, давайте рассмотрим, как можно использовать функцию переопределения макета в OpenCart. Чтобы упростить работу, я буду использовать пример продуктов, по умолчанию доступных в OpenCart.
Перейдите в Catalog > Products, где будут перечислены все продукты, доступные в магазине. Давайте отредактируем продукт «iMac» в категории «Desktops > Mac».
В интерфейсе редактирования продукта перейдите на вкладку «Design», где вы увидите параметр Layout Override для хранилища по умолчанию. Выберите Custom Layout в раскрывающемся списке и сохраните продукт.
Вы только что переопределили макет продукта по умолчанию продукта «iMac» с помощью нашего макета «CustomLayout»! Это означает, что всякий раз, когда кто-то посещает страницу сведений о продукте «iMac» в front-end, для этой страницы будет активирован «CustomLayout». И, как мы обсуждали в предыдущем разделе, он отобразит модуль «Banner» в позиции «Column Right». Давайте проверим!
Точно так же вы можете переопределять макеты для категорий!
Вывод
Я считаю, что вы должны иметь базовое представление о том, как работают макеты в OpenCart. Макеты действительно полезны для переопределения макетов по умолчанию и назначения модулей на разные позиции в OpenCart.
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
