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


Подбор Товара (Фильтр)

фильтр товар характеристики

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

#1 bartjohn

bartjohn

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

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

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

Добрый день!

Нужно изменить фильтра товара, сделать выпадающее меню, т.к очень много характеристик и брендов, и очень сильно давит, и листать приходится много. :)
Примерно так. Спасибо!

Изображение

#2 Stasya

Stasya

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

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

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

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

Добрый день!

Нужно изменить фильтра товара, сделать выпадающее меню, т.к очень много характеристик и брендов, и очень сильно давит, и листать приходится много. :)
Примерно так. Спасибо!

Изображение

В шаблоне HTML найдите блок
<!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
					  {% IF SHOW_GOODS_FILTERS %}
						<li class="goods_filters"><br /><h2>Фильтры</h2>
						  <div class="contentTbodySearchFilterBlock cornerAll">
							<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) -->
							{% FOR filter_attr_list %}
							  <span class="contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span>
							  <div class="contentTbodySearchFilterBlockValues">
							  {% FOR values %}
								<input 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} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br />
							  {% ENDFOR %}
							  </div>
							{% ENDFOR %}
							<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
							{% FOR filter_prop_list %}
							  <span class="contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span>
							  <div class="contentTbodySearchFilterBlockValues">
							  {% FOR values %}
								<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} >
								<label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br />
							  {% ENDFOR %}
							  </div>
							{% ENDFOR %}
						  </div>
						</li>
					  {% ENDIF %}
и замените его на
{% IF SHOW_GOODS_FILTERS %}
						<li class="goods_filters"><br /><h2>Фильтры</h2>
						  <div class="contentTbodySearchFilterBlock cornerAll">
							<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) -->
							{% FOR filter_attr_list %}
							  <div class="filterItemBlock">
								<span class="contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span>
								<div class="contentTbodySearchFilterBlockValues">
								{% FOR values %}
								  <input 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} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br />
								{% ENDFOR %}
								</div>
							  </div>
							{% ENDFOR %}
							<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
							{% FOR filter_prop_list %}
							  <div class="filterItemBlock">
								<span class="contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span>
								<div class="contentTbodySearchFilterBlockValues">
								{% FOR values %}
								  <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} >
								  <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br />
								{% ENDFOR %}
								</div>
							  </div>
							{% ENDFOR %}
						  </div>
						</li>
					  {% ENDIF %}
Далее в файл main.js в самом конце добавьте блок
$(document).ready(function(){
  $(".contentTbodySearchFilterBlockValues").hide();
  $(".contentTbodySearchFilterBlockHeader").click(function(){
	$(this).parent().children('.contentTbodySearchFilterBlockValues').toggle();
  });
});

И в файл main.css добавьте в конце блок
.filterItemBlock{margin:10px 0;}
.filterItemBlock span{cursor:pointer;}


#3 No Tolerance

No Tolerance

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

  • Пользователи
  • PipPip
  • 40 сообщений
  • ГородМосква

Отправлено 07 Ноябрь 2018 - 10:54

Подскажите пожалуйста как сделать такое же выпадающее меню для фильтров в дизайне Инфинити





Темы с аналогичным тегами фильтр товар, характеристики

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

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