Итак задача: сделать удобный современный фильтр по характеристикам, функционал и дизайн фильтра я набросал, вот он на скриншоте
Что для этого нужно: определить тип характеристики - числовой или текстовый, в зависимости от этого будет подставляться нужный блок или с чекбоксами или рейндж слайдер, скриншот
Задача номер два: получить идентификатор характеристики (шт., мм, °C и тд) что-бы улучшить читабельность и юзабилити фильтра и подставить их как на скриншоте
Можно конечно все сделать силами JavaScript, но не хотелось бы...
ВОПРОС: как (возможно ли) сделать это цивилизованным образом на стороне сервера?
1
Сообщений в теме: 5
#1
Отправлено 07 Август 2017 - 15:25
#2
Отправлено 17 Август 2017 - 05:24
Здравствуйте.
При реализации такого типа фильтров в любом случае придется добавлять строки JS, но использовать "скелет" можно у фильтра по цене.
Скелет фильтра по цене из дизайн темы "Туризм"
Для ползунка делать условие, когда его выводить, например, если надо для праметров размер,количество и гулбина, то скелет для фильтра по характеристикам будет выглядеть примерно следующим образом:
При реализации такого типа фильтров в любом случае придется добавлять строки 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
Отправлено 18 Август 2017 - 13:35
Добрый день, спасибо за ответ.
Это было бы идеальное решение, но работает такая конструкция только с фильтром по цене. Если я не прав, то был бы очень рад увидеть рабочий пример.
В случае с характеристиками приходится явно передавать ID характеристики и ID значения для каждой из выбранных характеристик.
В итоге, для того, чтобы выбрать товар по характеристике "длина", в диапазоне от 99 до 1390 мм, получается вот такой запрос на сервер:
Так было бы конечно намного проще, в таком случае длина запроса сократилась бы примерно в 65 раз
Так или иначе, меня получилось сделать рабочий фильтр в текущих условиях, только я использовал ID место NAME для IF, (для наглядности пока оставил чекбоксы видимыми. скриншот)
Посмотреть можно на этой странице. Там нужно найти невидимую кнопку (скриншот где находится кнопка)
Сам фильтр работает прекрасно, казалось бы, вопрос решен. Но не тут то было - слишком длинные запросы получаются.
Если вы попробуете вставить запрос что выше в адресную строку и перейти, то получите ошибку 503 или 414 - Too large URI. А это всего только одна характеристика участвует в фильтрации, и текущая серверная логика уже не справляется.
Такая реализация фильтра дает хорошую конверсию и юзабилити, а получается что реализовать ее нельзя - как выйти из этого тупика?
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
Отправлено 21 Август 2017 - 11:06
ke1evra (18 Август 2017 - 13:35) писал:
Добрый день, спасибо за ответ.
Это было бы идеальное решение, но работает такая конструкция только с фильтром по цене. Если я не прав, то был бы очень рад увидеть рабочий пример.
В случае с характеристиками приходится явно передавать ID характеристики и ID значения для каждой из выбранных характеристик.
В итоге, для того, чтобы выбрать товар по характеристике "длина", в диапазоне от 99 до 1390 мм, получается вот такой запрос на сервер:
Так было бы конечно намного проще, в таком случае длина запроса сократилась бы примерно в 65 раз
Так или иначе, меня получилось сделать рабочий фильтр в текущих условиях, только я использовал ID место NAME для IF, (для наглядности пока оставил чекбоксы видимыми. скриншот)
Посмотреть можно на этой странице. Там нужно найти невидимую кнопку (скриншот где находится кнопка)
Сам фильтр работает прекрасно, казалось бы, вопрос решен. Но не тут то было - слишком длинные запросы получаются.
Если вы попробуете вставить запрос что выше в адресную строку и перейти, то получите ошибку 503 или 414 - Too large URI. А это всего только одна характеристика участвует в фильтрации, и текущая серверная логика уже не справляется.
Такая реализация фильтра дает хорошую конверсию и юзабилити, а получается что реализовать ее нельзя - как выйти из этого тупика?
Это было бы идеальное решение, но работает такая конструкция только с фильтром по цене. Если я не прав, то был бы очень рад увидеть рабочий пример.
В случае с характеристиками приходится явно передавать 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. А это всего только одна характеристика участвует в фильтрации, и текущая серверная логика уже не справляется.
Такая реализация фильтра дает хорошую конверсию и юзабилити, а получается что реализовать ее нельзя - как выйти из этого тупика?
#5
Отправлено 24 Август 2017 - 12:22
Stasya (21 Август 2017 - 11:06) писал:
Здравствуйте. Вопрос с длинной запроса можно только решить при помощи смены способа передачи запроса. Т.е. данная форма передается методом get, а его можно сменить на post. Тогда длина url вообще не изменится (относительно длины url без фильтров). В адресной строке так и будет url категории, но при этом будет отправляться запрос. Но в таком случае перестает работать функционал постраничной навигации и смена способа отображения товаров. Этот вопрос можно так же решить. Сделать подгрузку товаров при помощи ajax. Т.е. кликаем по номерам страниц, сама страница не перезагружается, а вот товары меняются.
Добрый день, спасибо за ответ.
Это отличные новости, поменял GET на POST, и все заработало даже лучше чем я ожидал, фильтру быть
Поискал на форуме информацию о подгрузке товаров через AJAX, и к сожалению, такой инфы не нашел. Не могли бы вы направить меня в нужную тему на форуме или подсказать в каком шаблоне такой функционал реализован?
#6
Отправлено 28 Август 2017 - 18:42
ke1evra (24 Август 2017 - 12:22) писал:
Добрый день, спасибо за ответ.
Это отличные новости, поменял GET на POST, и все заработало даже лучше чем я ожидал, фильтру быть
Поискал на форуме информацию о подгрузке товаров через AJAX, и к сожалению, такой инфы не нашел. Не могли бы вы направить меня в нужную тему на форуме или подсказать в каком шаблоне такой функционал реализован?
Это отличные новости, поменял GET на POST, и все заработало даже лучше чем я ожидал, фильтру быть
Поискал на форуме информацию о подгрузке товаров через AJAX, и к сожалению, такой инфы не нашел. Не могли бы вы направить меня в нужную тему на форуме или подсказать в каком шаблоне такой функционал реализован?
$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}И последнее- загрузите прикрепленную картинку в разделе Сайт-> Редактор шаблонов.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных