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


Переместить Фильтры Товаров


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

#1 Tanksav

Tanksav

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

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

Отправлено 18 Апрель 2017 - 15:51

Здравствуйте, помогите пожалуйста перенести фильтры в правую часть страницы, рисунок с желаемым видом прикрепляю.

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

  • 1.jpg


#2 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 18 Апрель 2017 - 16:45

Просмотр сообщенияTanksav (18 Апрель 2017 - 15:51) писал:

Здравствуйте, помогите пожалуйста перенести фильтры в правую часть страницы, рисунок с желаемым видом прикрепляю.
Здравствуйте.
Фильтры можно перенести в правую часть над товарами, чтобы не нарушать адаптивную версию сайта.

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

  • 18-04-2017 16-43-05.jpg


#3 Tanksav

Tanksav

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

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

Отправлено 18 Апрель 2017 - 16:56

Так тоже отлично, единственное что, у нас очень много вариантов характеристик, можно ли сделать так, чтоб показывались 3 варианта максимум, а потом кнопка "показать еще"?

#4 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 18 Апрель 2017 - 17:49

Просмотр сообщенияTanksav (18 Апрель 2017 - 16:56) писал:

Так тоже отлично, единственное что, у нас очень много вариантов характеристик, можно ли сделать так, чтоб показывались 3 варианта максимум, а потом кнопка "показать еще"?

Кнопку показать добавил под фильтры.
В шаблоне HTML перед
				 <!-- /END Осноные Фильтры -->
добавил
				 <div class="button-load">
					 <div class="loadGoods button" title="Показать все">Показать все</div>
				 </div>
В файл main.css добавил
/**/
.filters .filter {display:none;padding: 0 15px;}
.filters .filter:nth-child(1), .filters .filter:nth-child(2), .filters .filter:nth-child(3) {display:block;}
.filters .filter.showThis {display:block;}
/**/
В самом конце файла main.js добавил
//Показать больше фильтров
$(function(){
var i = 0;
$('.filters-goods .filter').each(function(){
i++;
})
if(i<=6){$('.filters .button-load').hide()}
$('.filters .loadGoods').on('click',function(){
if($(this).hasClass('loaded')){
	 $(this).removeClass('loaded');
	 $('.filters .filter').removeClass('showThis');
	 $(this).text('Показать все');
	 $(this).attr('title', 'Показать все');
}else{
	 $('.filters .filter').addClass('showThis');
	 $(this).addClass('loaded');
	 $(this).text('Скрыть');
	 $(this).attr('title', 'Скрыть');
}
})
});


#5 Tanksav

Tanksav

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

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

Отправлено 18 Апрель 2017 - 18:32

спасибо, но я кажется не правильно объяснила что мне нужно, сейчас слишком длинные фильтры, верните пожалуйста пока как было, я подготовлю макет и скину,

#6 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 18 Апрель 2017 - 18:36

Просмотр сообщенияTanksav (18 Апрель 2017 - 18:32) писал:

спасибо, но я кажется не правильно объяснила что мне нужно, сейчас слишком длинные фильтры, верните пожалуйста пока как было, я подготовлю макет и скину,
Восстановите бэкап шаблона в разделе Сайт - Редактор шаблонов от 18.04.2017 17:50:11

#7 Tanksav

Tanksav

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

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

Отправлено 19 Апрель 2017 - 10:56

Еще раз здравствуйте, прикрепляю макет примерного вида фильтров, помогите пожалуйста реализовать.

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

  • ПРИМЕР-ИТОГ.jpg


#8 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 19 Апрель 2017 - 19:53

Просмотр сообщенияTanksav (19 Апрель 2017 - 10:56) писал:

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

#9 Tanksav

Tanksav

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

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

Отправлено 20 Апрель 2017 - 09:18

Просмотр сообщенияMr.Nito (19 Апрель 2017 - 19:53) писал:

Изменения по фильтрам произвёл, сделал их выпадающим списком, добавил кнопку показать.
Просто супер! Спасибо большое!!!

#10 Tanksav

Tanksav

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

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

Отправлено 02 Май 2017 - 12:44

Здравствуйте, помогите пожалуйста еще доработать фильтр:
1. нужно изменить стиль (показано на рисунке)
2.название характеристики в окне выбора а не сверху
3. надпись "фильтр товаров убрать вообще.
4. при выборе характеристики сразу обновляется страница и кнопка "показать" уже не нужна (ее убираем).
5. добавить кнопку "сбросить"
6. если можно, сделать возможным выбор нескольких параметров характеристики сразу
7. если возможно, убрать не действующие опции второй и последующих выбираемых характеристик (сейчас они только чуть светлее чем возможные варианты)
Прикрепляю рисунок, где собственно отобразила что хотелось бы по внешнему виду. Заранее благодарю!

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

  • фильтр1.jpg


#11 Vaccina

Vaccina

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

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

Отправлено 03 Май 2017 - 05:17

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
		{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		<div class="filters">
		  <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		  <form action="" method="get">
			<!-- Если есть возможность фильтрации товаров по ценам -->
			{% IF SHOW_GOODS_PRICE_FILTERS %}
			  <div class="filters-price">
				<div class="title">Фильтры по ценам</div>
				<div class="layout-slider">
				  <input id="goods-filter-min-price" class="inputText" type="text" name="form[filter][price][min]" value="{% IF GOODS_FILTER_MIN_PRICE %}{GOODS_FILTER_MIN_PRICE}{% ELSE %}{GOODS_FILTER_MIN_AVAILABLE_PRICE}{% ENDIF %}" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
				  <span class="price-separator">-</span>
				  <input id="goods-filter-max-price" class="inputText" type="text" name="form[filter][price][max]" value="{% IF GOODS_FILTER_MAX_PRICE %}{GOODS_FILTER_MAX_PRICE}{% ELSE %}{GOODS_FILTER_MAX_AVAILABLE_PRICE}{% ENDIF %}" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
				  <input type="hidden" name="form[filter][available_price][min]" value="{GOODS_FILTER_MIN_AVAILABLE_PRICE}" />
				  <input type="hidden" name="form[filter][available_price][max]" value="{GOODS_FILTER_MAX_AVAILABLE_PRICE}" />
				  <!-- Фильтры по цене -->
				  <div class="goodsFilterPriceRangePointers">
					<span class="min" style="display:none;">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</span>
					<span class="max" style="display:none;">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</span>
				  </div>
				  <div id="goods-filter-price-slider"></div>
				  <div class="goodsFilterPriceSubmit">
					<button class="button" type="submit" title="Показать">Показать</button>
				  </div>
				</div>
			  </div>
			{% ENDIF %}
			<!-- /END Если есть возможность фильтрации товаров по ценам -->
			<!-- Осноные Фильтры -->
			<div class="filters-goods">
			  <div class="title">Фильтры по характеристикам и модификациям</div>
			  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
			  {% FOR filter_attr_list %}
				<div class="filter">
				  {filter_attr_list.NAME}:<br />
					<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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> - все - </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 %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
					  {% ENDFOR %}
					</select>
				</div>
			  {% ENDFOR %}
			  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
				  {filter_prop_list.NAME}:<br />
					<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));" 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 %} {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
					  {% ENDFOR %}
					</select>
				</div>
			  {% ENDFOR %}
			</div>
			 <div class="button-load">
					   <button type="submit" class="button" title="Показать">Показать</button>
			  </div>			
			<!-- /END Осноные Фильтры -->
		  </form>
		</div>
		{% ENDIF %}
		<!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->  
        
        замените на:
		<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
		{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		<div class="filters">
		  <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		  <form action="" method="get">
			<!-- Осноные Фильтры -->
			<div class="filters-goods">
			  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
			  {% FOR filter_attr_list %}
				<div class="filter">
					<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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 %}" multiple="multiple" size="5">
					  <option disabled>{filter_attr_list.NAME}</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 %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
					  {% ENDFOR %}
					</select>
				</div>
			  {% ENDFOR %}
			  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
					<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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 %}" multiple="multiple" size="5">
					  <option disabled>{filter_prop_list.NAME}</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 %} {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
					  {% ENDFOR %}
					</select>
				</div>
			  {% ENDFOR %}
			</div>
			 <div class="button-load">
					  <input type="reset" name="reset" class="button" value="Сбросить" />
			  </div>			
			<!-- /END Осноные Фильтры -->
		  </form>
		</div>
		{% ENDIF %}
		<!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->

Далее зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.filters-price, .filters-goods {
	margin-top: 15px;
}

перед ним вставьте:

.filters {
	background: #1E1E21;
	padding: 10px;
}


#12 Tanksav

Tanksav

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

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

Отправлено 03 Май 2017 - 06:47

Спасибо большое, только сейчас значения характеристик просто за названием прощелкиваются и их видно вместе с названием, а нужно чтоб просто название хар-ки было и при нажатии на нее выпадающий список,и можно ли кнопку "сбросить менее заметной сделать? (все показала на рисунке)

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

  • 1.jpg


#13 Vaccina

Vaccina

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

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

Отправлено 03 Май 2017 - 08:08

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
						  {% FOR filter_attr_list %}
								<div class="filter">
										<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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 %}" multiple="multiple" size="5">
										  <option disabled>{filter_attr_list.NAME}</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 %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
										  {% ENDFOR %}
										</select>
								</div>
						  {% ENDFOR %}
						  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
						  {% FOR filter_prop_list %}
								<div class="filter">
										<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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 %}" multiple="multiple" size="5">
										  <option disabled>{filter_prop_list.NAME}</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 %} {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
										  {% ENDFOR %}
										</select>
								</div>
						  {% ENDFOR %}

замените на:
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
						  {% FOR filter_attr_list %}
								<div class="filter">
										<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(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 disabled selected="selected">{filter_attr_list.NAME}</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 %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE}</option>
										  {% ENDFOR %}
										</select>
								</div>
						  {% ENDFOR %}
						  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
						  {% FOR filter_prop_list %}
								<div class="filter">
										<select class="inputText" onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
										  <option disabled selected="selected">{filter_prop_list.NAME}</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 %} {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE}</option>
										  {% ENDFOR %}
										</select>
								</div>
						  {% ENDFOR %}

Далее найдите:
<input name="reset" class="button" value="Сбросить" type="reset">

замените на:
<input name="reset" class="button" value="Сбросить" style="background: none;border: 1px solid #5B5B5B;color: #5B5B5B;" type="reset">


#14 Tanksav

Tanksav

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

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

Отправлено 03 Май 2017 - 09:38

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

#15 Stasya

Stasya

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

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

Отправлено 03 Май 2017 - 10:49

Просмотр сообщенияTanksav (03 Май 2017 - 09:38) писал:

Спасибо большое!, только осталась теперь одна проблемка, фильтр не работает, при выборе характеристики ничего не показывается
Здравствуйте. Вам необходимо в файле main.js найти код
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.filters-goods input').click(function(){
$(this)[0].form.submit();
});

$('.filters-goods-active input').click(function(){
$(this)[0].form.submit();
});
и замените его на  
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.filters-goods select').change(function(){
$(this)[0].form.submit();
});

$('.filters-goods-active select').change(function(){
$(this)[0].form.submit();
});


#16 Tanksav

Tanksav

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

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

Отправлено 03 Май 2017 - 11:43

Просмотр сообщенияStasya (03 Май 2017 - 10:49) писал:

Здравствуйте. Вам необходимо в файле main.js найти код
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.filters-goods input').click(function(){
$(this)[0].form.submit();
});

$('.filters-goods-active input').click(function(){
$(this)[0].form.submit();
});
и замените его на  
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.filters-goods select').change(function(){
$(this)[0].form.submit();
});

$('.filters-goods-active select').change(function(){
$(this)[0].form.submit();
});
Спасибо, фильтр работает, правда теперь не подгружаются значки, вместо них квадраты

#17 Stasya

Stasya

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

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

Отправлено 03 Май 2017 - 13:16

Просмотр сообщенияTanksav (03 Май 2017 - 11:43) писал:

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

#18 Tanksav

Tanksav

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

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

Отправлено 03 Май 2017 - 13:20

Просмотр сообщенияStasya (03 Май 2017 - 13:16) писал:

Уточните, пожалуйста, о каких значках идет речь?
Извините, это у меня просто с инетом проблемы скорее всего. Еще раз большое спасибо!

#19 Tanksav

Tanksav

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

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

Отправлено 12 Май 2017 - 10:58

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

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

  • пример фильтра-итог.jpg


#20 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 12 Май 2017 - 11:17

Просмотр сообщенияTanksav (12 Май 2017 - 10:58) писал:

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

Здравствуйте.
Сделать как показано на Вашем скриншоте не получится, поскольку сортировка и фильтры - две разные формы, которые объединению не подлежат.
Можно поставить формы только по порядку. Пример приведен на скриншоте. Вас устроит такой вариант?

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

  • Screenshot.png





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

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