Как вывести случайную новость на Битрикс с AJAX-обновлением

Хотите добавить на сайт блок со случайными новостями, который можно обновлять без перезагрузки страницы? В этой статье я подробно расскажу, как реализовать такой функционал на CMS 1С-Битрикс.

Мы рассмотрим:

• Основной механизм вывода случайной статьи через CIBlockElement::GetList
• Оптимизацию работы с помощью AJAX-запросов
• Готовое решение с полным кодом, которое можно сразу внедрить на сайт

Этот подход особенно полезен для:

• Лендингов с рекомендациями
• Блогов с тематическими статьями
• Новостных разделов сайтов

Приступим к реализации!

Вывод случайной статьи в Битрикс

Для вывода случайной статьи в Битрикс используем метод CIBlockElement::GetList с сортировкой RAND.

Код для вывода случайной новости

<div class="random-news-block" id="main-ajax">
    <?
    if (CModule::IncludeModule("iblock")):
        $my_elements = CIBlockElement::GetList (
            Array("RAND" => "ASC"),
            Array("IBLOCK_ID" => 1, "ACTIVE" => "Y"),
            false,
            Array('nTopCount' => 1),
            Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DATE_ACTIVE_FROM')
        );
        while ($arItem = $my_elements->GetNext()) {
            $ID = $arItem['ID'];
            $img = CFile::GetPath($arItem['PREVIEW_PICTURE']);
            ?>
            <div class="col-new">
                <a class="main-item" href="<?=$arItem['DETAIL_PAGE_URL']?>">
                    <div class="news-item">
                        <div class="news-image-block">
                            <img class="preview_picture" src="<?=$img?>" alt="<?=$arItem['NAME']?>" title="<?=$arItem['NAME']?>">
                        </div>
                        <div class="news-title-block"><?=$arItem['NAME']?></div>
                        <div class="news-date-block"><span class="news-date-time"><?=$arItem['DATE_ACTIVE_FROM']?></span></div>
                    </div>
                </a>
            </div>
            <?
        }
    endif;
    ?>
</div>

Пояснение кода:

1. Проверка модуля инфоблоков – CModule::IncludeModule("iblock").

2. Сортировка по RAND – Array("RAND" => "ASC").

3. Фильтрация – выбираем активные элементы из инфоблока с IBLOCK_ID = 1.

4. Ограничение вывода – nTopCount = 1 (одна случайная статья).

5. Получение изображения – CFile::GetPath для корректного пути к картинке.

Настройка AJAX-обновления случайной статьи

Чтобы обновлять новость без перезагрузки страницы, используем jQuery и AJAX.

1. HTML-кнопка для обновления

<div class="random-button-block">
    <a data-id="<?=$ID?>" class="js-rand btn-rand" href="#">Другая случайная статья</a>
</div>

2. JavaScript (jQuery)

<script>
$('.js-rand').on('click', function(){
    var $id = $(this).data('id');

    $.ajax({
        url: '/random/ajax.php',
        type: 'POST',
        cache: false,
        data: 'id=' + $id,
    }).done(function(data){
        $('#main-ajax').html(data);
    }).error(function(){
        console.log('Ошибка при загрузке статьи');
    });
});
</script>

3. Код для ajax.php

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

<?
if (CModule::IncludeModule("iblock")):
    $my_elements = CIBlockElement::GetList (
        Array("RAND" => "ASC"),
        Array("IBLOCK_ID" => 1, "ACTIVE" => "Y", "!ID" => $_POST['id']),
        false,
        Array('nTopCount' => 1),
        Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DATE_ACTIVE_FROM')
    );
    while ($arItem = $my_elements->GetNext()) {
        $img = CFile::GetPath($arItem['PREVIEW_PICTURE']);
        ?>
        <div class="col-new">
            <a class="main-item" href="<?=$arItem['DETAIL_PAGE_URL']?>">
                <div class="news-item">
                    <div class="news-image-block">
                        <img class="preview_picture" src="<?=$img?>" alt="<?=$arItem['NAME']?>">
                    </div>
                    <div class="news-title-block"><?=$arItem['NAME']?></div>
                    <div class="news-date-block"><span class="news-date-time"><?=$arItem['DATE_ACTIVE_FROM']?></span></div>
                </div>
            </a>
        </div>
        <?
    }
endif;
?>

Важные моменты:

• Исключение дублей – "!ID" => $_POST['id'] убирает текущую новость из выборки.

• Обновление data-id – после AJAX-запроса нужно обновлять data-id у кнопки, чтобы избежать повторного вывода той же статьи.

Готовый пример страницы

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Случайная статья");
?>

<div class="white-cont">
    <h1>Случайная статья</h1>
    <div class="random-news-block" id="main-ajax">
        <!-- Код вывода случайной статьи -->
    </div>
    <div class="random-button-block">
        <a data-id="<?=$ID?>" class="js-rand btn-rand" href="#">Другая случайная статья</a>
    </div>
</div>

<!-- JS и CSS оставляем без изменений -->
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Заключение

Теперь вы знаете, как:
Выводить случайную статью в Битрикс
Настраивать AJAX-обновление по кнопке
Исключать дубли при обновлении

Дополнительно:

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

• Добавьте обработку ошибок и индикатор загрузки для улучшения UX.