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


Дизайн Фильтра


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

#1 krohotylja

krohotylja

    Продвинутый пользователь

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

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

Добрый день подскажите как поменять дизайн фильтра на этот
Изображение

Вот описание В данном скрипте происходит скрытие стандартных форм и постановка на их место своих картинок с применением jQuery. Не Везде checkbox и radio хорошо смотрятся и если вас неудовлетворяют или не подходят к дизайну интерфейса обычные формы, то прошу качать этот плагин.
Код очень легкий и к тому же вы всегда можете поменять дизайн флажков, так как это просто навсего картинки. На место них можете крепить, что угодно. Html код:
<div>
<input checked="checked" id="CheckBox1" class="CheckBoxClass" type="checkbox">
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass LabelSelected">Checkbox 1</label>
<input checked="checked" id="CheckBox2" class="CheckBoxClass" type="checkbox">
<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass LabelSelected">Checkbox 2</label>
</div>
<div>
<input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio">
<label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected">Radio 1</label>
<input id="Radio2" class="RadioClass" name="group1" type="radio">
<label id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input id="Radio3" class="RadioClass" name="group1" type="radio">
<label id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>
</div>
Простой Css без излишеств:

.CheckBoxClass,.RadioClass{
display: none;
}
.CheckBoxLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 150px;
display: block;
}
.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("Check.png") no-repeat;
}
.RadioLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 70px;
display: block;
float: left;
}
.RadioSelected{
background: url("Check.png") no-repeat;
}
И подключаем js, который есть в архиве.
Как это сделать?к сожалению файл jquery-1.js загрузить не могу  

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

  • Check.png
  • UnCheck.png


#2 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 14 Февраль 2014 - 00:40

Вы можете применить похожую стилизацию элементов формы, которая ранее рассматривалась в теме форума http://forum.storela..._140#entry93406

#3 krohotylja

krohotylja

    Продвинутый пользователь

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

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

Просмотр сообщенияСake (14 Февраль 2014 - 00:40) писал:

Вы можете применить похожую стилизацию элементов формы, которая ранее рассматривалась в теме форума http://forum.storela..._140#entry93406

Если честно, ничего из темы не понятно, можно установить нельзя.

Может объясните поподробнее, на этом примере. Думаю многим начинающим будет интересно.

#4 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 15 Февраль 2014 - 00:10

В указанной теме по идее подробно описано подключение библиотеки стилизации элементов формы. Указанный вами элемент (checkbox) так же может быть изменен с помощью данной библиотеки (iradio). Вам необходимо скачать, загрузить в магазин саму библиотеку iradio и уже после подключить её в вашем шаблоне "HTML".(инструкция http://forum.storela..._140#entry94163). После изменить структуру фильтров согласно инструкции http://forum.storela..._160#entry95830 Пожалуйста, почитайте тему полностью и крайне внимательно.

#5 Flor@@

Flor@@

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

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

Отправлено 21 Февраль 2014 - 09:50

подскажите, пожалуйста, как скрыть неактивные пункты в выпадающих подменю фильтров, и оставить только те, которые возможно выбрать, см. скрин
:

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

  • вид сайта 16.jpg


#6 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 22 Февраль 2014 - 00:31

Найдите в вашем шаблоне "Товары" следующую строку

<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>

и замените её на

{% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
{% ENDIF %}

чуть ниже найдите

<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>

и замените на

{% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
{% ENDIF %}


#7 Flor@@

Flor@@

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

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

Отправлено 28 Февраль 2014 - 10:26

ух ты ы ы ы ы  ы ы ы ы ы ы!!!!!!!!!!!!!!!!!!!!!!!!!!! спасибо огромное-преогромное!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

#8 Eleneva

Eleneva

    Продвинутый пользователь

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

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

Просмотр сообщенияСake (22 Февраль 2014 - 00:31) писал:

Найдите в вашем шаблоне "Товары" следующую строку

[/CODE]
А как то же сделать в мокко? Скрыть параметры с нулевыми значениями?
<!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
{% IF SHOW_GOODS_FILTERS %}
<div class="filters">
<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
<form action="" method="get">
<div class="contentTbodySearchFilterBlock cornerAll">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="contentTbodySearchFilterBlockValues">
{filter_attr_list.NAME}:<br />
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
<option> - все - </option>
{% FOR values %}
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="contentTbodySearchFilterBlockValues">
{filter_prop_list.NAME}:<br />
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel')); this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
<option> - все - </option>
{% FOR values %}
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<div class="clear"></div>
</div>
</form>
</div>
{% ENDIF %}
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->


#9 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 26 Июнь 2014 - 00:42

В вашем шаблоне есть аналогичные строки. Строка

<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>

и строка

<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>

данный строки необходимо просто обвернуть в условие указанное в сообщении ранее.

#10 Anna Dragomir

Anna Dragomir

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

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

Отправлено 21 Ноябрь 2014 - 12:51

Просмотр сообщенияСake (22 Февраль 2014 - 00:31) писал:

Найдите в вашем шаблоне "Товары" следующую строку

<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>

и замените её на

{% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}
<option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
{% ENDIF %}

чуть ниже найдите

<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>

и замените на

{% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}
<option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
{% ENDIF %}

Добрый день!
Подскажите,а как можно тоже самое сделать в шаблоне "Движение"?

#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Ноябрь 2014 - 02:23

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

#12 BeLoveAll

BeLoveAll

    Продвинутый пользователь

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

Отправлено 12 Декабрь 2015 - 04:05

Доброго времени суток!
У меня уже установлены фильтры в боковое меню, хотелось бы изменить их стилизацию на такую, как показано в посте 1.
Немного непонятно, куда именно вставить код из первого поста? У меня шаблон шоколад.
Заранее благодарю за ответы.

#13 BeLoveAll

BeLoveAll

    Продвинутый пользователь

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

Отправлено 17 Декабрь 2015 - 03:51

Просмотр сообщенияVaccina (25 Ноябрь 2014 - 02:23) писал:

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

Что-то никто не отвечает уже почти неделю... :mellow:
Опять вся надежда на Вас! :rolleyes: :rolleyes:




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных