P.S. сказал:
Очень понравилась твоя идея с фильтром..
На просьбу P.S. Предварительно обязательно сделайте бэкап.
В шаблоне "Товары":
перед
<!-- Если есть товары -->
{% IFNOT goods_empty %}
<!-- Если отображаем товары списком -->
{% IF GOODS_VIEW_TYPE=1 %}
вставить
<div style=" float:left; width:auto;">
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
{% IF TARIFF_FEATURE_GOODS_FILTERS %}
<div class="filters">
<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
<form action="" method="get">
<!-- Если есть возможность фильтрации товаров по ценам -->
{% IF SHOW_GOODS_PRICE_FILTERS %}
<div class="filter">
<div>
Цена:
<div class="contentTbodySearchPriceFilterBlock">
<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" />
<div class="clear"></div>
</div>
<!-- Фильтры по цене -->
<div class="goodsFilterPriceRangePointers"><span class="min">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</span><span class="max">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</span></div>
<div id="goods-filter-price-slider"></div>
<div class="goodsFilterPriceSubmit">
<input class="exclusive" type="submit" value="Показать" />
</div>
</div>
</div>
</div>
{% ENDIF %}
<!-- END Если есть возможность фильтрации товаров по ценам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="title aunder fnt13 contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</div>
<div class="textshort padd51 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>
{% 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>
{% ENDFOR %}
</div>
{% ENDFOR %}
</div>
</ul>
</div>
</div>
<div class="bottom"></div>
</div>
{% ENDIF %}
</form>
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
</div>
заменить
<div style=" float:left; width:auto;">
на
<div style=" float:left; width:auto;position:fixed;left:0%;bottom:0%;"> <!-- Параметры фильтра по характеристикам товаров -->
заменить
<!-- Если есть возможность фильтрации товаров по ценам -->
{% IF SHOW_GOODS_PRICE_FILTERS %}
<div class="filter">
<div>
Цена:
<div class="contentTbodySearchPriceFilterBlock">
на
<!-- Если есть возможность фильтрации товаров по ценам -->
{% IF SHOW_GOODS_PRICE_FILTERS %}
<div class="filter">
<div>
<div class="title aunder fnt13 contentTbodySearchFilterBlockHeader">Цена</div>
<div class="contentTbodySearchPriceFilterBlock">
В
в файл style.css добавить:
.title.aunder.fnt13.contentTbodySearchFilterBlockHeader {
color: #9C1406;
font-weight: bold;
font-size: 18px;
}
.textshort.padd51.contentTbodySearchFilterBlockValues label {
font-weight: normal;
text-transform: uppercase;
color: #4B4A49;
text-align: left;
}
и заменить
.filters {display: block;float: left;}
на
.filters {display: block;float: left;background: #F3F3F3;margin-top: 5px;padding-left: 10px;}
заменить
input[type="checkbox"], input[type="radio"] {
border: medium none;
height: auto;
line-height: normal;
margin: 0.2em 0.5em 0.25em 0;
padding: 0;
width: auto;
float: left;
}
на
input[type="checkbox"], input[type="radio"] {
border: medium none;
height: auto;
line-height: normal;
margin: 0.5em 0.5em 0.25em 0;
padding: 0;
width: auto;
float: left;
}
заменить
/* Фильтр по цене */
.contentTbodySearchPriceFilterBlock {padding: 0 7px;margin-right: 15px;text-align:center;width: 200px;}
.goodsFilterPriceInfo {padding: 0 0 4px 0; width: 200px;text-align: center;}
.goodsFilterPriceInfo label {float: left;font-weight:normal;line-height: 21px;}
.goodsFilterPriceInfo input {width:45px; margin: 1px 0 0 5px;/*border: none;background: #F1F1F0;*/padding: 0 4px;height: 20px;border: 1px solid #abadb3;font-style: italic;font-weight: bold;}
.goodsFilterPriceRangePointers {height: 18px;font-size: 0.9em;color: #404040;width: 100%;overflow: visible;padding-top: 1px;}
.goodsFilterPriceRangePointers .min {float: left; margin-left: -7px;width: auto;font-style: italic;font-weight: bold; }
.goodsFilterPriceRangePointers .max {float: right; margin-right: -8px;width: auto;font-style: italic;font-weight: bold;}
#goods-filter-price-slider {width: 200px;border: 1px solid #abadb3;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;height: 5px;}
.ui-slider .ui-slider-handle {border: 1px solid #abadb3;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;height: 12px;width: 12px;}
.ui-slider .ui-slider-range {background: #f15941;}
.goodsFilterPriceSubmit {display:none;width: 200px;}
.goodsFilterPriceSubmit button {margin: 0 auto;}
.content_catalog_nested_categories li {
max-width: 200px;
float: left;
margin: 4px;
}
на
/* Фильтр по цене / фильтр по характеристикам */
.contentTbodySearchPriceFilterBlock {padding: 0 2px;margin-right: 20px;margin-top: 10px;text-align:center;width: 100px;color: #fff;}
.goodsFilterPriceInfo {padding: 0 0 4px 0; width: 200px;text-align: left;}
.goodsFilterPriceInfo label {float: left;font-weight:normal;line-height: 21px;}
.goodsFilterPriceInfo input {width:5px; margin: 1px 0 0 2px;/*border: none;background: #960018 ;*/padding: 0 1px;height: 17px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border: 1px solid #abadb3;font-style: italic;font-weight: bold;}
.goodsFilterPriceRangePointers {margin-top:40px;height: 18px;display: none;font-size: 0.9em;color: #fff;width: 100%;overflow: visible;padding-top: 1px;}
.goodsFilterPriceRangePointers .min {float: left; margin-left: -7px;width: auto;font-style: italic;font-weight: bold; }
.goodsFilterPriceRangePointers .max {float: right; margin-right: -8px;width: auto;font-style: italic;font-weight: bold;}
#goods-filter-price-slider {margin-top:10px;width: 120px;border: 1px solid #abadb3;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;height: 5px;}
.ui-slider .ui-slider-handle {border: 1px solid #abadb3;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;height: 12px;width: 12px;}
.ui-slider .ui-slider-range {background: #fdeaa8;}
.goodsFilterPriceSubmit {width: 120px;position: absolute ;top: 360px;left: 20px;}/* Положение кнопки "Показать" */
.goodsFilterPriceSubmit button { margin: 0 auto;}
.content_catalog_nested_categories li {
max-width: 140px;
float: left;
margin: 4px;
}
/* Фильтр по цене / фильтр по характеристикам */
Заменить
.goodsFilterPriceRangePointers {
height: 18px;
font-size: 0.9em;
color: #fff;
width: 100%;
overflow: visible;
padding-top: 1px;
}
на
.goodsFilterPriceRangePointers {
display: none;
height: 18px;
font-size: 0.9em;
color: #fff;
width: 100%;
overflow: visible;
padding-top: 1px;
}
Заменить
.goodsDataMainModificationsBlock{background: #F2F2F0;padding: 10px;margin-top: 1em;}
на
.box{background: #ebfdf0; padding: 25px; border: solid 1px #ccc; position: fixed; margin: 0 30%; z-index: 1000;font-size:1.4em;text-align:center;}
Получится примерно так:
Разумеется, с Вашими характеристиками )
Проделал всё сам пошагово, чтобы убедиться, что всё верно. Цвета и расположение элементов сделайте на Ваш вкус.
И, если не сложно- ссылочку на Ваш сайт, интересно посмотреть )