Создание AJAX компонента в битрикс

Создадим протой компонент, выводящий текущую дату со временем. Работать будем в папке local. Если её нет, то нужно создать. Полный путь к компоненту будет выглядеть так: /local/components/droute/date/.

Структура компонента:

Пояснения:

  • local - папка, созданная для удобства жизни разработчиков проектов. В ней рекомендуется вести всю разработку проекта.
  • components - папка, в которой хранятся компоненты
  • droute - наша папка, в которой будет находиться компонент "date" и другие компоненты
  • date - папка, в которой будут лежать файлы компонента
  • class.php - файл, в котором расположена вся логика работы компонента.
  • .description.php - файл, в котором описывается компонент.
  • .parameters.php - файл, в задаются параметры компонента.
  • ajax.php - файл, в котором вызывается компонент date при ajax запросе
  • templates - папка, в которой хранятся шаблоны текущего компонента
  • .default - папка, в которой хранятся файлы шаблоны. ".default" - название шаблона по умолчанию
  • template.php - файл, в котором расположен код шаблона
  • script.js - файл со скриптом, который выполняет ajax запрос(при клике на кнопку "обновить") к файлу ajax.php нашего компонента

Файл /local/components/droute/date/.description.php

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
$arComponentDescription = array(
    "NAME" => "Дата",
    "DESCRIPTION" => "Выводит дату",
    "PATH" => array(
        "ID" => "droute_components",
        "CHILD" => array(
            "ID" => "curdate",
            "NAME" => "Текущая дата"
        )
    ),
    "ICON" => "/images/icon.gif",
);

Файл /local/components/droute/date/.parameters.php

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
$arComponentParameters = array(
    "GROUPS" => array(),
    "PARAMETERS" => array(
        "DATE_FORMAT" => array(
            "PARENT" => "BASE",
            "NAME" => "Шаблон для даты",
            "TYPE" => "STRING",
            "MULTIPLE" => "N",
            "DEFAULT" => "Y-m-d",
        ),
    ),
);

Файл /local/components/droute/date/class.php

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
class DRouteDateTimeComponent extends CBitrixComponent {
    public function executeComponent() {
        $dateFormat = $this->arParams["DATE_FORMAT"] ?: "d.m.Y";
        $this->arResult["DATE_TIME"] = $this->GetCurrentDate($dateFormat);

        $this->includeComponentTemplate();
    }
	
    private function GetCurrentDate($dateFormat) {
        return date($dateFormat);
    }
}

Файл /local/components/droute/date/ajax.php

<?require_once($_SERVER["DOCUMENT_ROOT"]. "/bitrix/modules/main/include/prolog_before.php");

$APPLICATION->IncludeComponent(
    "droute:date", 
    "", 
    array(
        "AJAX" => "Y",
        "COMPONENT_TEMPLATE" => ".default",
        "DATE_FORMAT" => "d.m.Y H:i:s",
    ),
    false
);

Файл /local/components/droute/date/templates/.default/template.php

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>

<?if ($arParams["AJAX"] != "Y") :?>
    <div class="js-dr-date-time-container">
<?endif;?>
    <p><?=$arResult["DATE_TIME"];?></p>
    <a href="#" class="js-dr-get-date-time">Обновить</a>
<?if ($arParams["AJAX"] != "Y") :?>
    </div>
<?endif;?>

Файл /local/components/droute/date/templates/.default/script.js

$(document).on("click",".js-dr-get-date-time",function(e){
    e.preventDefault();

    var data = {
        "action": "update",
        "ajax": true
    };

    $.ajax({
        type: "POST",
        url: "/local/components/droute/date/ajax.php",
        data: data,
        success: function (data) {
            $(".js-dr-date-time-container").html(data);
        },
        error: function (jqXHR, text, error) {
            $(".js-dr-date-time-container").html(error);
        }
    });
    return false;
});

Создадим тестовую страницу и разместим компонент:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("test");
?>
<script src="/local/jquery-3.6.0.min.js"></script>
<?$APPLICATION->IncludeComponent(
    "droute:date", 
    "", 
    array(
        "COMPONENT_TEMPLATE" => ".default",
        "DATE_FORMAT" => "d.m.Y H:i:s",
    ),
    false
);?>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Результат работы компонента приведен ниже:

Результат работы компонента дата-время