Битрикс,умный фильтр,5 колонок, реально?

Question

[SteepNET]

Добрый день! Битрикс, Умный фильтр горизонтальный, шаблон Bootstrap_v4
По умолчанию строит 3 колонки, и никак не регулируется настройками компонента и.т.д..
Как известно в Bootstrap 4 построить 5 колонок элементарно:

<div class="row">
    <div class="col"> 1/5 </div>
    <div class="col"> 2/5 </div>
    <div class="col"> 3/5 </div>
    <div class="col"> 4/5 </div>
    <div class="col"> 5/5 </div>
</div>

Но не в Битрикс, подскажите ,может кто то делал, знает менее болезненный способ это сделать адаптивно естественно?

Comments

[Ankhena]

Проще сделать вывод в 1 колонку, а в css менять как душе угодно, хоть флексами, хоть гридами, хоть через columns

Answer 1

[PetrPo]

joxi.ru/ZrJ7N1EiwaONZm
Только родительский класс добавь перед col-md-4, это если совсем по простому.
Раз уж заговорил о настройках компонента, можешь добавить свой параметр в компонент и в шаблоне класс ставить в зависимости от этого параметра, от этого класса css написать

Comments

[PetrPo]

С параметром, что-то типа такого получится joxi.ru/ZrJ7N1EiwaxbMm

[SteepNET]

Да ,спасибо! Сработало!
Что бы не ковырять bootstrap-grid.css ,можно в своем style.css

@media (min-width: 768px) {
	.col-md-4 {
		-ms-flex: 0 0 20% !important;
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
}

Можно пожалуйста подробней с параметром в компоненте?
Как привязать параметр в компоненте к верстке, или все же сделать свой col-md-15 и в шаблоне фильтра что то типа такого грубо, не проверял:

if ($arParams["COL"] == "5"):?>col-sm-15 col-md-15
<? elseif: ?>
($arParams["COL"] == "4"):?>col-sm-14 col-md-14
<? elseif: ?>
($arParams["COL"] == "3"):?>col-sm-6 col-md-4
<? else: ?>col-lg-12
<? endif ?>

[PetrPo]

Не стоит просто для класса .col-md-4 стили прописывать, если вдруг на странице в других блоках этот класс будет, сломаешь верстку, добавь родительский селектор .smart-filter .col-md-4

Про параметр. я бы сделал так:

1. В файле .parameters.php шаблона добавляешь параметр

if($arCurrentValues["FILTER_VIEW_MODE"] == 'horizontal') {
	$arTemplateParameters['COLUMNS'] = array(
		'PARENT' => 'VISUAL',
		'NAME' => 'Количество колонок', // выносишь в lang
		'TYPE' => 'LIST',
		'VALUES' => array(
			'2' => 2,
			'3' => 3,
			'4' => 4,
			'5' => 5,
		),
		'DEFAULT' => '5',
	);
}

В начале поставил проверку

$arCurrentValues["FILTER_VIEW_MODE"] == 'horizontal'

так как для вертикального отображения этот параметр не нужен, а параметр FILTER_VIEW_MODE имеет флаг REFRESH, то при смене этого параметра, твой параметр будет появляться и исчезать соответственно.

2. В template.php я бы убрал

<div class="<?if ($arParams["FILTER_VIEW_MODE"] == "HORIZONTAL"):?>col-sm-6 col-md-4<?else:?>col-12<?endif?> mb-2 smart-filter-parameters-box bx-active">

заменил бы на

<div class="<?if ($arParams["FILTER_VIEW_MODE"] != "HORIZONTAL"):?>col-12<?endif?> mb-2 smart-filter-parameters-box bx-active">

--- будешь делать, учти что пункт 2 надо в 2-х местах менять, во втором еще проверка есть перед bx-active ее надо оставить

3. В самом верху template.php что-то типа

$bColumns = $arParams['FILTER_VIEW_MODE'] == 'HORIZONTAL' && isset($arParams['COLUMNS']) && intval($arParams['COLUMNS']) ? true : false;
$columnsCount = isset($arParams['COLUMNS']) && intval($arParams['COLUMNS']) ? $arParams['COLUMNS'] : 5;

добавить к

<div class="smart-filter <?=($bColumns ? 'smart--filter--columns__'.$columnsCount : '');?>

4. Ну и стили в style.css примерно, но тут уже по вкусу

@media (min-width: 992px) {
	.smart--filter--columns__5 .smart-filter-parameters-box{width:20%;flex:0 0 20%;}
	.smart--filter--columns__4 .smart-filter-parameters-box{width:25%;flex:0 0 25%;}
	.smart--filter--columns__3 .smart-filter-parameters-box{width:33.33333333%;flex:0 0 33.33333333%;}
	.smart--filter--columns__2 .smart-filter-parameters-box{width:50%;flex:0 0 50%;}
}

@media (min-width: 768px)  and (max-width: 991px) {
	.smart-filter .smart-filter-parameters-box{width:33.33333333%;flex:0 0 33.33333333%;}
	.smart--filter--columns__2 .smart-filter-parameters-box{width:50%;flex:0 0 50%;}
}

@media (min-width: 576px) and (max-width: 767px) {
	.smart-filter .smart-filter-parameters-box{width:100%;flex:0 0 100%;}
}

[PetrPo]

И старайся в исключительных ситуациях использовать !important

[SteepNET]

PetrPo, Спасибо! не совсем понял в 3 пункте

добавить к
<div class="smart-filter <?=($bColumns ? 'smart--filter--columns__'.$columnsCount : '');?>

Это где ?

[PetrPo]

в template.php обертка всего фильтра

[SteepNET]

PetrPo, Все же наверное так

<div class="smart-filter <?=($bColumns ? 'smart--filter--columns__'.$columnsCount : '');?>">

Что то не получается, ломается вся верстка фильтра, разбираюсь почему так...Шаблон не default?
Я в Bootstrap_v4

[PetrPo]

Ну да, че-то я не понятно написал. Это часть строки)) вот полностью

<div class="smart-filter <?=($bColumns ? 'smart--filter--columns__'.$columnsCount : '');?> mb-4 <?=$templateData["TEMPLATE_CLASS"]?> <?if ($arParams["FILTER_VIEW_MODE"] == "HORIZONTAL") echo "smart-filter-horizontal"?>">

[SteepNET]

PetrPo, Да,все отлично работает! Только сбились остальные настройки ,свернутость,отступы и.т.д, но это дело просто перенести и все.

[SteepNET]

PetrPo, Привет! А что с комплексным не прокатит такое?
Тут по этой же схеме ,пытаюсь добавить в комплексный компонент параметр

$arTemplateParameters['NEW'] = array(
    'PARENT' => 'VISUAL',
    'NAME' => GetMessage("NEW"),
    'TYPE' => 'TEXT',
    'MULTIPLE' => 'N',
    'REFRESH' => 'N',
    'DEFAULT' => '7'
);

Параметр появляется в настройках, но в шаблон не прилетает, что не так делаю?

[PetrPo]

SteepNET, его надо еще где простой компонент вызывается добавлять. Параметр сам по себе не гуляет между компонентами, в комплексный компонент он пришел, теперь надо его в простой передать
'NEW' => $arParams['NEW'],

[SteepNET]

PetrPo, Ах точно, как я мог это упустить =( Спасибо!

[SteepNET]

PetrPo, Уважаемый друг! =) Прошу помощи в вопросе Цикл в JavaScript как правильно реализовать Chart.js? , не знаю как еще привлечь Ваше внимание! Вопрос как раз по JS, если не затруднит уделите внимание пожалуйста!

[PetrPo]

SteepNET, привет, помочь по js не смогу, при себе только телефон, компа нет, а js без теста никак. К сожалению я буду полноценно на связи через 3-4 недели.

P.S. прошу общаться на "ты" )

[SteepNET]

PetrPo, Эх, жаль.., 70 просмотров не одного ответа =( , Может как то на словах получиться подсказать? Там цикл как то надо построить? Нужно несколько значений в переменной php занести в label: этой диаграммы.
Там то статические данные прописаны, а надо туда пихать свои значения из переменных...

Answer 2

[Александр]

Нужно добавить класс и изменить в шаблоне компонента

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}


.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

<div class="col-md-15 col-xs-12 col-sm-15">
</div>

И соответственно вот так использовать в верстке: col-..-15

Comments

[SteepNET]

Здорово! Спасибо! Но у меня кривенько отрабатывает мобильная версия

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

Так получше..

Но с разрешения 768х830 начинает ломать, ровняет по наименованию полей а не по input полям поэтому кривенько выходит, но замысел понятен..

[Александр]

SteepNET, да, там ещё всплывут моменты, но как раз суть и хотел передать