Перейти к содержимому


Не Отображаются Фильтры По Характеристикам Товаров.

фильтры по характеристикам фильтры товары фильтры товаров

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 42

#41 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 06 Февраль 2014 - 20:34

Просмотр сообщенияP.S. (06 Февраль 2014 - 16:13) писал:

Доброго времени суток. Хотел узнать, возможно ли сделать фильтр по товарам непосредственно в самом каталоге, а не в категориях каталога. На первой картинке как выглядит сейчас каталог , на второй каталог с фильтром. Есть такая возможность?
Единственный вариант в данном случае сделать категорию, в которой будут все товары и назвать ее примерно так: поиск по фильтрам. Далее уже в ней настроить фильтры. Сейчас фильтры работают таким образом, что идет привязка к конкретной категории, в которой располагаются товары и не распространяются на вложенные категории.

#42 P.S.

P.S.

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 06 Февраль 2014 - 21:18

Понятно, спасибо, правда в таком случае выделенная красным область будет пустая, точнее в ней будет одна категория. так? Хотел еще узнать как перенести фильтр по товарам в левую часть сайта и сделать его вертикальным?  Точно такой же как и у предыдущего человека.

Прикрепленные изображения

  • 5.jpg
  • шлифовка.png


#43 ConstantinRS

ConstantinRS

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 110 сообщений
  • ГородЧелябинск

Отправлено 06 Февраль 2014 - 23:39

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;}

Получится примерно так:

Безымянный2.png

Разумеется, с Вашими характеристиками )

Проделал всё сам пошагово, чтобы убедиться, что всё верно. Цвета и расположение элементов сделайте на Ваш вкус.
И, если не сложно- ссылочку на Ваш сайт, интересно посмотреть )





Темы с аналогичным тегами фильтры по характеристикам, фильтры, товары, фильтры товаров

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных