Переместить Фильтры Товаров
#1
Отправлено 18 Апрель 2017 - 15:51
#2
#3
Отправлено 18 Апрель 2017 - 16:56
#4
Отправлено 18 Апрель 2017 - 17:49
Tanksav (18 Апрель 2017 - 16:56) писал:
Кнопку показать добавил под фильтры.
В шаблоне 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
Отправлено 18 Апрель 2017 - 18:32
#6
Отправлено 18 Апрель 2017 - 18:36
Tanksav (18 Апрель 2017 - 18:32) писал:
#10
Отправлено 02 Май 2017 - 12:44
1. нужно изменить стиль (показано на рисунке)
2.название характеристики в окне выбора а не сверху
3. надпись "фильтр товаров убрать вообще.
4. при выборе характеристики сразу обновляется страница и кнопка "показать" уже не нужна (ее убираем).
5. добавить кнопку "сбросить"
6. если можно, сделать возможным выбор нескольких параметров характеристики сразу
7. если возможно, убрать не действующие опции второй и последующих выбираемых характеристик (сейчас они только чуть светлее чем возможные варианты)
Прикрепляю рисунок, где собственно отобразила что хотелось бы по внешнему виду. Заранее благодарю!
#11
Отправлено 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
Отправлено 03 Май 2017 - 06:47
#13
Отправлено 03 Май 2017 - 08:08
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) --> {% 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
Отправлено 03 Май 2017 - 09:38
#15
Отправлено 03 Май 2017 - 10:49
Tanksav (03 Май 2017 - 09:38) писал:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров $('.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
Отправлено 03 Май 2017 - 11:43
Stasya (03 Май 2017 - 10:49) писал:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров $('.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(); });
#20
Отправлено 12 Май 2017 - 11:17
Tanksav (12 Май 2017 - 10:58) писал:
Здравствуйте.
Сделать как показано на Вашем скриншоте не получится, поскольку сортировка и фильтры - две разные формы, которые объединению не подлежат.
Можно поставить формы только по порядку. Пример приведен на скриншоте. Вас устроит такой вариант?
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных