Как при выборе торгового предложения обновлять всю детальную страницу catalog.element?

Для обновления всей детальной страницы catalog.element при выборе торгового предложения в 1C-Bitrix, нужно использовать AJAX-запросы и обработчики событий.

Шаг 1: Настройка компонента catalog.element
Перед началом работы нам нужно настроить компонент catalog.element. Для этого откройте файл /catalog.element/.default/component.php и найдите функцию, отвечающую за формирование данных элемента каталога (обычно это функция prepareData()). Здесь нам понадобится добавить AJAX-обработчики.

Шаг 2: Создание AJAX-обработчиков
Создайте файл ajax.php в папке /catalog.element/.default/ и добавьте следующий код:

<?
define('PUBLIC_AJAX_MODE', true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

if (isset($_REQUEST["ajax"]) && $_REQUEST["ajax"] == "Y" && CModule::IncludeModule("iblock")) {
    // Здесь выполняем необходимые действия, например, получаем информацию о торговом предложении
    // После обработки возвращаем данные в формате JSON
    $result = array(
        'success' => true,
        'data' => 'Some data',
    );
    echo json_encode($result);
}

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");
?>

Шаг 3: Добавление JavaScript-кода в компонент
В функции prepareData() из файла component.php добавьте следующий код перед выводом данных элемента:

<?= '<script>
   $(document).ready(function() {
       $(".js-offer-link").on("click", function() {
           var offerId = $(this).data("offer-id");
           $.ajax({
               type: "POST",
               url: "/catalog.element/.default/ajax.php",
               data: { ajax: "Y", offerId: offerId },
               dataType: "json",
               success: function(response) {
                   if (response.success) {
                       // Здесь обновляем данные на странице, например, изменяем название и стоимость товара
                       $("#product-name").text(response.data.name);
                       $("#product-price").text(response.data.price);
                   } else {
                       // Обработка ошибки
                   }
               },
               error: function() {
                   // Обработка ошибки
               }
           });
       });
   });
</script>'; ?>

Здесь мы добавляем обработчик события click для ссылки на торговое предложение (например, с классом "js-offer-link"). При клике на ссылку отправляется AJAX-запрос на обработчик ajax.php, передавая в запросе идентификатор торгового предложения. В ответ на запрос мы получаем данные торгового предложения в формате JSON и обновляем соответствующие элементы на странице (например, название и стоимость товара).

Шаг 4: Доработка обработчика ajax.php
В обработчике ajax.php допишите код для получения данных торгового предложения и формирования ответа в формате JSON. Например:

<?
define('PUBLIC_AJAX_MODE', true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

if (isset($_REQUEST["ajax"]) && $_REQUEST["ajax"] == "Y" && CModule::IncludeModule("iblock")) {
    $offerId = (int)$_REQUEST["offerId"];
    if ($offerId > 0) {
        // Здесь выполняем необходимые действия, например, получаем информацию о торговом предложении по его идентификатору $offerId
        // Возвращаем данные в формате JSON
        $result = array(
            'success' => true,
            'data' => array(
                'name' => 'Название товара',
                'price' => '123.45 руб.',
            ),
        );
        echo json_encode($result);
    } else {
        // Обработка ошибки - торговое предложение не найдено
        $result = array(
            'success' => false,
            'errorMessage' => 'Торговое предложение не найдено.',
        );
        echo json_encode($result);
    }
}

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");
?>

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

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