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


Новый Тип Фильтра По Товарам

Автор Andrew S., 15 янв. 2014 07:45

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

#21 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

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

Получится нормальный новый фильтр по цене поставить? Как у всех.. Чтобы заместо цифр был ползунок.. Тогда и кнопку к правой части не надо будет фиксировать. А чтобы просто справа от ползунка в ряд стояла..

Вот так:
123.png

В технике шаблоне - тот же принцип.. Я смотрел.. Или примерно тот же.. Тот же фильтр, в общем, поставить, что и в технике. В обновленном.

Да, и если можно, чтобы "Цена" и сам фильтр стояли тоже на одной линии..

456.png

Чем меньше пространства займем - тем лучше.. И эстетичнее.

Для еще большей наглядности, сделал все даже в шаблоне "техника":

789.png

Сообщение отредактировал Andrew S.: 06 Февраль 2014 - 05:02

#22 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

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

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

Получится нормальный новый фильтр по цене поставить? Как у всех.. Чтобы заместо цифр был ползунок.. Тогда и кнопку к правой части не надо будет фиксировать. А чтобы просто справа от ползунка в ряд стояла..

Вот так:
Прикрепленный файл 123.png

В технике шаблоне - тот же принцип.. Я смотрел.. Или примерно тот же.. Тот же фильтр, в общем, поставить, что и в технике. В обновленном.

Да, и если можно, чтобы "Цена" и сам фильтр стояли тоже на одной линии..

Прикрепленный файл 456.png

Чем меньше пространства займем - тем лучше.. И эстетичнее.

Для еще большей наглядности, сделал все даже в шаблоне "техника":

Прикрепленный файл 789.png
Здравствуйте.
Приносим извинения за долгое ожидание ответа.
Для начала добавьте в шаблоне HTML после строки
<link rel="stylesheet" href="{FORALL_STYLES_PATH}reset_07.css" type="text/css" />
эту строку
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
Из-за ее отсутствия не было ползунка.
Теперь надо просто подвинуть и стилизовать элементы:
В шаблоне "Товары" замените строку
<div class="goodsFilterPriceSubmit" style="float:right;display:block !important;">
на такую
<div class="goodsFilterPriceSubmit">
И в main.css замените 
/* Редактирование отображения фильтра по цене */
.filter-price {
border-top: 1px solid #EAEAEA;
clear: both;
display: block;
margin: 9px 0 0;
padding: 9px 0 !important;
width: 100% !important;}
.filter-price div {display: inline-block;}
.filter-price input {max-width: 190px;}
.goodsFilterPriceInfo input {min-width: 120px !important;}
на такой код
/* Редактирование отображения фильтра по цене */
.filter-price {
border-top: 1px solid #EAEAEA;
clear: both;
display: block;
margin: 9px 0 0;
padding: 9px 0 !important;
width: 100% !important;}
.filter-price input {max-width: 190px; min-width: 40px; text-align: center;}
.goodsFilterPriceRangePointers span {display: none; }
.contentTbodySearchPriceFilterBlock {padding: 1em 1em 0 1.4em;text-align:center; min-width: 100px;float: left;}
.goodsFilterPriceInfo {padding:1em 0 0.5em; float: left;}
.goodsFilterPriceRangePointers {height: 16px;font-size: 0.9em;color: #CCC;width: 100%;overflow: visible;}
.goodsFilterPriceRangePointers .min {float: left; margin-left: -7px; }
.goodsFilterPriceRangePointers .max {float: right; margin-right: -8px;}
.goodsFilterPriceSubmit {padding: 0.5em 0 0.4em;display:block; float:left;margin-left: 10px;}

#23 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 07 Февраль 2014 - 04:36

Просмотр сообщенияsengun (06 Февраль 2014 - 14:15) писал:

Здравствуйте.
Приносим извинения за долгое ожидание ответа.
Для начала добавьте в шаблоне HTML после строки
<link rel="stylesheet" href="{FORALL_STYLES_PATH}reset_07.css" type="text/css" />
эту строку
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
Из-за ее отсутствия не было ползунка.
Теперь надо просто подвинуть и стилизовать элементы:
В шаблоне "Товары" замените строку
<div class="goodsFilterPriceSubmit" style="float:right;display:block !important;">
на такую
<div class="goodsFilterPriceSubmit">
И в main.css замените 
/* Редактирование отображения фильтра по цене */
.filter-price {
border-top: 1px solid #EAEAEA;
clear: both;
display: block;
margin: 9px 0 0;
padding: 9px 0 !important;
width: 100% !important;}
.filter-price div {display: inline-block;}
.filter-price input {max-width: 190px;}
.goodsFilterPriceInfo input {min-width: 120px !important;}
на такой код
/* Редактирование отображения фильтра по цене */
.filter-price {
border-top: 1px solid #EAEAEA;
clear: both;
display: block;
margin: 9px 0 0;
padding: 9px 0 !important;
width: 100% !important;}
.filter-price input {max-width: 190px; min-width: 40px; text-align: center;}
.goodsFilterPriceRangePointers span {display: none; }
.contentTbodySearchPriceFilterBlock {padding: 1em 1em 0 1.4em;text-align:center; min-width: 100px;float: left;}
.goodsFilterPriceInfo {padding:1em 0 0.5em; float: left;}
.goodsFilterPriceRangePointers {height: 16px;font-size: 0.9em;color: #CCC;width: 100%;overflow: visible;}
.goodsFilterPriceRangePointers .min {float: left; margin-left: -7px; }
.goodsFilterPriceRangePointers .max {float: right; margin-right: -8px;}
.goodsFilterPriceSubmit {padding: 0.5em 0 0.4em;display:block; float:left;margin-left: 10px;}
Офигенно! ***sorry )))

#24 pro_taras

pro_taras

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

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

Отправлено 24 Октябрь 2014 - 15:28

Подскажите, плиз, как в каталоге товаров в фильтре по цене поменять местами ползунок с окошками цен? (как в скрине)
чтобы ползунок был сверху, а окошко цен снизу? Шаблон "весна"

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

  • скрин.png

#25 Alekseys

Alekseys

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

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

Отправлено 24 Октябрь 2014 - 16:07

Просмотр сообщенияpro_taras (24 Октябрь 2014 - 15:28) писал:

Подскажите, плиз, как в каталоге товаров в фильтре по цене поменять местами ползунок с окошками цен? (как в скрине)
чтобы ползунок был сверху, а окошко цен снизу? Шаблон "весна"
Здравствуйте. В шаблоне Товары перенесите блок
<div class="contentTbodySearchPriceFilterBlock">
					  <!-- Фильтры по цене -->
					  <div class="goodsFilterPriceRangePointers"><span class="min">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</span><span class="max">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</span><div class="clear"></div></div>
					  <div id="goods-filter-price-slider"></div>
					  <div class="goodsFilterPriceSubmit">
						<input class="button" type="submit" value="Показать" />
					  </div>
					</div>
поставив его после
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
		{% IF TARIFF_FEATURE_GOODS_FILTERS %}
		  <div class="filters">
			<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			<form action="" method="get">
			  <!-- Если есть возможность фильтрации товаров по ценам -->
			  {% IF SHOW_GOODS_PRICE_FILTERS %}
				<div class="filter">
				  <div>
и в main.css добавьте
.contentTbodySearchPriceFilterBlock {
margin-bottom: 15px;
}

#26 pro_taras

pro_taras

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

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

Отправлено 24 Октябрь 2014 - 17:25

Просмотр сообщенияAlekseys (24 Октябрь 2014 - 16:07) писал:

Здравствуйте. В шаблоне Товары перенесите блок
<div class="contentTbodySearchPriceFilterBlock">
					 <!-- Фильтры по цене -->
					 <div class="goodsFilterPriceRangePointers"><span class="min">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</span><span class="max">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</span><div class="clear"></div></div>
					 <div id="goods-filter-price-slider"></div>
					 <div class="goodsFilterPriceSubmit">
					 <input class="button" type="submit" value="Показать" />
					 </div>
				 </div>
поставив его после
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
	 {% IF TARIFF_FEATURE_GOODS_FILTERS %}
		 <div class="filters">
		 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		 <form action="" method="get">
			 <!-- Если есть возможность фильтрации товаров по ценам -->
			 {% IF SHOW_GOODS_PRICE_FILTERS %}
			 <div class="filter">
				 <div>
и в main.css добавьте
.contentTbodySearchPriceFilterBlock {
margin-bottom: 15px;
}


СпасибО!!!!!!!!!!!
Помогите еще выровнять результат )
чтобы ползунок, и поля "для кого", "размеры" - были на одном уровне, и прямоугольнички с данными - тоже на одном уровне

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

  • скрин2.png

#27 Ирина345

Ирина345

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

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

Отправлено 24 Октябрь 2014 - 17:35

Просмотр сообщенияpro_taras (24 Октябрь 2014 - 17:25) писал:

СпасибО!!!!!!!!!!!
Помогите еще выровнять результат )
чтобы ползунок, и поля "для кого", "размеры" - были на одном уровне, и прямоугольнички с данными - тоже на одном уровне
Здравствуйте, обновите страницу, отображается корректно или очистите кеш браузера.

#28 pro_taras

pro_taras

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

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

Отправлено 24 Октябрь 2014 - 17:47

Просмотр сообщенияИрина345 (24 Октябрь 2014 - 17:35) писал:

Здравствуйте, обновите страницу, отображается корректно или очистите кеш браузера.

Спасибо! разобрался, удалил    vertical-align: top
в строке .filter {display: inline-block; *display: inline; *zoom: 1;*width: auto; padding-right: 10px;vertical-align: top;margin-top: 15px;}
и вроде выровнялось!
Обратно в Каталог товаров


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Техника
  5. → Каталог товаров
  6. Privacy Policy