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


Настройка Фильтров.

Автор Александр19850630, 25 июля 2017 21:49

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

#1 Александр19850630

Александр19850630

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

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

Отправлено 25 Июль 2017 - 21:49

Добрый вечер, уважаемые админы

Подскажите как можно переместить фильтр, вверх. Идея такая человек открывает категорию и у него сверху сразу выходит фильтр по товарам.

Сейчас он сбоку внизу(середине сайт), не всем удобно им пользоваться, надо специально пролистать чтобы его увидеть, опять таки как показала практика не все его видят )).

Хотим сделать чтобы сразу был сверху. Скрин прикрепили.

Спасибо.

С уважением,
Аккаунт SL-396103

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

  • Фильтр.PNG

#2 Vaccina

Vaccina

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

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

Отправлено 26 Июль 2017 - 05:21

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите и удалите:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
		 {% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		 <div class="block filters">
			 <div class="block-title"><h5><span>Фильтры</span></h5></div>
			 <div class="block-content">
			 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			 <form action="" method="get">
				 <!-- Если есть возможность фильтрации товаров по ценам -->
				 {% IF SHOW_GOODS_PRICE_FILTERS %}
				 <div class="title-filter">Фильтры по ценам</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;" autocomplete="off"/>
					 <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;" autocomplete="off"/>
					 <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>
				 {% ENDIF %}
				 <!-- /END Если есть возможность фильтрации товаров по ценам -->
				 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				 {% FOR filter_attr_list %}
				 <div class="filter">
					 {filter_attr_list.NAME}:<br />
					 <select class="inputText" {% FOR values %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}{% ENDFOR %} 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"{% 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" {% FOR values %}{% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}{% ENDFOR %} 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"{% 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 %}
			 </form>
			 </div>
		 </div>
		 {% ENDIF %}
		 <!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->

Далее зайдите в шаблон Товары - найдите:
<!-- Верхний блок, изменяющий отображение данных выдачи товаров -->
	 <div class="toolbar">
	 <form action="" class="form-inline OrderFilterForm">
		 <noindex>
		 <!-- Вид Таблица/Список -->
		 <div class="view-mode">
		 {% IF GOODS_VIEW_TYPE=1 %}
			 <span title="Таблица" class="fa fa-th-large"></span>
			 <a href="?goods_view_type=2" title="Список" class="fa fa-th-list"></a>
		 {% ELSE %}
			 <a href="?goods_view_type=1" title="Таблица" class="fa fa-th-large"></a>
			 <span title="Список" class="fa fa-th-list"></span>
		 {% ENDIF %}
		 </div>
		 <!-- /END Вид Таблица/Список -->

перед ним вставьте:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
		 {% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		 <div class="filters">
			 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			 <form action="" method="get">
				 <!-- Если есть возможность фильтрации товаров по ценам -->
				 {% IF SHOW_GOODS_PRICE_FILTERS %}
				 <div class="filter"><div class="title-filter">Фильтры по ценам</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;" autocomplete="off"/>
					 <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;" autocomplete="off"/>
					 <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 Если есть возможность фильтрации товаров по ценам -->
				 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				 {% FOR filter_attr_list %}
				 <div class="filter">
					 {filter_attr_list.NAME}:<br />
					 <select class="inputText" {% FOR values %}{% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}{% ENDFOR %} 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"{% 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" {% FOR values %}{% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}{% ENDFOR %} 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"{% 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 class="clear"></div>
			 </form>
			 </div>
		 {% ENDIF %}
		 <!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->

Далее зайдите в main.css - найдите:
.filters .filter {margin: 0 0 10px 0;color: #333744;}

замените на:
.filters {margin-bottom: 20px;}
.filters .filter {margin: 5px 10px;color: #333744;display: block;float: left;}

Результат изменений должен быть следующий:
AGM_GEL.png

#3 Александр19850630

Александр19850630

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

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

Отправлено 26 Июль 2017 - 12:51

Добрый день, все поменял, но ничего не работает

Помогите пожалуйста !!!

Спасибо.

С уважением,
Аккаунт SL-396103

#4 Firefly

Firefly

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

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

Отправлено 27 Июль 2017 - 10:42

Просмотр сообщенияАлександр19850630 (26 Июль 2017 - 12:51) писал:

Добрый день, все поменял, но ничего не работает

Помогите пожалуйста !!!

Спасибо.

С уважением,
Аккаунт SL-396103




Здравствуйте.
У Вас была не полностью выполнена инструкция из сообщения выше.
Внес Вам изменения, проверьте, пожалуйста.

#5 Александр19850630

Александр19850630

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

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

Отправлено 27 Июль 2017 - 22:13

Спасибо, все заработало.

есть один вопрос, как подчеркнуть фильтры. Раньше у них было сове дизайнерское решение, обрамление и они были видны в рамочке.
Как в данном расположении оформить их так же ярко ?

Спасибо, за ответ

С уважением,
Аккаунт SL-396103

#6 Vaccina

Vaccina

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

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

Отправлено 28 Июль 2017 - 07:25

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.filters {margin-bottom: 20px;}


замените на:
.filters {margin-bottom: 20px;background: #F8F8F8;border: 1px solid #333744;padding: 10px;}

Обратно в Общие вопросы


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

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

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy