Изменение шаблона в OpenCart: настраиваем домашнюю страницу под свои нужды

29 Мая 2022г. в 05:07

Как вы могли заметить, route домашней страницы содержит значение common/home. Как мы уже говорили ранее, вы всегда можете по роуту найти подходящий файл шаблона макета.



Если взглянуть на файл home.tpl, можно понять, что большая часть контента генерируется элементами типа $header, $footer и т.д. Вы уже знаете, что контент переменных $header и $footer хранится в файлах header.tpl и footer.tpl в папке template/common.

В стандартной теме OpenCart на домашней странице нет модулей в позициях column left и column right. То есть переменные $column_left и $column_right ничего не делают. Большая часть контента, помимо хедера и футера, находятся в $content_top или $content_bottom. Модули slideshow и featured присвоены позиции content top, а модуль carousel присвоен позиции content bottom макета home. Давайте более подробно разберем, как эти модули прикрепляются к макету страницы home.

Назначение модуля через back end
Авторизуйтесь в back end и перейдите в «Extensions > Modules». Здесь перечислены все модули системы. Кликните edit на модуле slideshow. Откроется интерфейс назначения модуля.

На этом экране очень мало настроек. Нам нужна колонка layout и position. Судя по значениям, модуль slideshow будет отображаться в content top макета home.

Здесь можно назначить slideshow на любой макет в любую позицию с помощью кнопки add module. Разберем другой пример. На странице списка модулей кликните на ссылку edit модуля featured.



Значения layout и position совпадают со значениями модуля slideshow. Теперь вы знаете, как модули отображаются на домашней странице. Вы могли заметить кнопку remove. С ее помощью можно снять назначение модуля с определенного макета. Откройте настройки модуля carousel сами!

Исправление макета домашней страницы
Поскольку вы теперь знаете, как назначать и снимать модули с определенных страниц и позиций, мы выполним эти операции для макета домашней страницы. Зайдите в панель администратора и перейдите в «Extension > Modules». Откроется список модулей.

Сейчас мы удалим все модули, назначенные на домашнюю страницу. Кликните на ссылку edit модуля slideshow. Нажмите на remove, чтобы снять назначение модуля с макета home. Далее кликните save для сохранения изменений. Повторите процедуру для модулей carousel и featured.

Если теперь открыть домашнюю страницу, она должна быть почти пустой, за исключением хедера и футера. Не беспокойтесь, мы на правильном пути! Далее мы назначим ряд модулей в column left и column right домашней страницы. Давайте вернемся на страницу со списком модулей.

Кликните на ссылку edit модуля category. В правом нижнем углу страницы появится кнопка add module, по клику на которую в список добавится новая строка. В этой строке в колонке layout выберите home, position выберите column left. Теперь кликните на save для сохранения изменений.

Кликните на ссылку edit модуля account. Чтобы добавить новую строку, кликните на add module. В новой строке в колонке layout выберите home, position выберите column right. Сохраните изменения кликом по save. Давайте теперь откроем домашнюю страницу:



Изменения файлов макета
На данный момент мы внесли все коррективы в макет через back end. В этой секции мы добавим немного статичного контента в home.tpl. Если вам нужно добавить статичный текст в шаблон, не вставляйте его прямо в шаблон. Вместо этого выполните стандартный процесс для OpenCart. Давайте сделаем это.

Вы не будете напрямую редактировать файл home.tpl темы default, давайте перепишем его в пользовательской теме! Откройте catalog/language/english/english.php. В конец файла добавьте следующую строку перед ?>.

$_['text_welcome'] = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

$_['text_welcome'] = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
Теперь откройте catalog/controller/common/home.php. В этот файл контроллера мы добавим переменную языка из файла English.php, чтобы она стала доступна для отображения в home.tpl. В файле home.php перед следующей строкой

$this->response->setOutput($this->render());

$this->response->setOutput($this->render());
Вставьте эту

$this->data['welcome_text'] = $this->language->get('text_welcome');

$this->data['welcome_text'] = $this->language->get('text_welcome');
Так переменная $welcome_text будет доступна в файле шаблона макета точно так же, как и другие переменные. Теперь осталось подключить $welcome_text в home.tpl. Файл home.tpl должен выглядеть так:

<?php echo $header; ?>
<?php echo $column_left; ?>
<?php echo $column_right; ?>
<div id="content">
<?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<div><?php echo $welcome_text; ?></div>
<?php echo $content_bottom; ?>
</div>
<?php echo $footer; ?>

<?php echo $header; ?>
<?php echo $column_left; ?>
<?php echo $column_right; ?>
<div id="content">
<?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<div><?php echo $welcome_text; ?></div>
<?php echo $content_bottom; ?>
</div>
<?php echo $footer; ?>
Я внес пару изменений в этот файл. Добавил переменную $welcome_text в тег div. Также удалил display:none у тега h1, теперь заголовок отображается. Ну и для лучшей читаемости отформатировал код. Конечный скриншот!



Необходимо отметить несколько важных моментов. Мы редактировали файлы English.php и home.php, делать это строго не рекомендуется. Мы сделали это, чтобы не усложнять пример. По-хорошему, нужно было использовать расширение OpenCart vQmod для редактирования файлов ядра.

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

Конечно, это требует более глубоких знаний принципов работы модели OpenCart. Назначьте пару модулей на различные позиции, чтобы увидеть, как все работает.