Фильтры В Каталоге
#1
Отправлено 04 Июль 2016 - 18:30
Помогите сделать такое отображение фильтров (слева в каталоге) пример с кодами находится (как нужно) тут
наш магазин здесь нужно сделать ограничение по высоте и сделать стиль чек-боксов таким же и скролинг (пожалуйста, не предлагайте другие варианты, нужно просто перенять, то что в примере).
Сейчас у нас так:
А нужно так:
#2
Отправлено 06 Июль 2016 - 10:54
bg999 (04 Июль 2016 - 18:30) писал:
Помогите сделать такое отображение фильтров (слева в каталоге) пример с кодами находится (как нужно) тут
наш магазин здесь нужно сделать ограничение по высоте и сделать стиль чек-боксов таким же и скролинг (пожалуйста, не предлагайте другие варианты, нужно просто перенять, то что в примере).
Сейчас у нас так:
А нужно так:
В шаблоне 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 в разделе Сайт-> Редактор шаблонов. Это можно сделать в левой колонке при помощи кнопки Добавить файл.
#3
Отправлено 06 Июль 2016 - 16:53
Stasya (06 Июль 2016 - 10:54) писал:
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) --> {% 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 в разделе Сайт-> Редактор шаблонов. Это можно сделать в левой колонке при помощи кнопки Добавить файл.
Поменялись только стили чек-боксов.
Нужно также сделать ограничение по высоте поля фильтра, чтобы появлялся скроллинг как на примере (если в фильтре строк много, то допустим делаем макисмальную высоту 316px).
Также стилизовать скролин черной полоской, как в примере.
Выровнить текст фильтров, чтобы если у строки в фильтре название длинное и оно заходит под чек-бокс, то этого небыло.
И при наведении мышкой на строки фильтров эти строки реагировали как на примере, т е менялась прозрачность.
#4
Отправлено 08 Июль 2016 - 11:37
#5
Отправлено 08 Июль 2016 - 17:36
Stasya (08 Июль 2016 - 11:37) писал:
Отлично, и последний нюанс по данной теме. Можно сделать так, чтобы прятались не активные пункты фильтра. Например выбираем марку и остаются только оставшиеся фильтры к оставшимся товарам, а то сейчас при выборе одного их пунктов все остаются, половина из них неактивные и не понятно куда можно нажимать куда нет?
#6
Отправлено 12 Июль 2016 - 10:31
bg999 (08 Июль 2016 - 17:36) писал:
<label for="filterAttrVal{filter_attr_list.values.ID}"></label>и замените ее на
<label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}{filter_attr_list.values.NB_GOODS_FILTERED}</label>
#7
Отправлено 12 Июль 2016 - 19:25
Stasya (12 Июль 2016 - 10:31) писал:
<label for="filterAttrVal{filter_attr_list.values.ID}"></label>и замените ее на
<label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}{filter_attr_list.values.NB_GOODS_FILTERED}</label>
Код не работает, во первых строки в фильтрах за двоились, во вторых не активные строки не исчезают, а просто чек боксы пропадают.
#8
Отправлено 13 Июль 2016 - 17:57
#9
Отправлено 14 Июль 2016 - 09:57
bg999 (12 Июль 2016 - 19:25) писал:
В шбалоне HTML найдите блок
<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 %} /> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}{filter_attr_list.values.NB_GOODS_FILTERED}</label> </div> <div style="padding:0 0 0 20px"> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label> </div> </li>и замените его на
<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 %} /> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}></label> </div> <div style="padding:0 0 0 20px"> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}({filter_attr_list.values.NB_GOODS_FILTERED})</label> </div> </li>
#10
Отправлено 14 Июль 2016 - 18:00
Stasya (14 Июль 2016 - 09:57) писал:
<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 %} /> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}{filter_attr_list.values.NB_GOODS_FILTERED}</label> </div> <div style="padding:0 0 0 20px"> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label> </div> </li>и замените его на
<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 %} /> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}></label> </div> <div style="padding:0 0 0 20px"> <label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %}>{filter_attr_list.values.VALUE}({filter_attr_list.values.NB_GOODS_FILTERED})</label> </div> </li>
Как сделать, чтобы при наведении на строки фильтра, мышка становилась активной (появлялась рука), а сами строки меняли цвет на серый (становились чуть прозрачнее) и чек бокс тоже.
#11
Отправлено 17 Июль 2016 - 18:15
#12
Отправлено 18 Июль 2016 - 11:08
bg999 (14 Июль 2016 - 18:00) писал:
В файл main.css добавьте блок
.filter li:hover { cursor: pointer; opacity: 0.6; }
#13
Отправлено 18 Июль 2016 - 16:00
Stasya (18 Июль 2016 - 11:08) писал:
.filter li:hover { cursor: pointer; opacity: 0.6; }
Почему-то при наведении мышка активной не становиться, прозрачность появляется. Мышка активна только рядом, но не на самом тексте фильтра, ссылка на то что получилось здесь
#14
Отправлено 18 Июль 2016 - 16:06
bg999 (18 Июль 2016 - 16:00) писал:
В main.css еще добавьте:
.filter li label {cursor:pointer;}
#15
Отправлено 01 Февраль 2017 - 19:35
Реализовал у себя по данной инструкции чекбоксы.
Единственное - если есть такая возможность, то хотел бы реализовать такое дополнение - когда я выбрал один из фильтров, часть по которым нет ничего становится более прозрачные (эта функция описана выше). Было бы хорошо если бы такие пункты не подсвечивались и на них стрелка в указательные палец не переходила. Т.е. чтобы осталась реакция только на активные пункты фильтров. Это возможно?
#16
Отправлено 15 Февраль 2017 - 10:15
promser (01 Февраль 2017 - 19:35) писал:
Реализовал у себя по данной инструкции чекбоксы.
Единственное - если есть такая возможность, то хотел бы реализовать такое дополнение - когда я выбрал один из фильтров, часть по которым нет ничего становится более прозрачные (эта функция описана выше). Было бы хорошо если бы такие пункты не подсвечивались и на них стрелка в указательные палец не переходила. Т.е. чтобы осталась реакция только на активные пункты фильтров. Это возможно?
Здравствуйте. Простите за долгое ожидание ответа. Для того чтобы это реализовать Вам необходимо в шаблоне HTML найти строку
label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>и заменить ее на
label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}class="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>Далее в конец файла main.css добавьте блок
.filter input[disabled="disabled"], .filter label.disabled{cursor:auto} .filter label.disabled{color:#dbdbdb}
#17
Отправлено 19 Февраль 2017 - 19:22
Stasya (15 Февраль 2017 - 10:15) писал:
label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>и заменить ее на
label for="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}class="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>Далее в конец файла main.css добавьте блок
.filter input[disabled="disabled"], .filter label.disabled{cursor:auto} .filter label.disabled{color:#dbdbdb}
#18
Отправлено 27 Февраль 2017 - 14:13
promser (19 Февраль 2017 - 19:22) писал:
<div class="title-filter9"><strong>{filter_attr_list.NAME}:</strong></div> <ul> {% FOR values %} <li>и замените его на
<div class="title-filter9"><strong>{filter_attr_list.NAME}:</strong></div> <ul> {% FOR values %} <li {% IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}class="disabled"{% ENDIF %}>Далее в конец файла main.css добавьте блок
.filter li.disabled:hover { cursor: pointer; opacity: 1; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных