Перейти к содержимому


Фильтры В Каталоге


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 17

#1 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 04 Июль 2016 - 18:30

Здравствуйте!
Помогите сделать такое отображение фильтров (слева в каталоге) пример с кодами находится (как нужно) тут
наш магазин здесь нужно сделать ограничение по высоте и сделать стиль чек-боксов таким же и скролинг (пожалуйста, не предлагайте другие варианты, нужно просто перенять, то что в примере).

Сейчас у нас так:

Изображение





А нужно так:

Изображение

#2 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 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 в разделе Сайт-> Редактор шаблонов. Это можно сделать в левой колонке при помощи кнопки Добавить файл.

Прикрепленные изображения

  • sprite2.png


#3 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 06 Июль 2016 - 16:53

Просмотр сообщенияStasya (06 Июль 2016 - 10:54) писал:

В шаблоне 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 в разделе Сайт-> Редактор шаблонов. Это можно сделать в левой колонке при помощи кнопки Добавить файл.

Поменялись только стили чек-боксов.

Нужно также сделать ограничение по высоте поля фильтра, чтобы появлялся скроллинг как на примере (если в фильтре строк много, то допустим делаем макисмальную высоту 316px).

Изображение






Также стилизовать скролин черной полоской, как в примере.

Изображение






Выровнить текст фильтров, чтобы если у строки в фильтре название длинное и оно заходит под чек-бокс, то этого небыло.

Изображение





И при наведении мышкой на строки фильтров эти строки реагировали как на примере, т е менялась прозрачность.

Изображение

#4 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 08 Июль 2016 - 11:37

Все необходимые изменения произвела.

#5 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 08 Июль 2016 - 17:36

Просмотр сообщенияStasya (08 Июль 2016 - 11:37) писал:

Все необходимые изменения произвела.


Отлично, и последний нюанс по данной теме. Можно сделать так, чтобы прятались не активные пункты фильтра. Например выбираем марку и остаются только оставшиеся фильтры к оставшимся товарам, а то сейчас при выборе одного их пунктов все остаются, половина из них неактивные и не понятно куда можно нажимать куда нет?

#6 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 12 Июль 2016 - 10:31

Просмотр сообщенияbg999 (08 Июль 2016 - 17:36) писал:

Отлично, и последний нюанс по данной теме. Можно сделать так, чтобы прятались не активные пункты фильтра. Например выбираем марку и остаются только оставшиеся фильтры к оставшимся товарам, а то сейчас при выборе одного их пунктов все остаются, половина из них неактивные и не понятно куда можно нажимать куда нет?
В шаблоне HTML найдите строку
<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 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 12 Июль 2016 - 19:25

Просмотр сообщенияStasya (12 Июль 2016 - 10:31) писал:

В шаблоне HTML найдите строку
<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 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 13 Июль 2016 - 17:57

Очень ждем ответа на последний вопрос. Хотим как можно скорее запустить обнавленный сайт.

#9 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 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 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 14 Июль 2016 - 18:00

Просмотр сообщенияStasya (14 Июль 2016 - 09:57) писал:

В шбалоне 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>




Как сделать, чтобы при наведении на строки фильтра, мышка становилась активной (появлялась рука), а сами строки меняли цвет на серый (становились чуть прозрачнее) и чек бокс тоже.

#11 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 17 Июль 2016 - 18:15

Ждем ответа, очень)

#12 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 18 Июль 2016 - 11:08

Просмотр сообщенияbg999 (14 Июль 2016 - 18:00) писал:

Как сделать, чтобы при наведении на строки фильтра, мышка становилась активной (появлялась рука), а сами строки меняли цвет на серый (становились чуть прозрачнее) и чек бокс тоже.

В файл main.css добавьте блок
.filter li:hover {
	cursor: pointer;
	opacity: 0.6;
}


#13 bg999

bg999

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 18 Июль 2016 - 16:00

Просмотр сообщенияStasya (18 Июль 2016 - 11:08) писал:

В файл main.css добавьте блок
.filter li:hover {
cursor: pointer;
opacity: 0.6;
}

Почему-то при наведении мышка активной не становиться, прозрачность появляется. Мышка активна только рядом, но не на самом тексте фильтра, ссылка на то что получилось здесь

#14 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 398 сообщений

Отправлено 18 Июль 2016 - 16:06

Просмотр сообщенияbg999 (18 Июль 2016 - 16:00) писал:

Почему-то при наведении мышка активной не становиться, прозрачность появляется. Мышка активна только рядом, но не на самом тексте фильтра, ссылка на то что получилось здесь

В main.css еще добавьте:
.filter li label {cursor:pointer;}


#15 promser

promser

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 01 Февраль 2017 - 19:35

Хотел бы поднять тему.
Реализовал у себя по данной инструкции чекбоксы.
Единственное - если есть такая возможность, то хотел бы реализовать такое дополнение - когда я выбрал один из фильтров, часть по которым нет ничего становится более прозрачные (эта функция описана выше). Было бы хорошо если бы такие пункты не подсвечивались и на них стрелка в указательные палец не переходила. Т.е. чтобы осталась реакция только на активные пункты фильтров. Это возможно?

#16 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 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 promser

promser

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 19 Февраль 2017 - 19:22

Просмотр сообщенияStasya (15 Февраль 2017 - 10:15) писал:

Здравствуйте. Простите за долгое ожидание ответа. Для того чтобы это реализовать Вам необходимо в шаблоне 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}
Сделал. В принципе почти то, что хотел, но сейчас фильтр, у которого ноль товаров все-равно реагирует цветом при наведении на него. Возможно ли сделать так, чтобы вообще не было никакой реакции при наведении на пустой фильтр?

#18 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 27 Февраль 2017 - 14:13

Просмотр сообщенияpromser (19 Февраль 2017 - 19:22) писал:

Сделал. В принципе почти то, что хотел, но сейчас фильтр, у которого ноль товаров все-равно реагирует цветом при наведении на него. Возможно ли сделать так, чтобы вообще не было никакой реакции при наведении на пустой фильтр?
В шаблоне HTML найдите блок
<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 анонимных