bg999 (04 Июль 2016 - 18:30) писал:
Здравствуйте!
Помогите сделать такое отображение фильтров (слева в каталоге)
пример с кодами находится (как нужно) тут
наш магазин здесь нужно сделать ограничение по высоте и сделать стиль чек-боксов таким же и скролинг (пожалуйста, не предлагайте другие варианты, нужно просто перенять, то что в примере).
Сейчас у нас так:
А нужно так:
![Изображение](http://image.prntscr.com/image/b3045e14ba014d1387609e694b8f597a.png)
В шаблоне HTML найдите блок
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter">
<div class="title-filter9">{filter_attr_list.NAME}:</div>
<ul>
{% FOR values %}
<li>
<div style="display: inline-block;float: left;"><input onchange="this.form.submit();" type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /></div>
<div style="padding: 1px 0px 0px 20px;"><label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label></div>
</li>
{% ENDFOR %}
</ul>
</div>
{% ENDFOR %}
и замените его на
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter">
<div class="title-filter9">{filter_attr_list.NAME}:</div>
<ul>
{% FOR values %}
<li>
<input onchange="this.form.submit();" type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} />
<label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label>
</li>
{% ENDFOR %}
</ul>
</div>
{% ENDFOR %}
Далее в конец файла main.css добавьте блок
.filters input[type="checkbox"] + label {background: url(../design/sprite2.png) 0 0 no-repeat;padding-left: 20px;padding-top: 1px;}
.filters input[type="checkbox"]:checked + label {background-position: 0 -18px;}
.filters input[type="checkbox"]{display:none;}
Так же Вам необходимо загрузить изображение sprite2 в разделе Сайт-> Редактор шаблонов. Это можно сделать в левой колонке при помощи кнопки Добавить файл.
Прикрепленные изображения