Битрикс случайная статья и 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 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

4 коментаря

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

Залишити коментар до Dmitriy Скасувати коментар