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


Переместить Фильтры

фильтры каталог верстка дизайн

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

#1 Jambul

Jambul

    Пользователь

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

Отправлено 16 Июль 2015 - 19:01

Здравствуйте , необходимо перенести фильтры в правый блок как на картинке в прикрепленных файлах

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

  • filters.png


#2 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 16 Июль 2015 - 20:00

Просмотр сообщенияJambul (16 Июль 2015 - 19:01) писал:

Здравствуйте , необходимо перенести фильтры в правый блок как на картинке в прикрепленных файлах
Здравствуйте.
Верстка Вашего шаблона, не предусматривает размещения блоков в правой колонке.
Можно разместить фильтры в левой колонке, Вас устроит такой вариант?

#3 agentteam

agentteam

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

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

Отправлено 01 Сентябрь 2015 - 15:04

Мне нужно для шаблона "осень" разместить фильтры в левой колонке под каталогом. И также фильтр по цене.
И вторая задача чтобы мои фильтры размещались не горизонтально друг за другом, а вертикально один под другим в левой колонке.

#4 Vaccina

Vaccina

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

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

Отправлено 09 Сентябрь 2015 - 00:17

Указанные у вас в профиле оба магазина заблокированы, укажите пожалуйста действующий аккаунт, на котором необходимо переместить фильтры.

#5 agentteam

agentteam

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

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

Отправлено 09 Сентябрь 2015 - 12:11

SL-292845 - один магазин www.ryukzak-moskva.ru активен и уже второй месяц

#6 Ирина345

Ирина345

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

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

Отправлено 09 Сентябрь 2015 - 17:07

Просмотр сообщенияagentteam (09 Сентябрь 2015 - 12:11) писал:

SL-292845 - один магазин www.ryukzak-moskva.ru активен и уже второй месяц
Здравствуйте, найдите в шаблоне Товары код
  {% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
				<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
								{% FOR filter_attr_list %}
								  <div class="filter">
										{filter_attr_list.NAME}:<br />
										{% FOR values %}
										  <label>
												<input value="1" type="checkbox" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} onclick="$(this).attr('name', $(this).attr('value') == -1 ? '' : $(this).attr('rel'));this.form.submit();" name="{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}">
												{filter_attr_list.values.VALUE}
										  </label>
										{% ENDFOR %}
								  </div>
								{% ENDFOR %}
	
				<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
				{% FOR filter_prop_list %}
				  <div class="filter">
					<div>
					  {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>
				  </div>
				{% ENDFOR %}
			  {% ENDIF %}
и удалите

далее найдите в шаблоне hTML

			<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons" {% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span>
				  {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
				  {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
				{%ENDFOR%}
			  {%ENDIF%}
			</div>
			<!-- /Каталог товаров -->
		  </div>
		</div>

и после вставьте

	  <div id="recently_viewed">
		<form action="" method="get">
			{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
				<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
								{% FOR filter_attr_list %}
								  <div class="filter">
										{filter_attr_list.NAME}:<br />
										{% FOR values %}
										  <label>
												<input value="1" type="checkbox" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} onclick="$(this).attr('name', $(this).attr('value') == -1 ? '' : $(this).attr('rel'));this.form.submit();" name="{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}">
												{filter_attr_list.values.VALUE}
										  </label>
										{% ENDFOR %}
								  </div>
								{% ENDFOR %}
	
				<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
				{% FOR filter_prop_list %}
				  <div class="filter">
					<div>
					  {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>
				  </div>
				{% ENDFOR %}
			  {% ENDIF %}
			  <div class="clear"></div>
			</form></div>


#7 agentteam

agentteam

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

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

Отправлено 09 Сентябрь 2015 - 23:20

Спасибо, мне нужно было еще и фильтр цены переместить, но по примеру смог разобраться.

#8 pilot

pilot

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

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

Отправлено 19 Февраль 2016 - 11:58

Сделал по инструкции, вроде получилось, но не совсем. Можно привести к такому виду, как здесь? www.ryukzak-moskva.ru
Аккаунт SL-377265

#9 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 19 Февраль 2016 - 12:19

Просмотр сообщенияpilot (19 Февраль 2016 - 11:58) писал:

Сделал по инструкции, вроде получилось, но не совсем. Можно привести к такому виду, как здесь? www.ryukzak-moskva.ru
Аккаунт SL-377265

Здравствуйте. Если понимаю Вас правильно, то:

1) Чтобы расположить все элементы списка друг под другом, в шаблоне style.css замените строку:
label {margin-top: 10px!important;display: inline-block; vertical-align: top\0/;}
на:
label {margin-top: 10px!important;display: inline-block; vertical-align: top\0/; width: 100%;}

2) Чтобы убрать жирность, в конец этого же шаблона добавьте:
#recently_viewed .filter {font-weight: normal;}

Уточните, если еще что-то нужно изменить.

#10 pilot

pilot

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

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

Отправлено 20 Февраль 2016 - 16:08

Просмотр сообщенияRedHead (19 Февраль 2016 - 12:19) писал:

Уточните, если еще что-то нужно изменить.

1. Добавить количество товара (в скобках) отвечающих фильтру
2. Выделить жирным название фильтра
3. Подсветить поле названия вариантов фильтра

Заранее спасибо

#11 Firefly

Firefly

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

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

Отправлено 20 Февраль 2016 - 18:42

Просмотр сообщенияpilot (20 Февраль 2016 - 16:08) писал:

1. Добавить количество товара (в скобках) отвечающих фильтру
2. Выделить жирным название фильтра
3. Подсветить поле названия вариантов фильтра

Заранее спасибо

Здравствуйте.
Внес Вам поправки согласно 2 и 3 пункту, уточните, пожалуйста на скриншоте где бы Вы хотели, чтобы отображалась информация о количестве товара в скобках по 1 пункту.

#12 pilot

pilot

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

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

Отправлено 21 Февраль 2016 - 08:36

Просмотр сообщенияFirefly (20 Февраль 2016 - 18:42) писал:

отображалась информация о количестве товара в скобках по 1 пункту.

Как здесь http://napleche.ru/c...ezhnye-ryukzaki

Фильтр по цене нужно перенести к остальным, наверх
Еще нужен сверху фильтров текст "подбор по параметрам"

#13 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Февраль 2016 - 12:08

Просмотр сообщенияpilot (21 Февраль 2016 - 08:36) писал:

Как здесь http://napleche.ru/c...ezhnye-ryukzaki

Фильтр по цене нужно перенести к остальным, наверх
Еще нужен сверху фильтров текст "подбор по параметрам"
Здравствуйте.
На сайте присланном Вами в качестве примера фильтр по цене расположен над товарами, а все остальные фильтры в левой колонке, у Вас на сайте аналогичное расположение фильтров.
Уточните пожалуйста необходимые изменения.
В шаблоне html найдите код
<p><strong>ПОДОБРАТЬ ДВЕРЬ</strong></p>
и замените текст на "подбор по параметрам", так же можно добавить сверху такую же строку, только с другим текстом.

#14 pilot

pilot

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

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

Отправлено 21 Февраль 2016 - 13:13

Danil

Вы не поняли, фильтр по цене хочу перенести в левую колонку, к фильтрам, наверх
. На сайте который я привел как пример, реализовано выведение количество товаров, отвечающих фильтру.

Код "подобрать дверь" Это я сам уже дотумкал, вставил. Прошу помочь сделать отступ от надписи "подобрать дверь" до фильтров и сделать возможным редактирование цвета, шрифта, размера этой надписи. Еще ее надо отцентровать

#15 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Февраль 2016 - 13:26

Просмотр сообщенияpilot (21 Февраль 2016 - 13:13) писал:

Danil

Вы не поняли, фильтр по цене хочу перенести в левую колонку, к фильтрам, наверх
. На сайте который я привел как пример, реализовано выведение количество товаров, отвечающих фильтру.

Код "подобрать дверь" Это я сам уже дотумкал, вставил. Прошу помочь сделать отступ от надписи "подобрать дверь" до фильтров и сделать возможным редактирование цвета, шрифта, размера этой надписи. Еще ее надо отцентровать
Здравствуйте.
На вашем сайте кол-во товаров, так же привязано к фильтрам.
В шаблоне Товары найдите и удалите код
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	 {% 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 Если есть возможность фильтрации товаров по ценам -->
			

			 <div class="clear"></div>
		 </form>
		 </div>
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
В шаблоне html найдите код
<p><strong>ПОДОБРАТЬ ДВЕРЬ</strong></p>
			 <div id="recently_viewed">
			 <form action="" method="get">
и замените на
<p class="textfilter"><strong>ПОДОБРАТЬ ДВЕРЬ</strong></p>
			 <div id="recently_viewed">
			 <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 Если есть возможность фильтрации товаров по ценам -->
В style.css добавьте
.textfilter {
font-size: 15px;
color: #000;
margin: 5px 0px;
text-align: center;
}
изменяйте стили на свои.

#16 pilot

pilot

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

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

Отправлено 21 Февраль 2016 - 14:12

DANIL здОрово, спасибо.
Если не сложно еще хочу:
- регулировать отступ между вариантами фильтра, в общем его нужно уменьшить
- количество товара отвечающего фильтру в скобках, то что просил вначале по примеру http://napleche.ru/c...ezhnye-ryukzaki
- подсветить поле фильтров каким-либо цветом, поле где надпись "подобрать двери" - другим цветом по примеру http://www.shop-nsk....vkhodnye_dveri/

#17 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 23 Февраль 2016 - 19:05

Просмотр сообщенияpilot (21 Февраль 2016 - 14:12) писал:

DANIL здОрово, спасибо.
Если не сложно еще хочу:
- регулировать отступ между вариантами фильтра, в общем его нужно уменьшить
- количество товара отвечающего фильтру в скобках, то что просил вначале по примеру http://napleche.ru/c...ezhnye-ryukzaki
- подсветить поле фильтров каким-либо цветом, поле где надпись "подобрать двери" - другим цветом по примеру http://www.shop-nsk....vkhodnye_dveri/

Здравствуйте. Перед внесением изменений, создайте бэкап.

1) Если необходимо уменьшить междустрочный интервал между фильтрами, то в шаблоне style.css замените строку:
#recently_viewed .filter label {font-weight: normal;}
на:
#recently_viewed .filter label {font-weight: normal;margin-top: 0px!important;}

2) В шаблоне html замените строки:
{% FOR values %}
																				  <label>
																								<input value="1" type="checkbox" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} onclick="$(this).attr('name', $(this).attr('value') == -1 ? '' : $(this).attr('rel'));this.form.submit();" name="{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}">
																								{filter_attr_list.values.VALUE}
																				  </label>
																				{% ENDFOR %}
на:
{% FOR values %}
																				  <label>
																								<input value="1" type="checkbox" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} onclick="$(this).attr('name', $(this).attr('value') == -1 ? '' : $(this).attr('rel'));this.form.submit();" name="{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}">
																								{filter_attr_list.values.VALUE}
																								<span>{filter_attr_list.values.VALUE}</span> ({filter_attr_list.values.NB_GOODS_FILTERED})
																				  </label>
																				{% ENDFOR %}

3) В конец шаблона style.css добавьте строки:
.textfilter strong {
	background: #cecece;
	padding: 5px;
}

Уточните, что Вы имеете ввиду под: "подсветить поле фильтров" добавить фон к блоку фильтров, или только к заголовкам?

#18 pilot

pilot

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

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

Отправлено 24 Февраль 2016 - 09:21

Просмотр сообщенияRedHead (23 Февраль 2016 - 19:05) писал:

добавить фон к блоку фильтров?
Да.
После последних изменений в HTML задвоились фильтры, посмотрите пожалуйста

#19 Юля123

Юля123

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

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

Отправлено 24 Февраль 2016 - 10:02

Просмотр сообщенияpilot (24 Февраль 2016 - 09:21) писал:

Да.
После последних изменений в HTML задвоились фильтры, посмотрите пожалуйста

Здравствуйте, Вы отменили изменения? Указанной проблемы не замечаю. Попробуйте очистить кеш. Чтобы добавить фон к блоку фильтров, в style.css найдите код:

.content_sortPagiBar{margin:20px 0;position: relative;display: block;border-bottom: 1px solid #c0c0c0;padding-bottom: 10px;}

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

.content_sortPagiBar{margin:20px 0;position: relative;display: block;border-bottom: 1px solid #c0c0c0;padding-bottom: 10px;background: #F7F6F4;}

значение  #F7F6F4; меняйте на нужное Вам.

#20 pilot

pilot

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

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

Отправлено 24 Февраль 2016 - 16:00

Изменения не отменял, вот так сейчас выглядят фильтры скр.jpg

В стилях код изменил, фон появился только на заголовке, нужно чтобы весь блок был с фоном, как здесь http://www.shop-nsk....vkhodnye_dveri/





Темы с аналогичным тегами фильтры, каталог, верстка, дизайн

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

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