Сортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс
Сортировка по стоимости товаров и переключение вида отображения товаров в спискеСортировка по цене и смена вида в bitrix:catalog.section в 1С-Битрикс
Сортировка по стоимости товаров и переключение вида отображения товаров в списке
📅 13 апреля 2023
👁🗨 1112
К сожалению в комплексном компоненте 1С-Битрикс отсутствует возможность вывода полей для переключения сортировки товаров по стоимости товара или переключению вида отображения блоками или списком, поэтому мы прибегнем к методу API 1С-Битрикс GetCurPageParam() для добавления и удаления параметров которые потом передадим в компонент bitrix:catalog.section.
<?
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>