0
И вот как это выглядит на витрине магазина.
В шаблоне "Осень" при выборе определенного фильтра товара сразу идет запрос на список товаров которые соответствуют этому фильтру. На мобильных устройствах с медленным интернетом частые загрузки страницы могут утомлять покупателя.
Тут можно реализовать специальную кнопку для фильтров. Чтобы покупатель сначала выбрал нужные ему параметры а затем только, нажав на кнопку отправлял запрос на сервер.
Придется не много изменить коды файла "Товары" в разделе Сайт -> Редактор шаблонов.
Код:
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
<div class="filters">
<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
<form action="" method="get">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter">
{filter_attr_list.NAME}:<br />
<select 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 %}">
<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"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="filter">
{filter_prop_list.NAME}:<br />
<select 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 %}">
<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"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<div class="clear"></div>
</form>
</div>
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
Заменить:
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
<div class="filters">
<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
<form action="" method="get" id="filterFormId">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter">
{filter_attr_list.NAME}:<br />
<select 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"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="filter">
{filter_prop_list.NAME}:<br />
<select 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"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
{% ENDFOR %}
</select>
</div>
{% ENDFOR %}
<div class="filter-but filter">
<input type="submit" onClick="$('#filterFormId').submit();" title="Фильтровать товары в категории {CATEGORY_NAME}" class="exclusive" value="Фильтровать" />
</div>
<div class="clear"></div>
</form>
</div>
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
И добавить не большие стили в конец файла style.css.
Код:
.filter-but input {
max-width: 115px;
margin-top: 18px;
}
И вот что получилось после добавления кнопки "Фильтровать":
