Битрикс случайная статья и ajax обновление

В данной статье вы узнаете как вывести случайную новость и настроить ее обновление по кнопке.

Как вывести случайную статью на Битриксе

Чтобы вывести случайную статью нам понадобится документация для CIBlockElement::GetList:
https://dev.1c-bitrix.ru/api_help/iblock/classes/ciblockelement/getlist.php

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

Array("RAND" => "ASC")

Разницу в значении ASC или DESC лично я не заметил. Мы сейчас не будем разбивать логику, так как это делается «по правильному» для компонентов Битрикса, на файлы component.php и template.php. Код для случайной статьи выглядит следующим образом:

<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="" title="" border="0">
						</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. if (CModule::IncludeModule(«iblock»)): проверяем модуль инфоблоков, если он установлен то подключаем его. Теперь нам доступны все связанные методы. Стоит отметить, что инфоблоки это основной инструмент любого сайта на битриксе, поэтому увидеть их не подключенными невозможно :).

2. Описание параметров:

$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')
);

— первый массив говорит о том, что сортировка случайная
— второй массив, выбираем из инфоблока с ID = 1, только среди активных
— третий массив для данной задачи не нужен, поэтому пишем false
— в четвертом указываем nTopCount = 1 — ограничиваем количество
— пятый массив — это выбранные свойства и поля из инфобока

3. запускаем цикл while ($arItem = $my_elements->GetNext()) {
тут стоит отметить, если вам нужно использовать только для одной новости, то можно заменить на

if($arItem = $my_elements->GetNext()) {

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

4. $img = CFile::GetPath($arItem[‘PREVIEW_PICTURE’]); — получаем путь к изображению для анонса при помощи GetPath.

Как настроить ajax обновление для случайной статьи в 1С-Битрикс

Если вы будете нажимать F5, то статья будет обновляться. Наша цель уйти об обновления и повесить его на кнопку. Чтобы использовать ajax, напишем простой js (используется 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);
	}).complete(function(){
		// после того как аякс выполнился
	}).error(function(){
		// пишем ошибку в консоль если что-то пошло не так
		console.log('There was an error');
	});
});
</script>

а вот как выглядит HTML кнопки:

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

Обратите внимание, data-id — передаем ID текущей новости, чтобы при клике не было дублей. А вот как выглядит страница 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="" title="" border="0">
					</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;
?>

Внимательный читатель заметил, что при клике на кнопку, у нее не меняется data-id, про который упоминалось выше. Как это исправить пускай будет вашим заданием :).

Полный код для страницы /random/index.php (все стили и скрипты помещены на одну страницу, чтобы вам было удобнее все исправить под себя, но потом обязательно распределите стили и скрипты по компонентам и файлам шаблона):

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

<div class="white-cont">
	<h2>Случайная статья</h2>
	<div class="row">
		<div class="col-md-4">
			<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="" title="" border="0">
									</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>
		</div>
		<div class="col-md-8">
			<div class="random-button-block">
				<a data-id="<?=$ID?>" class="js-rand btn-rand" href="#">Другая случайная статья</a>
			</div>
		</div>
	</div>
</div>

<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);
	}).complete(function(){
		// после того как аякс выполнился
	}).error(function(){
		// пишем ошибку в консоль если что-то пошло не так
		console.log('There was an error');
	});
});
</script>

<style>
.random-news-block {
	margin: 15px 0;
	text-align: center;
}
.news-item {
	background-color: #fff;
	margin: 15px 5px 0px 0;
	min-height: 270px;
	position: relative;
}
.news-title-block {
	padding: 10px 10px 5px;
	font-weight: bold;
	color: #000;
	font-size: 14px;
	display: block;
	text-decoration: none;
	text-align: left;
}
.news-date-block {
	position: absolute;
	left: 10px;
	bottom: 10px;
}
.news-date-time {
	color: #BEBEBE;
	font-size: 12px;
}
.col-new {
	max-width: 250px;
}
.btn-rand {
	color: #000;
	padding: 10px 25px;
	border-radius: 50px;
	background-color: #ffc608;
	text-decoration: none;
}
</style>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

На этом всё, надеюсь у вас всё получилось.

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

4 комментария

  1. Скажите пожалуйста, а как сделать, чтобы ссылка на статью была не вида /information/detail.php?ID=1, а как в компоненте новости «detail» => «#SITE_DIR#/#SECTION_CODE#/#ELEMENT_ID#/»,

    1. вам нужно зайти в инфоблок и прописать правила для детальных элементов, точно такое же как у вас прописано в компоненте новостей для ЧПУ http://joxi.ru/v29B5vRTZXlj9A
      только у вас своё правило будет

      1. Спасибо, Дмитрий, пока вы отвечали, накопал такую штуку (вставил перед while)
        $my_elements->SetUrlTemplates(«#SITE_DIR#/#SECTION_CODE#/#ELEMENT_ID#/»);
        и сработало

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *