Cоздаем новую позицию в макете для вывода модулей в Opencart 2.3

Для вывода модулей не всегда достаточно тех позиций в макете, что предоставляет по-умолчанию Opencart. Поэтому, рано или поздно, возникает необходимость в создании своих кастомных позиций.

В интернете не слишком много информации по поводу решения этого вопроса, однако, некоторые инструкции все же есть. В основном они относятся к версии Opencart 1.5 или Opencart 2.

Создаем новую позицию в Opencart 2.3

В данном примере мы создадим позицию, расположенную ниже блока header, и выведем в новом месте модуль карусели.

Создание новой позиции, до и после

Создание контроллера

Начнем с того, что создадим контроллер новой позиции в папке "catalog/controller/common/".

Не забываем про бэкап!

Для этого просто скопируем существующий контроллер content_top.php, который уже находится в указанной папке, и переименуем его в head_bottom.php

Теперь в head_bottom.php необходимо изменить строчку:

  class ControllerCommonContentTop extends Controller {

на

  class ControllerCommonHeadBottom extends Controller {

Дополнительно, все встречающиеся в этом файле упоминания content_top нужно заменить на head_bottom.

Создание шаблона новой позиции

В папке "catalog/view/theme/ВАШ_ШАБЛОН/template/common/" создаем файл head_bottom.tpl и вставляем в него следующий код (html-контейнер для вывода модулей может быть любой, по вашему усмотрению):

  <?php if ($modules) { ?>
    <div class="container">
      <div class="row">
        <div id="head-bottom" class="col-md-12 hidden-xs">
          <?php foreach ($modules as $module) { ?>
            <?php echo $module; ?>
          <?php } ?>
        </div>
      </div>
  </div>
  <?php } ?>

Вывод новой позиции под хэдером

Откроем файл "catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl".

В этом файле, в самом конце, после закрывающей скобки <?php } ?> (в дефолтной теме) вставляем код вывода нового шаблона:

  <?php echo $head_bottom ?>

Переходим к административной части

Теперь необходимо отобразить новую позицию в админке на странице макета. Для этого перейдем к файлу "admin/view/template/design/layout_form.tpl".

Здесь находим таблицу с id="module-content-top". Строчка:

  <table id="module-content-top" class="table table-striped table-bordered table-hover">

Эту таблицу нужно скопировать целиком и вставить выше.

В скопированной таблице надо изменить id="module-content-top" на id="module-head-bottom", а так же поменять строчки:

  <td class="text-center"><?php echo $text_content_top; ?></td>

на

  <td class="text-center"><?php echo $text_head_bottom; ?></td>

А так же:

  <?php if ($layout_module['position'] == 'content_top') { ?>

на

  <?php if ($layout_module['position'] == 'head_bottom') { ?>

Двигаемся к концу скопированной таблицы и находим кнопку:

  <button type="button" onclick="addModule('content-top');" data-toggle="tooltip" title="" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>

меняем её на эту:

  <button type="button" onclick="addModule('head-bottom');" data-toggle="tooltip" title="" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>

Таблица настроена, но это еще не все. Переходим в конец данного файла, к строчке:

  $('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom').delegate('select[name*=\'code\']', 'change', function() {

Здесь нам нужно добавить id новой таблицы (#module-head-bottom). Должно получиться так:

  $('#module-column-left, #module-column-right, #module-head-bottom, #module-content-top, #module-content-bottom').delegate('select[name*=\'code\']', 'change', function() {

Ниже аналогичная ситуация. Меняем это:

  $('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom').trigger('change');

на это:

  $('#module-column-left, #module-column-right, #module-head-bottom, #module-content-top, #module-content-bottom').trigger('change');

Изменяем языковой файл

В файле "admin/language/template/ru-ru/design/layout.php" после строчки:

  $_['text_column_right'] = 'Правая колонка';

вставляем эту:

  $_['text_head_bottom'] = 'Нижняя часть Header';

Модифицируем контроллер

Редактировать контроллер вручную не рекомендуется. Поэтому лучше оформить данные изменение в виде модификатора.

В модификатор можно упаковать и остальные изменения, которые мы сделали.

Пока мы в каталоге admin, разберемся с контроллером, находящимся тут. Откроем "admin/controller/design/layout.php" и перед строчкой:

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

вставим:

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

Далее, уже в catalog, откроем контроллер header.php по адресу "catalog/controller/common/header.php" и найдем там строчку:

  $data['cart'] = $this->load->controller('common/cart');

После нее нужно вставить:

  $data['head_bottom'] = $this->load->controller('common/head_bottom');

После создания новой позиции в макете не работает слайдер или другие модули

Почему-то на данном этапе некоторые инструкции в интернете останавливаются. И, действительно, если мы перейдем в админку сайта (в раздел Дизайн > Схемы) и попробуем настроить, например, макет главной страницы (или home), то увидим желанную новую позицию для размещения модулей.

Раздел Макеты в Opencart

Однако, если мы попробуем добавить в него слайдер или карусель (при условии, что на странице они больше нигде не выводятся. Если выводится, то на первый взгляд, все будет хорошо и модуль отработает корректно), то увидим, как изображения из слайдера выстроятся друг под другом и вообще - карусель работать не будет.

Слайдер owl-carousel не работает

Такое происходит потому, что при использовании новой позиции скрипты выбранных модулей не подключаются к странице. Если на странице будет другой такой же модуль, то все будет работать - этот модуль просто инициализирует подключение нужных скриптов и стилей самостоятельно.

Чтобы устранить эту проблему, нужно просто добавить в контроллер home.php нашу новую позицию для вывода.

Для этого откроем файл "catalog/controller/common/home.php" и после строчки

  $data['content_bottom'] = $this->load->controller('common/content_bottom');

добавим строчку:

  $data['head_bottom'] = $this->load->controller('common/head_bottom');

После этого слайдер, карусель или другой стандартный модуль должны заработать.