Изменение Фильтра
#1
Отправлено 15 Ноябрь 2016 - 23:18
На данный момент переместил стандартные фильтры наверх над товарами. То как должны выглядеть фильтры, набросал в Painte.
1. Надо было чтобы фильтры были чекбоксами как на приложенной картинке. Чтобы в них отображалось 5 характеристик в окне и справа была прокрутка. а снизу кнопка развернуть и все характеристики появлялись бы выпадающем окне поверх товаров(как показано на второй картинке)
2. Чтобы в чекбоксах показывалось количество товара по каждой характеристике. И они зависели друг от друга. Логика как сейчас в шаблоне Пластик.
3. Фильтр по цене сделать на одном уровне с фильтрами по характеристикам. И расположить его справа от них.
4. На малых экранах фильтры по характеристикам чтобы отображались выпадающим меню-чекбоксом в одну строку.
#2
Отправлено 17 Ноябрь 2016 - 11:26
#3
Отправлено 19 Ноябрь 2016 - 06:44
<!-- Если в тарифном плане подключен модуль фильтров по товарам --> {% IF TARIFF_FEATURE_GOODS_FILTERS %} <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам --> {% IF SHOW_GOODS_FILTERS %} <div class="block"> <div class="blocktitle bluesmall"> Фильтры </div> <div class="blockmain fnt12n"> <ul class="filter"> <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь --> <form action="" method="get"> <div class="contentTbodySearchFilterBlock cornerAll"> <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) --> {% FOR filter_attr_list %} <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span> <div class="fnt11i contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} {% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}({filter_attr_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %} </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span> <div class="fnt11i contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} {% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}({filter_prop_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %} </div> {% ENDFOR %} </div> </form> </ul> </div> <div class="blockbottom"></div> </div> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
Далее зайдите в шаблон Товары - найдите:
<!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %}
после него вставьте:
<!-- Если в тарифном плане подключен модуль фильтров по товарам --> {% IF TARIFF_FEATURE_GOODS_FILTERS %} <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам --> {% IF SHOW_GOODS_FILTERS %} <ul class="filter"> <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь --> <form action="" method="get"> <!-- Если есть возможность фильтрации товаров по ценам --> {% IF SHOW_GOODS_PRICE_FILTERS %} <div class="contentTbodySearchPriceFilterBlock cornerAll txtalgncnt"> <!-- Фильтры по цене --> <div class="goodsFilterPriceRangePointers"><div class="min">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</div><div class="max">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</div></div> <div id="goods-filter-price-slider"></div> <div class="goodsFilterPriceInfo"> от <input id="goods-filter-min-price" type="text" name="form[filter][price][min]" value="{% IF GOODS_FILTER_MIN_PRICE %}{GOODS_FILTER_MIN_PRICE}{% ELSE %}{GOODS_FILTER_MIN_AVAILABLE_PRICE}{% ENDIF %}" autocomplete="off" /> до <input id="goods-filter-max-price" type="text" name="form[filter][price][max]" value="{% IF GOODS_FILTER_MAX_PRICE %}{GOODS_FILTER_MAX_PRICE}{% ELSE %}{GOODS_FILTER_MAX_AVAILABLE_PRICE}{% ENDIF %}" autocomplete="off" /> <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> <div class="goodsFilterPriceSubmit"> <button class="whtblue fnt12n" type="submit">Показать</button> </div> </div> {% ENDIF %} <!-- END Если есть возможность фильтрации товаров по ценам --> <div class="contentTbodySearchFilterBlock cornerAll"> <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) --> {% FOR filter_attr_list %} <div class="fnt11i contentTbodySearchFilterBlockValues"> <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span> {% FOR values %} <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} {% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}({filter_attr_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %} </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <div class="fnt11i contentTbodySearchFilterBlockValues"> <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} {% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}({filter_prop_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %} </div> {% ENDFOR %} </div> </form> </ul> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
В main.css найдите:
#left .block .blockmain ul.filter { padding:2px 10px; } #left .block .blockmain ul.filter div.contentTbodySearchFilterBlockValues { padding:5px 0; display:block; } #left .block .blockmain ul.filter .contentTbodySearchFilterBlockValues lable { display:block; color:red; }
замените на:
.contentTbodySearchFilterBlock { float: left; width: 70%; } ul.filter { padding:2px 10px; } ul.filter div.contentTbodySearchFilterBlockValues { padding: 5px 0; display: block; overflow-y: scroll; height: 75px; width: 48%; float: left; margin-right: 10px; } ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader { display: block; width: 100%; } ul.filter .contentTbodySearchFilterBlockValues lable { display:block; color:red; } /* Фильтры по цене */ .contentTbodySearchPriceFilterBlock { padding: 0 1em 0 1.4em; text-align: center; width: 30%; float: right; } .goodsFilterPriceInfo {padding:1em 0 0.5em;} .goodsFilterPriceInfo input {width:45px;} .goodsFilterPriceRangePointers {height: 16px;font-size: 0.9em;color: #CCC;width: 100%;overflow: visible;} .goodsFilterPriceRangePointers .min {float: left; margin-left: -7px; } .goodsFilterPriceRangePointers .max {float: right; margin-right: -8px;} .goodsFilterPriceSubmit {padding: 0.5em 0 0.4em;display:none;}
В main.js найдите:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров $('.contentTbodySearchFilterBlock input').click(function(){ $(this)[0].form.submit(); }); // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров // Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
замените на:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров $('.contentTbodySearchFilterBlock input').click(function(){ $(this)[0].form.submit(); }); 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 + 3) + 'px'); priceInputMax.css('width', (priceInputMax.val().length*7 + 3) + '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(); // END Фильтры по товарам.
После изменения не забудьте почистить кэш браузера.
#4
Отправлено 19 Ноябрь 2016 - 23:29
Уже похоже на то как хотел чтобы выглядело. Чекбоксы работают отлично и прокрутка удобная. Спасибо!
Несколько уточняющих вопросов, чтобы привести к нужному виду:
1. Заголовок фильтров по характеристикам вывести над окном с прокруткой, сейчас он внутри и тоже прокручивается. Шрифт можно по крупней сделать и как в стиле заголовков шаблона Лето.
2. Окна с прокруткой фильтров характеристик обрамить серой окантовкой, и как изменить цвет этой окантовки, если захочу. Сейчас окна без рамок.
3. Расположение фильтра по цене очень удобно. Спасибо! Но стиль фильтра по цене надо сделать как до этого был, стандартный для шаблона Летои заголовок его поменять просто на слово Цена.
4. Увеличить отступ между сортировкой товаров и фильтрами.
5. Очень важный вопрос. На мобильных устройствах и небольших экранах надо чтобы фильтры по характеристикам были свернуты в выпадающий однострочный фильтр чекбокс. Фильтры Располагались бы друг под другом. А ниже них, а не с боку располагался бы фильтр по цене.
#5
Отправлено 22 Ноябрь 2016 - 15:03
atrofimov (19 Ноябрь 2016 - 23:29) писал:
Уже похоже на то как хотел чтобы выглядело. Чекбоксы работают отлично и прокрутка удобная. Спасибо!
Несколько уточняющих вопросов, чтобы привести к нужному виду:
1. Заголовок фильтров по характеристикам вывести над окном с прокруткой, сейчас он внутри и тоже прокручивается. Шрифт можно по крупней сделать и как в стиле заголовков шаблона Лето.
2. Окна с прокруткой фильтров характеристик обрамить серой окантовкой, и как изменить цвет этой окантовки, если захочу. Сейчас окна без рамок.
3. Расположение фильтра по цене очень удобно. Спасибо! Но стиль фильтра по цене надо сделать как до этого был, стандартный для шаблона Летои заголовок его поменять просто на слово Цена.
4. Увеличить отступ между сортировкой товаров и фильтрами.
5. Очень важный вопрос. На мобильных устройствах и небольших экранах надо чтобы фильтры по характеристикам были свернуты в выпадающий однострочный фильтр чекбокс. Фильтры Располагались бы друг под другом. А ниже них, а не с боку располагался бы фильтр по цене.
1), 2), 3), 4) Изменения Вам произвела. Проверьте, пожалуйста, на Вашем сайте.
5) Прошу Вас еще раз уточнить как это должно выглядеть. Возможно, у Вас есть какой-либо пример подобной реализации?
#6
Отправлено 22 Ноябрь 2016 - 20:25
Спасибо большое!!
2,4)Все отлично! Вопросы закрыты!
1) Все получилось так как надо. А можно шрифт заголовка характеристик сделать как шрифт верхнего каталога? И немного увеличить отступ от заголовка фильтра до самого фильтра,особенно в фильтре цены очень близко расположено.
3.) Заголовок тоже шрифтом как верхний каталог сделать. и отступ между заголовком и самим фильтром по цене побольше сделать. И как поменять цвет ползунка и зоны между ползунками?
5) В идеале на маленьких экранах и небольших планшетах это должно выглядеть так как выглядело в изначальном шаблоне Лето, но выпадающее меню фильтра чтобы было чекбоксом. И чтобы при уменьшении экрана фильтр по цене переместился бы под фильтры по характеристикам. Т.е. сначала бы шли несколько выпадающих фильтров-чекбоксов(т.е с множестевенным выбором характеристик) а далее под ними фильтр по цене. Это только для малых экранов и планшетов небольших.
И можно сделать чтобы фильтр по цене менял свою ширину и занимал все свободное место справа от фильтра характериситк, а соответственно на малых экранах когда он располагается под ними, был бы в ширину экрана смартфона.
#7
Отправлено 25 Ноябрь 2016 - 14:02
#8
Отправлено 28 Ноябрь 2016 - 22:50
#9
Отправлено 01 Декабрь 2016 - 10:25
atrofimov (22 Ноябрь 2016 - 20:25) писал:
Спасибо большое!!
2,4)Все отлично! Вопросы закрыты!
1) Все получилось так как надо. А можно шрифт заголовка характеристик сделать как шрифт верхнего каталога? И немного увеличить отступ от заголовка фильтра до самого фильтра,особенно в фильтре цены очень близко расположено.
3.) Заголовок тоже шрифтом как верхний каталог сделать. и отступ между заголовком и самим фильтром по цене побольше сделать. И как поменять цвет ползунка и зоны между ползунками?
5) В идеале на маленьких экранах и небольших планшетах это должно выглядеть так как выглядело в изначальном шаблоне Лето, но выпадающее меню фильтра чтобы было чекбоксом. И чтобы при уменьшении экрана фильтр по цене переместился бы под фильтры по характеристикам. Т.е. сначала бы шли несколько выпадающих фильтров-чекбоксов(т.е с множестевенным выбором характеристик) а далее под ними фильтр по цене. Это только для малых экранов и планшетов небольших.
И можно сделать чтобы фильтр по цене менял свою ширину и занимал все свободное место справа от фильтра характериситк, а соответственно на малых экранах когда он располагается под ними, был бы в ширину экрана смартфона.
1), 3) Вам необходимо в файле main.css найти блок
ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader { display: block; width: 100%; }и заменить его на
ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader { display: block; width: 100%; text-transform: uppercase; margin-bottom: 5px; }Далее в самый конец файла добавьте блок
.contentTbodySearchPriceFilterBlock .title { text-transform: uppercase; margin-bottom: 8px; }5) По умолчанию в шаблоне фильтры сделаны выпадающим списком (скриншот прикрепила). Но, вставить туда чекбоксы не получиться. Поэтому могу предложить Вам сделать псевдовыпадающий список. Т.е. покупатель будет кликать по заголовку фильтра и из него будут выезжать уже сами значения.
#10
Отправлено 01 Декабрь 2016 - 12:21
1.Вопрос закрыт! Все отлично!
3. Осталось поменять цвет ползунка и зоны между ползунками фильтра цены.
5. Можно и так попробовать. Самое главное чтобы на малых экранах фильтры преобразовывались в выпадающие и располагались друг под другом а фильтр цен под ними. Примерно так как и было в Шаблоне лето на малых экранах. А можно тогда не чекбокс сделать на малых экранах, а просто выпадающий список, но чтобы во втором фильтре после выбора в первом убирались недоступные пункты? или это уже тоже чекбокс?
#11
Отправлено 05 Декабрь 2016 - 14:28
#12
Отправлено 07 Декабрь 2016 - 15:41
atrofimov (01 Декабрь 2016 - 12:21) писал:
1.Вопрос закрыт! Все отлично!
3. Осталось поменять цвет ползунка и зоны между ползунками фильтра цены.
5. Можно и так попробовать. Самое главное чтобы на малых экранах фильтры преобразовывались в выпадающие и располагались друг под другом а фильтр цен под ними. Примерно так как и было в Шаблоне лето на малых экранах. А можно тогда не чекбокс сделать на малых экранах, а просто выпадающий список, но чтобы во втором фильтре после выбора в первом убирались недоступные пункты? или это уже тоже чекбокс?
3.добавьте в конец файла main.css
.ui-slider-range.ui-widget-header.ui-corner-all { background: #f39f18; } a.ui-slider-handle.ui-state-default.ui-corner-all { border: 2px solid #f39f18; background: #fff; font-weight: normal; cursor: pointer; border-radius: 100%; }5. Вам внесли изменения на сайт и создали бекапы.
#13
Отправлено 07 Декабрь 2016 - 17:48
Спасибо огромное за помощь!
3. Вопрос закрыт. Все отлично, так как нужно! Спасибо большое!!
5. Такой вид фильтров очень даже устраивает! Понравилось! Спасибо! Несколько уточнений по нему.
5.1 Где можно поменять цвет рамки фильтра? Оранжевый на другой.
5.2 Надо добавить заголовок ФИЛЬТРЫ над фильтрами,чтобы уже точно было понятно что это фильтры.
5.3 Можно под названием фильтра разместить надпись "Развернуть", и чтобы при развернутом состоянии она менялась на надпись "Свернуть"?
И чтобы при наведении всплывал комментарий Развернуть фильтр, и соответственно "свернуть фильтр" при развернутом состоянии"
#14
Отправлено 08 Декабрь 2016 - 14:02
atrofimov (07 Декабрь 2016 - 17:48) писал:
Спасибо огромное за помощь!
3. Вопрос закрыт. Все отлично, так как нужно! Спасибо большое!!
5. Такой вид фильтров очень даже устраивает! Понравилось! Спасибо! Несколько уточнений по нему.
5.1 Где можно поменять цвет рамки фильтра? Оранжевый на другой.
5.2 Надо добавить заголовок ФИЛЬТРЫ над фильтрами,чтобы уже точно было понятно что это фильтры.
5.3 Можно под названием фильтра разместить надпись "Развернуть", и чтобы при развернутом состоянии она менялась на надпись "Свернуть"?
И чтобы при наведении всплывал комментарий Развернуть фильтр, и соответственно "свернуть фильтр" при развернутом состоянии"
1. Что бы изменить цвет рамки фильтра найдите в файле main.css
.contentTbodySearchFilterBlockHeader { border: 1px solid #f39f18; padding: 12px; text-align: center; cursor: pointer; }
где изменяете значение f39f18, таблица цветов, расположена здесь.
2, Здесь выберите иконку, которая должна отображаться на кнопке и пришлите на иконку ссылку.
3. Вам внесли изменения на сайт.
#15
Отправлено 08 Декабрь 2016 - 14:20
Все отлично! Большое спасибо!
1. Вопрос закрыт. Спасибо!! все получилось!
2. Вопрос закрыт. Заголовок фильтры не нужен теперь, к пояснениям свернуть и развернуть добавил слово фильтр.
3. Все так как нужно!! Отлично. Спасибо!!!
Спасибо большое за помощь!
#16
Отправлено 08 Декабрь 2016 - 22:21
Как сделать шрифт названия фильтра черным цветом и пожирнее не затрагивая стиля уточнений "Свернуть и Развернуть"?
#17
Отправлено 14 Декабрь 2016 - 20:54
Фильтры после Вашей помощи выглядят отлично! Спасибо большое!
Небольшая доработка. Как сделать чтобы не отображались недоступные пункты фильтра?
И еще, добавил кнопку Сбросить фильтры, при малом экране когда все элементы друг под другом она немного наезжает на фильтр цены. Как между ними при малом экране увеличить отступ.
#18
Отправлено 19 Декабрь 2016 - 17:26
atrofimov (08 Декабрь 2016 - 22:21) писал:
Как сделать шрифт названия фильтра черным цветом и пожирнее не затрагивая стиля уточнений "Свернуть и Развернуть"?
ul.filter div.contentTbodySearchFilterBlockValues div{ overflow-y: scroll; height: 145px; border: 1px solid #dddddd; }
замените на
ul.filter div.contentTbodySearchFilterBlockValues div{ overflow-y: scroll; height: 145px; border: 1px solid #dddddd; color: #000; font-weight: bold; } .title_filter { font-size: 11px; font-weight: normal; }
atrofimov (14 Декабрь 2016 - 20:54) писал:
Фильтры после Вашей помощи выглядят отлично! Спасибо большое!
Небольшая доработка. Как сделать чтобы не отображались недоступные пункты фильтра?
И еще, добавил кнопку Сбросить фильтры, при малом экране когда все элементы друг под другом она немного наезжает на фильтр цены. Как между ними при малом экране увеличить отступ.
{% FOR values %} <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} {% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}({filter_attr_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %} </div> </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <div class="fnt11i contentTbodySearchFilterBlockValues col-md-6 col-xs-12" > <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}<br> <a class="title_filter" title="Развернуть">Развернуть</a></span> <div class="SearchFilterBlock"> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} {% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}({filter_prop_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br /> {% ENDFOR %}замените на
{% FOR values %} <input {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %}type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %} for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} {% IF filter_attr_list.values.NB_GOODS_FILTERED > 0 %}({filter_attr_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %}/> {% ENDFOR %} </div> </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <div class="fnt11i contentTbodySearchFilterBlockValues col-md-6 col-xs-12" > <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}<br> <a class="title_filter" title="Развернуть">Развернуть</a></span> <div class="SearchFilterBlock"> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]"{%IF filter_prop_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %} value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} {% IF filter_prop_list.values.NB_GOODS_FILTERED > 0 %}({filter_prop_list.values.NB_GOODS_FILTERED}){% ENDIF %}</label><br {%IF filter_prop_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %} /> {% ENDFOR %}
далее найдите в файле main.css
@media all and (max-width: 641px) {после вставьте
.contentTbodySearchPriceFilterBlock { margin-bottom: 12px; }
#19
Отправлено 20 Декабрь 2016 - 00:28
Спасибо большое! Все так как нужно. Вопросы по фильтрам закрыты. Благодарю за помощь!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных