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


Несколько Вопросов По Условиям И Переменными

фильтр переменные

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

#1 ke1evra

ke1evra

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

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

Отправлено 07 Август 2017 - 15:25

Итак задача: сделать удобный современный фильтр по характеристикам, функционал и дизайн фильтра я набросал, вот он на скриншоте
Что для этого нужно: определить тип характеристики - числовой или текстовый, в зависимости от этого будет подставляться нужный блок или с чекбоксами или рейндж слайдер, скриншот

Задача номер два: получить идентификатор характеристики (шт., мм, °C и тд) что-бы улучшить читабельность и юзабилити фильтра и подставить их как на скриншоте

Можно конечно все сделать силами JavaScript, но не хотелось бы...

ВОПРОС: как (возможно ли) сделать это цивилизованным образом на стороне сервера?

#2 Vaccina

Vaccina

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

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

Отправлено 17 Август 2017 - 05:24

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

При реализации такого типа фильтров в любом случае придется добавлять строки JS, но использовать "скелет" можно у фильтра по цене.
Скелет фильтра по цене из дизайн темы "Туризм"
<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 button2" type="submit" title="Показать">Показать</button>
				  </div>
				</div>
			  </div>


// Фильтр по ценам
  var
	// Минимальное значение цены для фильтра
	priceFilterMinAvailable = parseInt($('.goodsFilterPriceRangePointers .min').text())
	// Максимальное значение цены для фильтра
	,priceFilterMaxAvailable = parseInt($('.goodsFilterPriceRangePointers .max').text())
	// Максимальное значение цены для фильтра
	,priceSliderBlock = $('#goods-filter-price-slider')
	// Поле ввода текущего значения цены "От"
	,priceInputMin = $( "#goods-filter-min-price" )
	// Поле ввода текущего значения цены "До"
	,priceInputMax = $( "#goods-filter-max-price" )
	// Блок с кнопкой, которую есть смысл нажимать только тогда, когда изменялся диапазон цен.
	,priceSubmitButtonBlock = $( ".goodsFilterPriceSubmit" );
   
  // Изменяет размер ячеек с ценой, т.к. у них нет рамок, есть смысл менять размеры полей ввода, чтобы они выглядили как текст
  function priceInputsChangeWidthByChars() {
	// Если есть блок указания минимальной цены
	if(priceInputMin.length) {
	  priceInputMin.css('width', (priceInputMin.val().length*7 + 60) + 'px');
	  priceInputMax.css('width', (priceInputMax.val().length*7 + 60) + 'px');
	}
  }
 
  // Слайдер, который используется для удобства выбора цены
  priceSliderBlock.slider({
	range: true,
	min: priceFilterMinAvailable,
	max: priceFilterMaxAvailable,
	values: [
	  parseInt($('#goods-filter-min-price').val())
	  ,parseInt($('#goods-filter-max-price').val())
	],
	slide: function( event, ui ) {
	  priceInputMin.val( ui.values[ 0 ] );
	  priceInputMax.val( ui.values[ 1 ] );
	  priceSubmitButtonBlock.show();
	  priceInputsChangeWidthByChars();
	}
  });
  // При изменении минимального значения цены
  priceInputMin.keyup(function(){
	var newVal = parseInt($(this).val());
	if(newVal < priceFilterMinAvailable) {
	  newVal = priceFilterMinAvailable;
	}
	priceSliderBlock.slider("values", 0, newVal);
	priceSubmitButtonBlock.show();
	priceInputsChangeWidthByChars();
  });
  // При изменении максимального значения цены
  priceInputMax.keyup(function(){
	var newVal = parseInt($(this).val());
	if(newVal > priceFilterMaxAvailable) {
	  newVal = priceFilterMaxAvailable;
	}
	priceSliderBlock.slider("values", 1, newVal);
	priceSubmitButtonBlock.show();
	priceInputsChangeWidthByChars();
  });
  // Обновить размеры полей ввода диапазона цен
  priceInputsChangeWidthByChars();

Для ползунка делать условие, когда его выводить, например, если надо для праметров размер,количество и гулбина, то скелет для фильтра по характеристикам будет выглядеть примерно следующим образом:
{% FOR filter_attr_list %}
					   {% IF filter_attr_list.NAME = Размер || filter_attr_list.NAME = Количество || filter_attr_list.NAME = Глубина %}
					  <div class="filters-price">
				<div class="title">{filter_attr_list.NAME}</div>
				<div class="layout-slider">
				  <input id="goods-filter-min-price" class="inputText" type="text" name="form[filter][price][min]" value="" 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="" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
				  <input type="hidden" name="form[filter][available_attr][min]" value="" />
				  <input type="hidden" name="form[filter][available_attr][max]" value="" />
				  <!-- Фильтры по цене -->
				  <div class="goodsFilterPriceRangePointers">
					<span class="min" style="display:none;"></span>
					<span class="max" style="display:none;"></span>
				  </div>
				  <div id="goods-filter-price-slider"></div>
	  <div class="filter_val">
						{% FOR values %}
						  <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} />
						  <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label><br />
						{% ENDFOR %}
						</div>
				  <div class="goodsFilterPriceSubmit">
					<button class="button button2" type="submit" title="Показать">Показать</button>
				  </div>
				</div>
			  </div>
	 {% ENDIF %}
			{% ENDFOR %}


#3 ke1evra

ke1evra

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

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

Отправлено 18 Август 2017 - 13:35

Добрый день, спасибо за ответ.

Просмотр сообщенияVaccina (17 Август 2017 - 05:24) писал:

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

использовать "скелет" можно у фильтра по цене.

Это было бы идеальное решение, но работает такая конструкция только с фильтром по цене. Если я не прав, то был бы очень рад увидеть рабочий пример.

В случае с характеристиками приходится явно передавать ID характеристики и ID значения для каждой из выбранных характеристик.

В итоге, для того, чтобы выбрать товар по характеристике "длина", в диапазоне от 99 до 1390 мм, получается вот такой запрос на сервер:
http://ledbalka.ru/catalog/Svetodiodnye-balki-2?form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392119%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392134%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392133%5D=1&form%5Bfilter%5D%5Battr%
5D%5B3166553%5D%5B11392175%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392300%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392144%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392341%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392216%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392473%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392308%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392125%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392143%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392152%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392135%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392129%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392238%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392339%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392141%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392469%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392256%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392357%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392237%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392222%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392163%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392150%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392138%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392169%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392279%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392196%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392397%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392166%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392305%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392475%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392336%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392173%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392182%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392155%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392314%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392316%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392159%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392225%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392466%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392451%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392158%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392465%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392153%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392265%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392179%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392226%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392160%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392461%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392211%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392200%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392467%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392282%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392192%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392298%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392232%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392204%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392470%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392187%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392403%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392221%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392233%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392285%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392212%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392413%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392365%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392201%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392422%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392198%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392366%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392375%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392412%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392148%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392321%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392338%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392362%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392369%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392234%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392255%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392454%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392462%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392278%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392243%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392468%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392228%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392195%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392183%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392242%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392171%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392177%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392415%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392249%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392261%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392214%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392426%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392324%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392441%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392185%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392342%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392253%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392420%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392293%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392382%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392312%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392472%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392190%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392456%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392377%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392246%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392208%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392296%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392423%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392430%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392251%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392355%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392244%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392333%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392206%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392288%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392433%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392351%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392446%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392290%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392379%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392266%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392436%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392398%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392358%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392395%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392448%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392307%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392239%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392319%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392330%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392345%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392294%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392323%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392283%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392372%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392230%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392449%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392280%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392463%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392391%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392405%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392408%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392327%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392393%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392440%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392387%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392354%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392303%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392332%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392275%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392360%5D=1

Так было бы конечно намного проще, в таком случае длина запроса сократилась бы примерно в 65 раз
<input type="hidden" name="form[filter][attr_id][min]" value="99" />
<input type="hidden" name="form[filter][attr_id][max]" value="1390" />

Так или иначе, меня получилось сделать рабочий фильтр в текущих условиях, только я использовал ID место NAME для IF, (для наглядности пока оставил чекбоксы видимыми. скриншот)
Посмотреть можно на этой странице. Там нужно найти невидимую кнопку (скриншот где находится кнопка)
Сам фильтр работает прекрасно, казалось бы, вопрос решен. Но не тут то было - слишком длинные запросы получаются.

Если вы попробуете вставить запрос что выше в адресную строку и перейти, то получите ошибку 503 или 414 - Too large URI. А это всего только одна характеристика участвует в фильтрации, и текущая серверная логика уже не справляется.

Такая реализация фильтра дает хорошую конверсию и юзабилити, а получается что реализовать ее нельзя - как выйти из этого тупика?

#4 Stasya

Stasya

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

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

Отправлено 21 Август 2017 - 11:06

Просмотр сообщенияke1evra (18 Август 2017 - 13:35) писал:

Добрый день, спасибо за ответ.


Это было бы идеальное решение, но работает такая конструкция только с фильтром по цене. Если я не прав, то был бы очень рад увидеть рабочий пример.

В случае с характеристиками приходится явно передавать ID характеристики и ID значения для каждой из выбранных характеристик.

В итоге, для того, чтобы выбрать товар по характеристике "длина", в диапазоне от 99 до 1390 мм, получается вот такой запрос на сервер:
http://ledbalka.ru/catalog/Svetodiodnye-balki-2?form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392119%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392134%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392133%5D=1&form%5Bfilter%5D%5Battr%
5D%5B3166553%5D%5B11392175%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392300%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392144%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392341%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392216%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392473%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392308%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392125%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392143%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392152%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392135%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392129%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392238%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392339%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392141%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392469%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392256%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392357%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392237%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392222%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392163%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392150%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392138%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392169%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392279%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392196%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392397%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392166%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392305%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392475%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392336%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392173%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392182%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392155%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392314%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392316%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392159%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392225%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392466%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392451%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392158%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392465%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392153%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392265%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392179%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392226%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392160%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392461%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392211%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392200%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392467%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392282%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392192%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392298%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392232%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392204%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392470%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392187%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392403%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392221%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392233%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392285%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392212%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392413%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392365%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392201%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392422%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392198%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392366%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392375%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392412%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392148%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392321%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392338%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392362%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392369%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392234%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392255%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392454%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392462%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392278%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392243%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392468%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392228%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392195%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392183%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392242%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392171%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392177%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392415%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392249%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392261%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392214%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392426%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392324%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392441%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392185%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392342%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392253%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392420%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392293%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392382%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392312%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392472%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392190%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392456%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392377%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392246%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392208%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392296%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392423%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392430%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392251%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392355%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392244%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392333%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392206%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392288%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392433%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392351%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392446%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392290%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392379%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392266%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392436%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392398%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392358%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392395%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392448%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392307%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392239%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392319%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392330%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392345%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392294%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392323%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392283%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392372%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392230%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392449%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392280%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392463%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392391%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392405%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392408%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392327%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392393%5D=1&form%5Bfilter%
5D%5Battr%5D%5B3166553%5D%5B11392440%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392387%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392354%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%
5B11392303%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392332%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392275%5D=1&form%5Bfilter%5D%5Battr%5D%5B3166553%5D%5B11392360%5D=1

Так было бы конечно намного проще, в таком случае длина запроса сократилась бы примерно в 65 раз
<input type="hidden" name="form[filter][attr_id][min]" value="99" />
<input type="hidden" name="form[filter][attr_id][max]" value="1390" />

Так или иначе, меня получилось сделать рабочий фильтр в текущих условиях, только я использовал ID место NAME для IF, (для наглядности пока оставил чекбоксы видимыми. скриншот)
Посмотреть можно на этой странице. Там нужно найти невидимую кнопку (скриншот где находится кнопка)
Сам фильтр работает прекрасно, казалось бы, вопрос решен. Но не тут то было - слишком длинные запросы получаются.

Если вы попробуете вставить запрос что выше в адресную строку и перейти, то получите ошибку 503 или 414 - Too large URI. А это всего только одна характеристика участвует в фильтрации, и текущая серверная логика уже не справляется.

Такая реализация фильтра дает хорошую конверсию и юзабилити, а получается что реализовать ее нельзя - как выйти из этого тупика?
Здравствуйте. Вопрос с длинной запроса можно только решить при помощи смены способа передачи запроса. Т.е. данная форма передается методом get, а его можно сменить на post. Тогда длина url вообще не изменится (относительно длины url без фильтров). В адресной строке так и будет url категории, но при этом будет отправляться запрос. Но в таком случае перестает работать функционал постраничной навигации и смена способа отображения товаров. Этот вопрос можно так же решить. Сделать подгрузку товаров при помощи ajax. Т.е. кликаем по номерам страниц, сама страница не перезагружается, а вот товары меняются.

#5 ke1evra

ke1evra

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

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

Отправлено 24 Август 2017 - 12:22

Просмотр сообщенияStasya (21 Август 2017 - 11:06) писал:

Здравствуйте. Вопрос с длинной запроса можно только решить при помощи смены способа передачи запроса. Т.е. данная форма передается методом get, а его можно сменить на post. Тогда длина url вообще не изменится (относительно длины url без фильтров). В адресной строке так и будет url категории, но при этом будет отправляться запрос. Но в таком случае перестает работать функционал постраничной навигации и смена способа отображения товаров. Этот вопрос можно так же решить. Сделать подгрузку товаров при помощи ajax. Т.е. кликаем по номерам страниц, сама страница не перезагружается, а вот товары меняются.

Добрый день, спасибо за ответ.
Это отличные новости, поменял GET на POST, и все заработало даже лучше чем я ожидал, фильтру быть :)

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

#6 Stasya

Stasya

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

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

Отправлено 28 Август 2017 - 18:42

Просмотр сообщенияke1evra (24 Август 2017 - 12:22) писал:

Добрый день, спасибо за ответ.
Это отличные новости, поменял GET на POST, и все заработало даже лучше чем я ожидал, фильтру быть :)

Поискал на форуме информацию о подгрузке товаров через AJAX, и к сожалению, такой инфы не нашел. Не могли бы вы направить меня в нужную тему на форуме или подсказать в каком шаблоне такой функционал реализован?
Здравствуйте. В конец файла main.js добавьте блок
$142(document).ready(function(){
$('.pagination a').click(function(){
$('.goodsPageNext').html('<div class="loaderBlock"><img src="/design/loader.gif" width="200"></div>');
var url= window.location.href;
var withgGetParam = $(this).attr('href') + '&only_body=1';
//console.log(withgGetParam)
var urlVar = decodeURI(withgGetParam.substring(withgGetParam.indexOf('?'))); // получаем параметры из урла
var arrayVar = []; // массив для хранения переменных
var valueAndKey = []; // массив для временного хранения значения и имени переменной
var resultArray = []; // массив для хранения переменных
arrayVar = (urlVar.substr(1)).split('&'); // разбираем урл на параметры
if(arrayVar[0]=="") return false; // если нет переменных в урле
for (i = 0; i < arrayVar.length; i ++) { // перебираем все переменные из урла
	 valueAndKey = arrayVar[i].split('='); // пишем в массив имя переменной и ее значение
	 resultArray[valueAndKey[0]] = valueAndKey[1]; // пишем в итоговый массив имя переменной и ее значение
}

allMass = new Array();
for(key in resultArray){
	 obj = {};
	 obj.name = key;
	 obj.value = resultArray[key];
	 allMass.push(obj);
}
$.ajax({
	 type : "POST",
	 cache : false,
	 url : url,
	 data: allMass,
	 success: function(data) {
		 $('.goodsPageNext').html($(data).find('.goodsPageNext').html());
}
});
return false;
})
})
Далее в шаблоне Товары найдите блок
{%IFNOT CURRENT_URL=http://ledbalka.ru/catalog %}
{% FOR goods %}
и замените его на
{%IFNOT CURRENT_URL=http://ledbalka.ru/catalog %}
<div class="goodsPageNext">
{% FOR goods %}
Затем найдите блок
{% ENDFOR %}
{% ENDIF %}
<!-- Страницы -->
и замените на
{% ENDFOR %}
</div>
{% ENDIF %}
<!-- Страницы -->
В конец файла main.css добавьте блок
.loaderBlock {text-align:center}
И последнее-  загрузите прикрепленную картинку в разделе Сайт-> Редактор шаблонов.

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

  • loader.gif





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

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