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


Область Фильтрации На Сайте


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

#1 Flor@@

Flor@@

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

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

Отправлено 29 Июль 2012 - 02:05

почему так сильно сдвигаются фильтры при выборе конкретного значения фильтра?
вот скрин - до выбора конкретного параметра изделия:
Изображение
а вот скрин после выбора:
Изображение

и заодно можете ли напомнить плиз в каком классе в css можно поменять высоту зеленого поля?

#2 Vaccina

Vaccina

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

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

Отправлено 30 Июль 2012 - 20:52

Высоту зеленой полосы можно не менять, необходимо просто убрать фиксированный её размер. Для этого необходимо в файле стилей найти и удалить

.filters {
	height: 140px;
	width: 100%;
}

Далее класс
.goods_filters {
	background: none repeat scroll 0 0 #66CC00;
	border-radius: 15px 15px 15px 15px;
	color: #003300;
	font-family: georgia;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-top: 0;
}

заменить на

.goods_filters {
	background: none repeat scroll 0 0 #66CC00;
	border-radius: 15px 15px 15px 15px;
	color: #003300;
	font-family: georgia;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-top: 0;
	padding: 5px;
}

Далее немного уменьшите размеры полей -

Найти

.filters .filter select {
	width: 130px;
}

заменить на

.filters .filter select {
	width: 120px;
}

далее найти

.filters .filter {
	float: left;
	padding-right: 10px;
	width: 130px;
}

заменить на

.filters .filter {
	float: left;
	padding-right: 10px;
	width: 120px;
}

Далее замените все (в коде фильтра)

<div style="height:34px;">

на
<div class="filter-variable">

далее в файл стилей добавьте

.filter-variable {
	display: table-cell;
	font-size: 12px;
	height: 50px;
	vertical-align: bottom;
}

так же обверните свойство (Размер матраса:) оно у вас просто задано как

Размер матраса:
<br>
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel')); this.form.submit();" name="">

а не как остальные

<div style="height:34px;">Страна изготовитель:</div>
<div style="height:30px;">
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));" name="form[filter][attr][151241][312334]">
</div>


#3 Flor@@

Flor@@

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

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

Отправлено 30 Июль 2012 - 23:36

Просмотр сообщенияVaccina (30 Июль 2012 - 20:52) писал:

Высоту зеленой полосы можно не менять, необходимо просто убрать фиксированный её размер. Для этого необходимо в файле стилей найти и удалить
.filters {
	height: 140px;
	width: 100%;
}
Далее класс
.goods_filters {
	background: none repeat scroll 0 0 #66CC00;
	border-radius: 15px 15px 15px 15px;
	color: #003300;
	font-family: georgia;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-top: 0;
}
заменить на
.goods_filters {
	background: none repeat scroll 0 0 #66CC00;
	border-radius: 15px 15px 15px 15px;
	color: #003300;
	font-family: georgia;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-top: 0;
	padding: 5px;
}

СДЕЛАНО!!!

Просмотр сообщенияVaccina (30 Июль 2012 - 20:52) писал:

Далее немного уменьшите размеры полей -
Найти
.filters .filter select {
	width: 130px;
}
заменить на
.filters .filter select {
	width: 120px;
}
далее найти
.filters .filter {
	float: left;
	padding-right: 10px;
	width: 130px;
}
заменить на
.filters .filter {
	float: left;
	padding-right: 10px;
	width: 120px;
}
Здесь у меня поля прописаны с width как 100px; однозначно.

Просмотр сообщенияVaccina (30 Июль 2012 - 20:52) писал:

Далее замените все (в коде фильтра)
<div style="height:34px;">
на
<div class="filter-variable">
далее в файл стилей добавьте
.filter-variable {
	display: table-cell;
	font-size: 12px;
	height: 50px;
	vertical-align: bottom;
}
ДОБАВИЛА!!

Просмотр сообщенияVaccina (30 Июль 2012 - 20:52) писал:

так же обверните свойство (Размер матраса:) оно у вас просто задано как
Размер матраса:
<br>
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel')); this.form.submit();" name="">
а не как остальные
<div style="height:34px;">Страна изготовитель:</div>
<div style="height:30px;">
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));" name="form[filter][attr][151241][312334]">
</div>
необходимо обернуть в див: "<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>"??
все заработало как надо, спасибо.

#4 Flor@@

Flor@@

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

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

Отправлено 13 Август 2012 - 04:57

ЕЩЕ ВОПРОСЫ:
quote name='Vaccina' timestamp='1343670755' post='24952']
Vaccina (30 Июль 2012 - 20:59) писал:
так же обверните свойство (Размер матраса оно у вас просто задано как
Размер матраса:
<br>
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel')); this.form.submit();" name="">

а не как остальные
<div style="height:34px;">Страна изготовитель:</div>
<div style="height:30px;">
<select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));" name="form[filter][attr][151241][312334]">
</div>
[/quote]

1. необходимо обернуть в див(?): "<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>"??

2. Хотелось бы чтобы при выборе того или иного значения фильтра сразу же показывалось цифрой количество моделей с данными характеристиками, как вот здесь.

#5 Vaccina

Vaccina

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

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

Отправлено 13 Август 2012 - 21:49

1) Нет, необходимо обвернуть <select> покажите ваш код с фильтрами.
2) Думаю что такое к сожалению реализовать не получиться.

#6 Flor@@

Flor@@

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

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

Отправлено 24 Август 2012 - 23:56

<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS %}
  <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
  {% IF SHOW_GOODS_FILTERS %}
	<style>
	  .filters { }
	  .filters .filter { float:left;padding-right:10px;width:130px; }
	  .filters .filter select { width:130px; }
	</style>
	<li class="goods_filters"><br /><h2>Выбор по параметрам:</h2>
	  <div class="filters">   
		<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		<form action="" method="get">
		  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
		  {% FOR filter_attr_list %}
			<div class="filter">
			  <div class="filter-variable">{filter_attr_list.NAME}:</div>
			  <div style="height:30px;"><select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
<option value="0"> - все - </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>
		  </div>
		  {% ENDFOR %}
  
		  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
		  {% FOR filter_prop_list %}
			<div class="filter">
			  {filter_prop_list.NAME}:<br />
			  <div style="height:30px;">
			  <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>
			</div>
		  {% ENDFOR %}
		  
		  <div class="clear"></div> 
<input type="submit" name="set_search" value="применить" />
<input type="button" value="Сбросить" name="reset" onclick="javascript:document.location='http://{NET_DOMAIN}/catalog/{ID}';">
		</form>
	  </div>
	</li>
  {% ENDIF %}
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->


#7 Vaccina

Vaccina

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

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

Отправлено 27 Август 2012 - 20:50

Попробуйте такой код

<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS %}
  <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
  {% IF SHOW_GOODS_FILTERS %}
	<style>
	  .filters { }
	  .filters .filter { float:left;padding-right:10px;width:130px; }
	  .filters .filter select { width:130px; }
	</style>
	<li class="goods_filters"><br /><h2>Выбор по параметрам:</h2>
	  <div class="filters">   
		<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		<form action="" method="get">
		  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
		  {% FOR filter_attr_list %}
			<div class="filter">
			  <div class="filter-variable">{filter_attr_list.NAME}:</div>
			  <div style="height:30px;"><select onchange="$(this).attr('name', $(this).find('option:selected').attr('rel'));" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
<option value="0"> - все - </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>
		  </div>
		  {% ENDFOR %}
  
		  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
		  {% FOR filter_prop_list %}
			<div class="filter">
			  <div class="filter-variable">{filter_prop_list.NAME}:</div>
			  <div style="height:30px;">
			  <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>
			</div>
		  {% ENDFOR %}
		  
		  <div class="clear"></div> 
<input type="submit" name="set_search" value="применить" />
<input type="button" value="Сбросить" name="reset" onclick="javascript:document.location='http://{NET_DOMAIN}/catalog/{ID}';">
		</form>
	  </div>
	</li>
  {% ENDIF %}
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->


#8 Flor@@

Flor@@

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

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

Отправлено 27 Август 2012 - 22:44

спасибо большое.




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

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