Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Подбор Товара (Фильтр)

Автор leonamx, 12 мая 2016 21:03

фильтр подб

Авторизуйтесь для ответа в теме

Сообщений в теме: 13

#1 leonamx

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

Пользователи
67 сообщений

Отправлено 12 Май 2016 - 21:03

Всем привет! Подскажите пожалуйста как добавить фильтр как указано у меня на картинке. Необходимы лишь некоторые параметры и соответствующий стиль данному шаблону. Так же необходимо графу "Спецпредложения" сделать красным цветом. Спасибо!

Наверх

#2 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 13 Май 2016 - 04:49

В разделе Товары - Товары зайдите в редактирование категории и добавьте фильтры по необходимым параметрам характеристик и модификаций.

Добавьте пожалуйста данную категорию, чтобы исходя из результата могли написать вам инструкцию.

Наверх

#3 leonamx

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

Пользователи
67 сообщений

Отправлено 13 Май 2016 - 19:25

Спасибо, разобрался! Но стиль фильтра прост, не соответствует стилю сайта. Хочется видеть стиль фильтра таким же как и левое меню "Каталога" и что бы подменю было раскрыто. Например заголовок "Пол" имел раскрытое меню "Женские", "Мужские", "Унисекс". Фильтр должен располагаться выше меню "Каталога". Спасибо! Номер аккаунта; SL-385543.

Фильтр по категории : Мужские часы - http://justwatches.r.../Muzhskie-chasy

Наверх

#4 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 14 Май 2016 - 07:31

В main.css найдите:

.block.filters .filter {
	margin: 5px 0;
	font-size: 14px;
	color: #333744;
}

замените на:

.block.filters .filter {
	margin: 0;
	font-size: 14px;
	color: #333744;
	background: #FCFCFC;
	border-top: 1px solid #ccc;
	padding: 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.block.filters .filter:last-child {
	border-bottom: 1px solid #ccc;
}

далее найдите:

.block.filters select {
	max-width: 95%;
}

замените на:

.block.filters select {
	width: 100%;
	background: #fff;
}

далее найдите:

.block.filters .layout-slider {
	text-align: center;
}

замените на:

.block.filters .layout-slider {
	text-align: center;
	margin-bottom: 10px;
}

Наверх

#5 leonamx

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

Пользователи
67 сообщений

Отправлено 14 Май 2016 - 12:31

Получилось... но не под стиль. Хотелось бы так, как отображено на картинке. В стиле как меню "Каталог". Спасибо!

Наверх

#6 leonamx

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

Пользователи
67 сообщений

Отправлено 24 Май 2016 - 20:45

Нужна помощь!

Наверх

#7 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 25 Май 2016 - 01:13

В женских часах - casio вы можете увидеть полноценное отображение фильтров, они имеют общий стиль с каталогом, разве что фильтр по цене не затронут, немного непонятно как его видоизменить, тоже в блок с фоном и рамкой обернуть?

Наверх

#8 leonamx

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

Пользователи
67 сообщений

Отправлено 25 Май 2016 - 10:42

Надо заменить выпадающий список из параметров на пункты. Фильтр по ценам опустить вниз и изменить название с "Фильтр по ценам" на "Цена" так же заменить название самого Фильтра на "Подобрать часы"

Что то вроде этого:

Наверх

#9 Юля123

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

Пользователи
2 567 сообщений

Отправлено 25 Май 2016 - 15:20

leonamx (25 Май 2016 - 10:42) писал:

Здравствуйте, перед изменением создайте бекап шаблона. Далее в шаблоне HTML код:

			<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
			{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
			<div class="block filters">
			  <div class="block-title"><h3>Подобрать часы</h3></div>
			  <div class="block-content">
				<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
				<form action="" method="get"> <!-- ПРОВЕРИТЬ -->
				  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				  {% FOR filter_attr_list %}
					  <div class="filter">
						 <em>{filter_attr_list.NAME}</em>
						  <div class="contentTbodySearchFilterBlock">
						  {% FOR values %}
							<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_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}</label>
				 
				 
						  <br/>
						  {% ENDFOR %}
						  </div>
					  </div>
				  {% ENDFOR %}
				  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
					{% FOR filter_prop_list %}
					  <div class="filter">
						<em>{filter_prop_list.NAME}</em>
						<div class="contentTbodySearchFilterBlock">
						  {% FOR values %}
							<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterAttrVal{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="filterAttrVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} </label>
						  <br/>
						  {% ENDFOR %}
						</div>
					  </div> 
					{% ENDFOR %}
				  <!-- Если есть возможность фильтрации товаров по ценам -->
				  {% IF SHOW_GOODS_PRICE_FILTERS %}
					<div class="title-filter">Цена</div>
					<div class="layout-slider clearfix">
					  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
					  <span class="price-separator">-</span>
					  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
					  <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">Показать</button>
					  </div>
					</div>
				  {% ENDIF %}
				  <!-- /END Если есть возможность фильтрации товаров по ценам -->
				</form>
			  </div>
			</div>
			{% ENDIF %}
			<!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->

замените на код:

			<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
			{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
			<div class="block filters">
			  <div class="block-title"><h3>Подобрать часы</h3></div>
			  <div class="block-content">
				<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
				<form action="" method="get"> <!-- ПРОВЕРИТЬ -->
				  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				  {% FOR filter_attr_list %}
					  <div class="filter">
						 <em>{filter_attr_list.NAME}</em>
						  <div class="contentTbodySearchFilterBlock">
						  {% FOR values %}
							<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_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}</label>
				 
				 
						  <br/>
						  {% ENDFOR %}
						  </div>
					  </div>
				  {% ENDFOR %}
				  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
					{% FOR filter_prop_list %}
					  <div class="filter">
						<em>{filter_prop_list.NAME}</em>
						<div class="contentTbodySearchFilterBlock">
						  {% FOR values %}
							<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterAttrVal{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="filterAttrVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} </label>
						  <br/>
						  {% ENDFOR %}
						</div>
					  </div> 
					{% ENDFOR %}
				  <!-- Если есть возможность фильтрации товаров по ценам -->
				  {% IF SHOW_GOODS_PRICE_FILTERS %}
					<div class="title-filter">Цена</div>
					<div class="layout-slider clearfix">
					  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
					  <span class="price-separator">-</span>
					  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
					  <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">Показать</button>
					  </div>
					</div>
				  {% ENDIF %}
				  <!-- /END Если есть возможность фильтрации товаров по ценам -->
				</form>
			  </div>
			</div>
			{% ENDIF %}
			<!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->

Наверх

#10 leonamx

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

Пользователи
67 сообщений

Отправлено 25 Май 2016 - 18:08

Спасибо! Внешний вид устраивает. Надо только сменить размер шрифта и стиль шрифта, но это я думаю сделаю сам.

Но.. фильтр не работает. Нет отображения по выбранным параметрам.

Наверх

#11 Firefly

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

Модераторы
3 810 сообщений

Отправлено 25 Май 2016 - 19:06

leonamx (25 Май 2016 - 18:08) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:

								  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
								  {% FOR filter_attr_list %}
										  <div class="filter">
												 <em>{filter_attr_list.NAME}</em>
												  <div class="contentTbodySearchFilterBlock">
												  {% FOR values %}
														<input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_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}</label>
								
								
												  <br/>
												  {% ENDFOR %}
												  </div>
										  </div>
								  {% ENDFOR %}

Замените на:

								  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
								  {% FOR filter_attr_list %}
										  <div class="filter">
												 <em>{filter_attr_list.NAME}</em>
												  <div class="contentTbodySearchFilterBlock">
												  {% 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}</label>
												  <br/>
												  {% ENDFOR %}
												  </div>
										  </div>
								  {% ENDFOR %}

Наверх

#12 leonamx

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

Пользователи
67 сообщений

Отправлено 03 Июнь 2016 - 11:18

Добрый день! Требуется доработка фильтра. Спасибо!

Наверх

#13 Ирина345

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

Модераторы
5 709 сообщений

Отправлено 03 Июнь 2016 - 15:15

leonamx (03 Июнь 2016 - 11:18) писал:

Добрый день! Требуется доработка фильтра. Спасибо!

Здравствуйте, найдите в шаблоне HTML

<!-- Если есть возможность фильтрации товаров по ценам -->
								  {% IF SHOW_GOODS_PRICE_FILTERS %}
										<div class="title-filter">Цена</div>
										<div class="layout-slider clearfix">
										  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
										  <span class="price-separator">-</span>
										  <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 %}" min="1" onkeypress="return keyPress('0123456789')" />
										  <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">Показать</button>
										  </div>
										</div>
								  {% ENDIF %}
								  <!-- /END Если есть возможность фильтрации товаров по ценам -->

и переместите после строк

<div class="block-content">
								<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
								<form action="" method="get"> <!-- ПРОВЕРИТЬ -->

Шрифт Awesome предназначен для иконок, он не относится к шрифтам текста.
В конец main.css добавьте

.contentTbodySearchFilterBlock label:hover {
	color: #22A4F5;
}

Наверх

#14 leonamx

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

Пользователи
67 сообщений

Отправлено 03 Июнь 2016 - 16:45

Спасибо!!

Наверх

Обратно в Главная

Темы с аналогичным тегами фильтр, подб

Вопросы работы сервиса StoreLand → Дизайн → Вопросы общие для всех шаблонов → Другое → Фильтр Работает Некорректно Автор Гость_gvin1_* , 04 марта 2017 фильтр	8 Ответов 3 277 Просмотров	gvin1 24 марта 2017
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Ночь → Фильт В Каталоге Товаров Автор Гость_assa_* , 17 авг. 2016 фильтр	Популярная тема 18 Ответов 5 458 Просмотров	Stasya 08 сент. 2016
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лето → Каталог товаров → Каталог Автор Гость_leonamx_* , 25 мая 2016 каталог, фильтр, меню и 1 еще...	Популярная тема 18 Ответов 3 522 Просмотров	Vaccina 23 июня 2016
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лето → Изменение общей стилистики → Фильтр Автор Гость_leonamx_* , 14 мая 2016 фильтр, главная, карточка, товар 1 2	Популярная тема 38 Ответов 5 016 Просмотров	Firefly 16 июля 2016
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лазурь → Каталог товаров → Предустановленная Автоматическая Сортировка Товара По Наличию Автор Гость_Bogdanovich4you_* , 03 нояб. 2015 товар, наличие, сортировка и 1 еще...	1 Ответ 1 829 Просмотров	Dars 03 нояб. 2015

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

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

Подбор Товара (Фильтр)

Темы с аналогичным тегами фильтр, подб

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

Войти

Google поиск