Компоненты

Начиная с версии 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. Параметр 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. Параметр 2 – Массив данных, передаваемых в компонент.

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

    Если вам нужен массив данных для своего нового компонента:

    • Выведите на экран массив данных $data из контроллера текущей страницы с помощью функции <?php viewData($data); ?>.

      Возможно, необходимые вам данные уже есть на странице. Подробнее про массив $data.

    • Если необходимых данных на странице нет, то вы можете получить их напрямую из базы данных при помощи метода DB::query().
  3. Параметр 3 - Имя файла в папке компонента, который необходимо подключить.

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

    Пример:

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

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

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

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

Рекомендации

Реализация компонента должна состоять из отдельных файлов. Каждой технологии реализации соответствует отдельный файл.

Имена файлов реализации должны совпадать с именем компонента.

Например, для блока search стили должны находиться в файле search.css, js в search.js, а вёрстка в search.php.