Блок с компонентом внутри

Урок 254 из 329
Автор: Ольга Пичужкина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
4 из 5
Просмотров: 2745
Ограничения по редакциям: Ограничений нет

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

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

Блоки и компоненты

В предыдущих уроках мы разобрались, как работать с готовыми блоками Сайтов24, как их настраивать, анимировать и даже узнали, как создать свой собственный блок. Теперь мы умеем строить сайты из кирпичиков-блоков.

Но ведь раньше мы уже изучали другой подход - строить сайты целыми комнатами и этажами с помощью компонентов Компонент - это программный код, оформленный в визуальную оболочку, выполняющий определённую функцию какого-либо модуля по выводу данных в Публичной части. Мы можем вставлять этот блок кода на страницы сайта без непосредственного написания кода. Подробнее... . Компоненты могут обращаться к нашим инфоблокам Информационный блок - специальный инструмент "1С-Битрикс: Управление сайтом" с помощью которого заносится информация в Базу данных.
Подробнее...
, получать информацию из базы данных и выводить её динамически, то есть позволять пользователю что-то делать с ней - фильтровать, переходить по ссылкам, редактировать - и сразу отображать изменения.

А можно ли совместить преимущества обоих этих подходов? Чтобы было красиво, быстро и просто, как с блоками, а гибко и динамически, как с компонентами? Можно! В презентации 1С-Битрикс: Управление Сайтом 18.0 было сказано, что нужно взять стандартные или собственные компоненты, "обернуть" их в специальный код и разместить в блоках. Таким образом вы можете реализовать практически любую бизнес-логику.

Создание блока из компонента - нетривиальная задача для контент-менеджера. Вам потребуется знание PHP и HTML и тщательное изучение документации о создании блока и о файле манифеста. Также рекомендуем посмотреть вебинар.

Вы должны чётко представлять, что именно вы делаете. Но стоит попробовать один раз - и всё станет гораздо понятнее.

Для начала можно просто скопировать файл манифеста и файл блока. Коды будут приведены далее по тексту. Как только вы поймете, как это работает, вы сможете встраивать компоненты в блоки легко и просто.

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

komp.png
. Это ведь довольно частый кейс, чтобы узнать что-то о наших посетителях или их потребностях. Возьмем для простоты уже готовый опрос, который мы делали в уроке Создание и публикация опроса.


Порядок работы

  1. Создаем в /bitrix/blocks/ папку proba, а в ней папку opros

    Все блоки обязательно размещаются на диске по пути /bitrix/blocks/. Папку для добавления своего блока вы можете назвать как угодно, используя латиницу, цифры, символы "." и "-". Помните, что имя папки будет служить также и символьным кодом блока и должно быть уникально.
  2. Создаем файл block.php. Это тело блока. В нём размещаем код

    <section class="landing-block">
            <div class="landing-node-text">
            Здесь будет опрос
            </div>
    </section>
    
  3. Создаем файл .description.php. Это и есть "обертка" - файл манифеста. В нём размещаем код

    <?php
    if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
    {
       die();
    }
    return array(
        'block' => array(
            'name' => "Опрос",
        ),
        'cards' => array(),
        'nodes' => array(
            '.landing-block-text' => array(
                'name' => "Заголовок",
                'type' => 'text',
            )
            ),
            '.landing-block-node-text' => array(
                'name' => "Текст",
                'type' => 'text',
            )
    );
    
  4. Очищаем кэш с помощью кода и выполнения php-команды php_string.png

    if (\Bitrix\Main\Loader::includeModule('landing'))
    {
       \Bitrix\Landing\Block::clearRepositoryCache();
    }
  5. Создаем страницу new_site.png
    в разделе Сайты 24
  6. Проверяем, появился ли наш блок в списке блоков add_block.png . И размещаем его на созданной странице
  7. Теперь можно добавить в файл block.php код самого компонента

    <?$APPLICATION->IncludeComponent(
    	"bitrix:voting.current",
    	"",
    	Array(
    		"AJAX_MODE" => "N",
    		"AJAX_OPTION_ADDITIONAL" => "",
    		"AJAX_OPTION_HISTORY" => "N",
    		"AJAX_OPTION_JUMP" => "N",
    		"AJAX_OPTION_STYLE" => "Y",
    		"CACHE_TIME" => "3600",
    		"CACHE_TYPE" => "A",
    		"CHANNEL_SID" => "-",
    		"VOTE_ALL_RESULTS" => "N",
    		"VOTE_ID" => "6"
    	)
    );?><br>
    
  8. Не забываем очищать кэш после каждого изменения в коде блока, то есть в файле block.php.
  9. Если вы хотите редактировать что-то в компоненте, вам нужно будет менять файл манифеста, а именно задавать ключи nodes, style и др. Подробно о полях манифеста рассказано в документации.

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


Дополнительная информация



Текст раскрывает тему
Мы стараемся сделать документацию понятнее и доступнее,
и Ваше мнение важно для нас
Нам жаль это слышать… Но мы постараемся быть лучше! Поясните, пожалуйста, свой выбор:

Мы благодарны вам за помощь в улучшении документации.

Курсы разработаны в компании «1С-Битрикс»