Компоненты

Начиная с версии 8.15, в шаблонах для Moguta.CMS вы можете использовать компоненты.

Компонент – это независимый функциональный блок, содержащий в себе всё, что нужно для его работы – вёрстку, css, js и так далее.

Пример структуры простого компонента:

components/
    search/
        search.css
        search.js
        search.php

На первый взгляд, при использовании компонентного подхода возникает очевидная проблема – большое количество подключаемых css/js файлов.
Однако, есть два хороших выхода из этой ситации:
Использовать опцию «Объединить все CSS и JS в один файл» в разделе «Настройки/SEO» (опция доступна от редакции «Минимаркет» и выше);
Либо хранить в папках с компонентами только исходники, а затем собирать их в один бандл при помощи сброщика проектов (Gulp, Webpack и т.д.);

Зачем?

Независимость компонентов обеспечивает возможность их повторного использования,
а также удобство в разработке и поддержке проекта, но главное – вместе с опцией движка «Объединить все CSS и JS в один файл для ускорения сайта» компонентный подход позволит загружать на каждой странице только те стили и скрипты, которые нужны на этой странице.

Кроме того, пользователям будет проще вставлять шорткоды плагинов, если их направлять не на какую-то страницу и layout, а в конкретный блок.

Возможности компонентов:

Вложенная структура
Свободное перемещение
Повторное использование
Наследование

Вложенная структура

Компоненты можно полностью вставлять в другие компоненты.

Свободное перемещение

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

Повторное использование

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

Наследование

Если в файле настроек шаблона(config.ini) это разрешено, то при подключении компонента движок сначала будет искать его в текущем шаблоне,
затем в родительском(если он есть) и затем в стандартном шаблоне moguta-standard.

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

Кроме того, если вы хотите подключить компонент из другого шаблона,
но, например, изменить в нём один файл – вы можете скопировать к себе в шаблон папку компонента
только с этим файлом и изменить его. Все остальные файлы будут наследоваться.

Подключение компонента

Для подключения компонентов используется функция component().

<?php
component(
    'search',
    $array,
    'file'
);
?>

Функция component() принимает 3 параметра:

Параметр 1 (обязательный) – Название компонента

Название является полным адресом папки компонента от папки components.

Если компонент лежит в корне папки components, то просто указывается название папки,
если он вложенный, то указывается путь от папки components.

Пример 1:

<?php
// Структутра компонента
// components/
//      search/
//          search.php
//          search.css
//          search.js

// Подключение компонента search
// Компонент находится в корне папки components,
// имя файла с вёрсткой(search.php), соответствует названию папки,
// Следовательно мы можем опустить имя файла и указать только папку
component('search', $array);
?>

Пример 2:

<?php
// Структутра компонента
// components/
//      catalog/
//          item/
//              item.php
//              item.css

// Подключение компонента item
// Компонент находится не в корне папке components, а вложен в папку catalog,
// эту папку нужно указать в первом параметре.
// Имя файла и папки совпадает, так что имя файла опускаем
component('catalog/search', $array);
?>

Параметр 2 – Массив данных, передаваемых в компонент.
Если вы собираетесь использовать один из стандартных компонентов, то, чтобы понять какие данные передавать в массив,
проще всего будет посмотреть как подключается данный компонент в шаблоне moguta-standard.
Если вам нужен массив данных для своего нового компонента:
- Выведите на экран массив данных $data из контроллера текущей страницы с помощью функции <?php viewData($data); ?>.
  Возможно, необходимые вам данные уже есть на странице. Подробнее про массив $data.
- Если необходимых данных на странице нет, то вы можете получить их напрямую из базы данных при помощи метода DB::query().

Параметр 3 - Имя файла в папке компонента, который необходимо подключить.

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

Пример:

<?php
// Структутра компонента
// components/
//      modal/
//          modal_cart.php
//          modal_blank.php

// Подключение компонента modal
// Компонент находится в корне папки components.
// В компоненте два файла с вёрсткой -
// выбираем нужный, имя файла указываем последним параметром.
// Расширение .php можно опустить.
component('modal', $array, 'modal_cart');
?>

Обратите внимание! Для корректной работы компонентов в корне шаблона должен присутствовать файл настроек шаблона(config.ini)

Создание нового компонента

Перейдите в папку components в корне шаблона. Создайте её, если она отсутствует;
Создайте новую папку для вашего компонента, в ней создайте php-файл и разместите в нём вёрстку вашего компонента;
Для подключения стилей и скриптов используйте функцию mgAddMeta;