+7 (987) 026-06-36
Написать в Telegram

Оставить заявку
stanislav_web

Сортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс

Сортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс Сортировка по стоимости товаров и переключение вида отображения товаров в списке

Сортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс

Сортировка по стоимости товаров и переключение вида отображения товаров в списке

📅 13 апреля 2023

👁‍🗨 1112

🔥 0

К сожалению в комплексном компоненте 1С-Битрикс отсутствует возможность вывода полей для переключения сортировки товаров по стоимости товара или переключению вида отображения блоками или списком, поэтому мы прибегнем к методу API 1С-Битрикс GetCurPageParam() для добавления и удаления параметров которые потом передадим в компонент bitrix:catalog.section.

Сортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс
<?
if (isset($_REQUEST['order'])) {
	if ($_REQUEST['order'] == 'asc') {
		$order = 'desc';
	} else {
		$order = 'asc';
	}
} else {
	$order = 'asc';
}
if (isset($_REQUEST['sort'])) {
	$sort = $_REQUEST['sort'];
} else {
	$sort = 'sort';
}
if ($sort=='price') {
	$sort = 'CATALOG_PRICE_1';
}
?>

<div class="sort">
	<div class="sort-title">Сортировать</div>
	<div class="sort-row js-sort">
		<a
		class="sort-item<?= $sort == 'sort' || '' && $order == 'desc' || '' ? ' sort-current' : ''; ?>"
		href="<?= $APPLICATION->GetCurPageParam('sort=sort&order=asc', ['sort', 'order']); ?>">
			<span class="catalog-sort__name">по умолчанию</span>
		</a>
		<a
		class="sort-item<?= $sort == 'CATALOG_PRICE_1' && $order == 'desc' ? ' sort-current' : ''; ?>"
		href="<?= $APPLICATION->GetCurPageParam('sort=price&order=asc', ['sort', 'order']); ?>">
			<span class="catalog-sort__name">по убыванию цены</span>
		</a>
		<a
		class="sort-item<?= $sort == 'CATALOG_PRICE_1' && $order == 'asc' ? ' sort-current' : ''; ?>"
		href="<?= $APPLICATION->GetCurPageParam('sort=price&order=desc', ['sort', 'order']); ?>">
			<span class="catalog-sort__name">по возрастанию цены</span>
		</a>
		<img class="sort-arrow" src="<?= SITE_TEMPLATE_PATH; ?>/images/sort_arrow.svg" alt="Развернуть" title="Развернуть" width="8" height="4">
	</div>
</div>

<a href="<?= $APPLICATION->GetCurPageParam('view=column', ['view']); ?>">
	<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
		<g <?= $_GET['view'] == 'row' ? 'opacity="0.35"' : ''; ?> clip-path="url(#clip0_1024_147049)">
			<path d="M15.3375 0.25V8.375H8.6625V0.25H15.3375ZM16.5875 8.375H23.25V0.25H16.5875V8.375ZM15.3375 17.75V9.625H8.6625V17.75H15.3375ZM16.5875 9.625V17.75H23.25V9.625H16.5875ZM7.4125 9.625H0.75V17.75H7.4125V9.625ZM7.4125 8.375V0.25H0.75V8.375H7.4125Z" fill="#E2000D"/>
		</g>
		<defs>
			<clipPath id="clip0_1024_147049">
				<rect width="24" height="18" fill="white"/>
			</clipPath>
		</defs>
	</svg>
</a>
<a href="<?= $APPLICATION->GetCurPageParam('view=row', ['view']); ?>">
	<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
		<g <?= $_GET['view'] == 'row' ? '' : 'opacity="0.35"'; ?> clip-path="url(#clip0_1024_147050)">
			<path d="M0.75 11.5H5.75V6.5H0.75V11.5ZM0.75 17.75H5.75V12.75H0.75V17.75ZM0.75 5.25H5.75V0.25H0.75V5.25ZM7 11.5H23.25V6.5H7V11.5ZM7 17.75H23.25V12.75H7V17.75ZM7 0.25V5.25H23.25V0.25H7Z" fill="#E2000D"/>
		</g>
		<defs>
			<clipPath id="clip0_1024_147050">
				<rect width="24" height="18" fill="white"/>
			</clipPath>
		</defs>
	</svg>
</a>

<?
$APPLICATION->IncludeComponent(
	'bitrix:catalog.section',
	'bootstrap_v4', array(
		...
		'ELEMENT_SORT_FIELD' => $sort,
		'ELEMENT_SORT_ORDER' => $order,
		...
	),
);
?>
<script>
	let js_sort = document.querySelector('.js-sort');
	if (js_sort) {
		js_sort.addEventListener('click', function() {
			this.classList.toggle('sort-view');
		});
	}
</script>

<style>
	.sort {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: (-webkit-max-content)[3];
		-ms-grid-columns: (max-content)[3];
		grid-template-columns: repeat(3, -webkit-max-content);
		grid-template-columns: repeat(3, max-content);
		-webkit-box-align: baseline;
		-ms-flex-align: baseline;
		align-items: baseline;
	}
	.sort-row {
		display: -ms-grid;
		display: grid;
		grid-row-gap: 5px;
		position: relative;
		height: 20px;
		cursor: pointer;
	}
	.sort-title {
		margin-right: 10px;
	}
	.sort-item {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		opacity: 0;
		visibility: hidden;
	}
	.sort-view .sort-item {
		opacity: 1;
		visibility: visible;
	}
	.sort-current {
		-webkit-box-ordinal-group: 0;
		-ms-flex-order: -1;
		order: -1;
		pointer-events: none;
		font-weight: 600;
		color: #E2000D;
		border-bottom: 2px solid;
		opacity: 1;
		visibility: visible;
	}
	.sort-view {
		height: auto;
	}
	.sort-arrow {
		position: absolute;
		right: -12px;
		top: 8px;
		cursor: pointer;
	}
	.sort-view .sort-arrow {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
</style>