Создание пользовательской темы в OpenCart: часть 2

29 Мая 2022г. в 05:07

OpenCart предоставляет по умолчанию хорошую тему, которая послужит основой нашей новой темы. На самом деле, есть 2 сценария, зачем вам может понадобиться своя тема:

Вы хотите полностью изменить стандартный интерфейс

Вы хотите поменять пару вещей, например, пары цветов, структуру макета и брендинг

В любом случае я рекомендую создать новую пользовательскую тему, а не редактировать файлы стандартной. Так будет проще при обновлении OpenCart. Для выполнения урока у вас должна быть рабочая установка OpenCart. Если ее нет, ее необходимо установить. После можете приступать!

Настройка скелета
Создадим новую папку mycustomtheme в каталоге catalog/view/theme. Это будет контейнер для других файлов: изображений, стилей и шаблонов. Далее необходимо создать 3 папки в каталоге mycustomtheme: image, stylesheet и templates.



Вы настроили базовый скелет, необходимый для темы. На самом деле, уже сейчас вы можете включить пользовательскую тему через back end, и она будет работать.

Активация новой темы
Давайте активируем пользовательскую тему через back end. После авторизации в back end’е перейдите в System > Settings. Здесь будут перечислены все магазины в текущей установке OpenCart.



В большинстве случаев магазин будет один, но если у вас их несколько, то и записей будет более одной. OpenCart позволяет управлять несколькими магазинами на одной установке.

Это действительно важная функция, если у вас несколько магазинов, и вы не хотите для каждого устанавливать OpenCart. Всеми магазинами можно управлять через один интерфейс панели администратора! Настройка нескольких магазинов не входит в тему урока, но такой функцией нужно уметь пользоваться.

Возвращаемся к теме, кликните на ссылку edit в колонке action. Должен открыться интерфейс настроек магазина.



Перейдите на вкладку store. Откроется форма настройки, где можно выбрать front end тему. Помимо темы default в выпадающем списке template должна отображаться наша тема mycustomtheme. Выберите ее и кликните save для сохранения изменений.



Если теперь открыть front end, все должно заработать. Мы еще не создали ни одного файла в нашей пользовательской теме, но как это работает? Вот тут нам нужно переписать шаблон.

Понятие логики перезаписи шаблона
Если активной темой задать mycustomtheme, front end будет выглядеть ровно так же, как и до активации через back end. В этом виновата система перезаписи шаблонов.

Давайте разберем небольшой пример, чтобы понять принцип: для рендеринга домашней страницы OpenCart использует шаблон catalog/view/theme/*/template/common/home.tpl. Звездочка в пути означает название темы. Чтобы найти home.tpl, OpenCart выполнит следующие действия:

Так как в качестве активной темы магазина задана mycustomtheme, первым делом система попытается найти файл catalog/view/theme/mycustomtheme/template/common/home.tpl. Если он есть, OpenCart берет файл и прекращает процесс.

Если OpenCart не может найти файл home.tpl в активной теме, он пытается взять файл стандартной темы catalog/view/theme/default/template/common/home.tpl. Файл home.tpl будет находиться в этой папке, если вы, конечно, не привязаны к файлам шаблонов темы по умолчанию.

OpenCart всегда будет обращаться к теме default, если не может найти необходимый файл в активной пользовательской теме. Получается, сейчас задействованы файлы темы default, несмотря на активацию mycustomtheme.

Очень удобно, когда нужно поправить несколько файлов шаблона. Эти файлы нужно лишь скопировать в папку с пользовательской темой.

Расширение пустой пользовательской темы
Наша тема mycustomtheme сейчас пуста. Давайте наполним ее контентом. Создайте папку common в каталоге template пользовательской темы. Скопируйте файлы home.tpl и header.tpl из папки template/common темы default. Эти файлы необходимо вставить в созданную папку common.

Также скопируйте все стили из папки stylesheet темы default в папку stylesheet нашей темы. Повторите то же самое для всех изображений из папки image. Сейчас дерево папок вашей темы должно выглядеть следующим образом:



Прежде чем продолжить, нужно отметить пару важных моментов. В свою тему необходимо скопировать только файлы, которые необходимо отредактировать. Остальные файлы будут подхватываться из темы default, поэтому нет нужды хранить копии файлов, если они не будут редактироваться.

Также вы должны сохранить структуру файлов шаблона, как в теме default. Мы сымитировали структуру стандартной темы при копировании файлов home.tpl и header.tpl в папку common.

Теперь я покажу все пути файлов, относящиеся к нашей теме. Откройте файл template/common/header.tpl в любимом текстовом редакторе. Код файла отображает хедер сайта. Если посмотреть внимательнее, в него статично забиты несколько ссылок на стили от темы default. Давайте сделаем так, чтобы стили тянулись из нашей темы. Найдите следующий код:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
И замените его на:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />
Сделайте то же самое для остальных ссылок на стили. Так все стили будут загружаться из нашей темы. Теперь откройте файл template/common/home.tpl и полностью замените весь код на:

<?php echo $header; ?>

<?php echo $column_left; ?>
<?php echo $column_right; ?>

<div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If this line appears, Our custom theme is doing it's part!</div><br/>
<div id="content">
<?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?>
</div>
</div>

<?php echo $footer; ?>

<?php echo $header; ?>

<?php echo $column_left; ?>
<?php echo $column_right; ?>

<div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If this line appears, Our custom theme is doing it's part!</div><br/>
<div id="content">
<?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?>
</div>
</div>

<?php echo $footer; ?>
Откройте домашнюю страницу, она должна измениться. Это лишь один пример перезаписи и кастомизации шаблонов пользовательской темы. В реальности необходимо менять намного больше шаблонов, чтобы они отвечали интегрируемому пользовательскому дизайну. В следующих уроках мы узнаем, как искать шаблон по его странице на front end.

Заключение
Эта статья направлена на понимание нюансов при создании пользовательской темы. Можете изучить код других файлов шаблона, чтобы лучше понять принцип работы тем в OpenCart. В следующей части мы подробно разберем пару общих шаблонов. И конечно, ваши отзывы только приветствуются.