Как сделать вертикальную прокрутку, фильтры типа checkbox с вертикальной прокруткой

[Olga_Ya 0]

Может будет кому-то полезно

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

1. Открываем Настройки - Шаблоны атрибутов. Создаём новый шаблон, назовем например check1. В него копируем всё из шаблона chek

Меняем 

     {$name_attribute} 
      </label>
</div>
</div>

<input id="activeval{$id_attribute}" name="data[values_f][{$id_attribute}][is_active]" {if $is_active == 1} value="1" {/if} type="hidden" aria-hidden="true">
{foreach from=$values_attribute item=val}
<div class="form-group">
<div class="checkbox">
  <label>
    
    <input type="checkbox" {if $val.val == 1} checked="checked" {/if} name="data[values_f][{$id_attribute}][data][{$val.id}][value]" value="1" id="value{$val.id}" class="checkbox{$id_attribute}" aria-hidden="true">
    {$val.name}
  </label>

  </div>
</div>
<input name="data[values_f][{$id_attribute}][data][{$val.id}][type_attr]" value="{$val.type_attr}" type="hidden" aria-hidden="true">
<input name="data[values_f][{$id_attribute}][data][{$val.id}][id]" value="{$val.id}" type="hidden" aria-hidden="true">
  {/foreach}

на

    <b>  {$name_attribute} </b>
    
  </label>
</div>
</div>

<div class="prokrutka">
   

<input id="activeval{$id_attribute}" name="data[values_f][{$id_attribute}][is_active]" {if $is_active == 1} value="1" {/if} type="hidden" aria-hidden="true">
{foreach from=$values_attribute item=val}
<div class="form-group">
<div class="checkbox">
  <label>
    
    <input type="checkbox" {if $val.val == 1} checked="checked" {/if} name="data[values_f][{$id_attribute}][data][{$val.id}][value]" value="1" id="value{$val.id}" class="checkbox{$id_attribute}" aria-hidden="true">
    {$val.name}
  </label>

  </div>
</div>
<input name="data[values_f][{$id_attribute}][data][{$val.id}][type_attr]" value="{$val.type_attr}" type="hidden" aria-hidden="true">
<input name="data[values_f][{$id_attribute}][data][{$val.id}][id]" value="{$val.id}" type="hidden" aria-hidden="true">
  {/foreach}

</div>

2. Открываем файл vamshop.css (Путь: /Ваш сайт/app/webroot/css)

3. Добавляем туда стиль: 

.prokrutka {
width:auto; /* ширина нашего блока */
height:100px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}

В админке сбрасываем кэш и получаем фильтр с прокруткой и возможностью множественного выбора.

 

[support 447]

Спасибо, перенёс в раздел FAQ Вашей решение.

Что б не потерялось на форуме и было всегда на виду в разделе Вопросы и ответы.

1 час назад, Olga_Ya сказал:

В админке сбрасываем кэш и получаем фильтр с прокруткой и возможностью множественного выбора.