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


Изменение Фильтра


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

#1 atrofimov

atrofimov

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

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

Отправлено 15 Ноябрь 2016 - 23:18

Здравствуйте! Помогите, пожалуйста, изменить фильтр в аккаунтеSL-395059.

На данный момент переместил стандартные фильтры наверх над  товарами. То как должны выглядеть фильтры, набросал в Painte.

1. Надо было чтобы фильтры были чекбоксами как на приложенной картинке. Чтобы в них отображалось 5 характеристик в окне и справа была прокрутка. а снизу кнопка развернуть и все характеристики появлялись бы  выпадающем окне поверх товаров(как показано на второй картинке)

2. Чтобы в чекбоксах показывалось количество товара по каждой характеристике. И они зависели друг от друга. Логика как сейчас в шаблоне Пластик.

3. Фильтр по цене сделать на одном уровне с фильтрами по характеристикам. И расположить его справа от них.

4. На малых экранах  фильтры по характеристикам чтобы отображались выпадающим меню-чекбоксом в одну строку.

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

  • 9.jpg
  • 10.jpg


#2 atrofimov

atrofimov

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

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

Отправлено 17 Ноябрь 2016 - 11:26

Очень жду Вашей помощи

#3 Vaccina

Vaccina

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

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

Отправлено 19 Ноябрь 2016 - 06:44

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите и удалите:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS %}
	 <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
	 {% IF SHOW_GOODS_FILTERS %}
	 <div class="block">
		 <div class="blocktitle bluesmall">
			 Фильтры
		 </div>
		 <div class="blockmain fnt12n">
		 <ul class="filter">
			 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			 <form action="" method="get">
			 <div class="contentTbodySearchFilterBlock cornerAll">
				 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				 {% FOR filter_attr_list %}
				 <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span>
				 <div class="fnt11i 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><br />
				 {% 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><br />
				 {% ENDFOR %}
				 </div>
				 {% ENDFOR %}
			 </div>
			 </form>
		 </ul>
		 </div>
		 <div class="blockbottom"></div>
	 </div>
	 {% ENDIF %}
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->

Далее зайдите в шаблон Товары - найдите:
<!-- Фильтры показываются только если есть товары в категории -->
{% IFNOT goods_empty %}

после него вставьте:
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS %}
	 <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
	 {% IF SHOW_GOODS_FILTERS %}
		 <ul class="filter">
			 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			 <form action="" method="get">
	 <!-- Если есть возможность фильтрации товаров по ценам -->
	 {% IF SHOW_GOODS_PRICE_FILTERS %}
			 <div class="contentTbodySearchPriceFilterBlock cornerAll txtalgncnt">
				 <!-- Фильтры по цене -->
				 <div class="goodsFilterPriceRangePointers"><div class="min">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</div><div class="max">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</div></div>
				 <div id="goods-filter-price-slider"></div>
				 <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" />
				 <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>
				 <div class="goodsFilterPriceSubmit">
				 <button class="whtblue fnt12n" type="submit">Показать</button>
				 </div>
			 </div>
	 {% ENDIF %}
	 <!-- END Если есть возможность фильтрации товаров по ценам -->
	
			 <div class="contentTbodySearchFilterBlock cornerAll">
				 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
				 {% FOR filter_attr_list %}
				 <div class="fnt11i contentTbodySearchFilterBlockValues">
	 <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span>
				 {% 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><br />
				 {% ENDFOR %}
				 </div>
				 {% ENDFOR %}
				 <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
				 {% FOR filter_prop_list %}
				 <div class="fnt11i contentTbodySearchFilterBlockValues">
	 <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span>
				 {% 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><br />
				 {% ENDFOR %}
				 </div>
				 {% ENDFOR %}
			 </div>
			 </form>
		 </ul>
	 {% ENDIF %}
{% ENDIF %}
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->


В main.css найдите:
#left .block .blockmain ul.filter { padding:2px 10px; }
#left .block .blockmain ul.filter div.contentTbodySearchFilterBlockValues { padding:5px 0; display:block; }
#left .block .blockmain ul.filter .contentTbodySearchFilterBlockValues lable { display:block; color:red; }

замените на:
.contentTbodySearchFilterBlock {
float: left;
width: 70%;
}
ul.filter { padding:2px 10px; }
ul.filter div.contentTbodySearchFilterBlockValues {
padding: 5px 0;
display: block;
overflow-y: scroll;
height: 75px;
width: 48%;
float: left;
margin-right: 10px;
}
ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader {
display: block;
width: 100%;
}
ul.filter .contentTbodySearchFilterBlockValues lable { display:block; color:red; }
/* Фильтры по цене */
.contentTbodySearchPriceFilterBlock {
padding: 0 1em 0 1.4em;
text-align: center;
width: 30%;
float: right;
}
.goodsFilterPriceInfo {padding:1em 0 0.5em;}
.goodsFilterPriceInfo input {width:45px;}
.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:none;}

В main.js найдите:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.contentTbodySearchFilterBlock input').click(function(){
$(this)[0].form.submit();
});
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров

замените на:
// Фильтры по товарам. При нажании на какую либо характеристику или свойство товара происходит фильтрация товаров
$('.contentTbodySearchFilterBlock input').click(function(){
$(this)[0].form.submit();
});
var
// Минимальное значение цены для фильтра
priceFilterMinAvailable = parseInt($('.goodsFilterPriceRangePointers .min').text())
// Максимальное значение цены для фильтра
,priceFilterMaxAvailable = parseInt($('.goodsFilterPriceRangePointers .max').text())
// Максимальное значение цены для фильтра
,priceSliderBlock = $('#goods-filter-price-slider')
// Поле ввода текущего значения цены "От"
,priceInputMin = $( "#goods-filter-min-price" )
// Поле ввода текущего значения цены "До"
,priceInputMax = $( "#goods-filter-max-price" )
// Блок с кнопкой, которую есть смысл нажимать только тогда, когда изменялся диапазон цен.
,priceSubmitButtonBlock = $( ".goodsFilterPriceSubmit" )
;
// Изменяет размер ячеек с ценой, т.к. у них нет рамок, есть смысл менять размеры полей ввода, чтобы они выглядили как текст
function priceInputsChangeWidthByChars() {
// Если есть блок указания минимальной цены
if(priceInputMin.length) {
	 priceInputMin.css('width', (priceInputMin.val().length*7 + 3) + 'px');
	 priceInputMax.css('width', (priceInputMax.val().length*7 + 3) + 'px');
}
}
// Слайдер, который используется для удобства выбора цены
priceSliderBlock.slider({
range: true,
min: priceFilterMinAvailable,
max: priceFilterMaxAvailable,
values: [
	 parseInt($('#goods-filter-min-price').val())
	 ,parseInt($('#goods-filter-max-price').val())
],
slide: function( event, ui ) {
	 priceInputMin.val( ui.values[ 0 ] );
	 priceInputMax.val( ui.values[ 1 ] );
	 priceSubmitButtonBlock.show();
	 priceInputsChangeWidthByChars();
}
});
// При изменении минимального значения цены
priceInputMin.keyup(function(){
var newVal = parseInt($(this).val());
if(newVal < priceFilterMinAvailable) {
	 newVal = priceFilterMinAvailable;
}
priceSliderBlock.slider("values", 0, newVal);
priceSubmitButtonBlock.show();
priceInputsChangeWidthByChars();
});
// При изменении максимального значения цены
priceInputMax.keyup(function(){
var newVal = parseInt($(this).val());
if(newVal > priceFilterMaxAvailable) {
	 newVal = priceFilterMaxAvailable;
}
priceSliderBlock.slider("values", 1, newVal);
priceSubmitButtonBlock.show();
priceInputsChangeWidthByChars();
});
// Обновить размеры полей ввода диапазона цен
priceInputsChangeWidthByChars();
// END Фильтры по товарам.

После изменения не забудьте почистить кэш браузера.

#4 atrofimov

atrofimov

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

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

Отправлено 19 Ноябрь 2016 - 23:29

Здравствуйте! Изменения в аккаунтеSL-395059 произвел! Спасибо за помощь!

Уже похоже на то как хотел чтобы выглядело. Чекбоксы работают отлично и прокрутка удобная. Спасибо!

Несколько уточняющих вопросов, чтобы привести к нужному виду:

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

2. Окна с прокруткой фильтров характеристик обрамить серой окантовкой, и как изменить цвет этой окантовки, если захочу. Сейчас окна без рамок.

3. Расположение фильтра по цене очень удобно. Спасибо! Но стиль фильтра по цене надо сделать как до этого был, стандартный для шаблона Летои заголовок его поменять просто на слово Цена.

4. Увеличить отступ между сортировкой товаров и фильтрами.

5. Очень важный вопрос. На мобильных устройствах и небольших экранах надо чтобы фильтры по характеристикам были свернуты в выпадающий однострочный фильтр чекбокс. Фильтры Располагались бы друг под другом. А ниже них, а не с боку располагался бы фильтр по цене.

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

  • 11.jpg
  • 12.jpg


#5 Stasya

Stasya

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

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

Отправлено 22 Ноябрь 2016 - 15:03

Просмотр сообщенияatrofimov (19 Ноябрь 2016 - 23:29) писал:

Здравствуйте! Изменения в аккаунтеSL-395059 произвел! Спасибо за помощь!

Уже похоже на то как хотел чтобы выглядело. Чекбоксы работают отлично и прокрутка удобная. Спасибо!

Несколько уточняющих вопросов, чтобы привести к нужному виду:

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

2. Окна с прокруткой фильтров характеристик обрамить серой окантовкой, и как изменить цвет этой окантовки, если захочу. Сейчас окна без рамок.

3. Расположение фильтра по цене очень удобно. Спасибо! Но стиль фильтра по цене надо сделать как до этого был, стандартный для шаблона Летои заголовок его поменять просто на слово Цена.

4. Увеличить отступ между сортировкой товаров и фильтрами.

5. Очень важный вопрос. На мобильных устройствах и небольших экранах надо чтобы фильтры по характеристикам были свернуты в выпадающий однострочный фильтр чекбокс. Фильтры Располагались бы друг под другом. А ниже них, а не с боку располагался бы фильтр по цене.

1), 2), 3), 4) Изменения Вам произвела. Проверьте, пожалуйста, на Вашем сайте.
5) Прошу Вас еще раз уточнить как это должно выглядеть. Возможно, у Вас есть какой-либо пример подобной реализации?

#6 atrofimov

atrofimov

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

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

Отправлено 22 Ноябрь 2016 - 20:25

Здравствуйте! Изменения в аккаунтеSL-395059 проверил!

Спасибо большое!!

2,4)Все отлично! Вопросы закрыты!

1) Все получилось так как надо. А можно шрифт заголовка характеристик сделать как шрифт верхнего каталога? И немного увеличить отступ от заголовка фильтра до самого фильтра,особенно в фильтре цены очень близко расположено.

3.) Заголовок тоже шрифтом как верхний каталог сделать. и отступ между заголовком и самим фильтром по цене побольше сделать. И как поменять цвет ползунка и зоны между ползунками?

5) В идеале на маленьких экранах и небольших планшетах это должно выглядеть так как выглядело в изначальном шаблоне Лето, но выпадающее меню фильтра чтобы было чекбоксом. И чтобы при уменьшении экрана фильтр по цене переместился бы под фильтры по характеристикам. Т.е. сначала бы шли несколько выпадающих фильтров-чекбоксов(т.е с множестевенным выбором характеристик) а далее под ними фильтр по цене. Это только для малых экранов и планшетов небольших.
И можно сделать чтобы фильтр по цене менял свою ширину и занимал все свободное место справа от фильтра характериситк, а соответственно на малых экранах когда он располагается под ними, был бы в ширину экрана смартфона.

#7 atrofimov

atrofimov

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

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

Отправлено 25 Ноябрь 2016 - 14:02

Очень жду Вашей помощи

#8 atrofimov

atrofimov

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

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

Отправлено 28 Ноябрь 2016 - 22:50

Вопросы все еще актуальны.. неделю уже тишина.. Помогите, пожалуйста

#9 Stasya

Stasya

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

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

Отправлено 01 Декабрь 2016 - 10:25

Просмотр сообщенияatrofimov (22 Ноябрь 2016 - 20:25) писал:

Здравствуйте! Изменения в аккаунтеSL-395059 проверил!

Спасибо большое!!

2,4)Все отлично! Вопросы закрыты!

1) Все получилось так как надо. А можно шрифт заголовка характеристик сделать как шрифт верхнего каталога? И немного увеличить отступ от заголовка фильтра до самого фильтра,особенно в фильтре цены очень близко расположено.

3.) Заголовок тоже шрифтом как верхний каталог сделать. и отступ между заголовком и самим фильтром по цене побольше сделать. И как поменять цвет ползунка и зоны между ползунками?

5) В идеале на маленьких экранах и небольших планшетах это должно выглядеть так как выглядело в изначальном шаблоне Лето, но выпадающее меню фильтра чтобы было чекбоксом. И чтобы при уменьшении экрана фильтр по цене переместился бы под фильтры по характеристикам. Т.е. сначала бы шли несколько выпадающих фильтров-чекбоксов(т.е с множестевенным выбором характеристик) а далее под ними фильтр по цене. Это только для малых экранов и планшетов небольших.
И можно сделать чтобы фильтр по цене менял свою ширину и занимал все свободное место справа от фильтра характериситк, а соответственно на малых экранах когда он располагается под ними, был бы в ширину экрана смартфона.
Здравствуйте. Простите за долгое ожидание ответа.
1), 3) Вам необходимо в файле main.css найти блок
ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader {
display: block;
width: 100%;
}
и заменить его на
ul.filter div.contentTbodySearchFilterBlockValues .contentTbodySearchFilterBlockHeader {
display: block;
width: 100%;
text-transform: uppercase;
margin-bottom: 5px;
}
Далее в самый конец файла добавьте блок
.contentTbodySearchPriceFilterBlock .title {
text-transform: uppercase;
margin-bottom: 8px;
}
5) По умолчанию в шаблоне фильтры сделаны выпадающим списком (скриншот прикрепила). Но, вставить туда чекбоксы не получиться. Поэтому могу предложить Вам сделать псевдовыпадающий список. Т.е. покупатель будет кликать по заголовку фильтра и из него будут выезжать уже сами значения.

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

  • Screenshot_43.jpg


#10 atrofimov

atrofimov

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

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

Отправлено 01 Декабрь 2016 - 12:21

Здравствуйте! Изменения в аккаунтеSL-395059 произвел! Спасибо за помощь!

1.Вопрос закрыт! Все отлично!
3. Осталось поменять цвет ползунка и зоны между ползунками фильтра цены.

5. Можно и так попробовать. Самое главное чтобы на малых экранах фильтры преобразовывались в выпадающие и располагались друг под другом а фильтр цен под ними. Примерно так как и было в Шаблоне лето на малых экранах. А можно тогда не чекбокс сделать на малых экранах, а просто выпадающий список, но чтобы во втором фильтре после выбора в первом убирались недоступные пункты? или это уже тоже чекбокс?

#11 atrofimov

atrofimov

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

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

Отправлено 05 Декабрь 2016 - 14:28

Очень жду вашей помощи. Помогите пожалуйста закрыть вопросы.

#12 Ирина345

Ирина345

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

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

Отправлено 07 Декабрь 2016 - 15:41

Просмотр сообщенияatrofimov (01 Декабрь 2016 - 12:21) писал:

Здравствуйте! Изменения в аккаунтеSL-395059 произвел! Спасибо за помощь!

1.Вопрос закрыт! Все отлично!
3. Осталось поменять цвет ползунка и зоны между ползунками фильтра цены.

5. Можно и так попробовать. Самое главное чтобы на малых экранах фильтры преобразовывались в выпадающие и располагались друг под другом а фильтр цен под ними. Примерно так как и было в Шаблоне лето на малых экранах. А можно тогда не чекбокс сделать на малых экранах, а просто выпадающий список, но чтобы во втором фильтре после выбора в первом убирались недоступные пункты? или это уже тоже чекбокс?
Здравствуйте,
3.добавьте в конец файла main.css
.ui-slider-range.ui-widget-header.ui-corner-all {
	background: #f39f18;
}
a.ui-slider-handle.ui-state-default.ui-corner-all {
	border: 2px solid #f39f18;
	background: #fff;
	font-weight: normal;
	cursor: pointer;
	border-radius: 100%;
}
5. Вам внесли изменения на сайт и создали бекапы.

#13 atrofimov

atrofimov

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

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

Отправлено 07 Декабрь 2016 - 17:48

Здравствуйте! Изменения в аккаунтеSL-395059 проверил!

Спасибо огромное за помощь!


3. Вопрос закрыт. Все отлично, так как нужно! Спасибо большое!!

5. Такой вид фильтров очень даже устраивает! Понравилось! Спасибо! Несколько уточнений по нему.

5.1 Где можно поменять цвет рамки фильтра? Оранжевый на другой.

5.2 Надо добавить заголовок  ФИЛЬТРЫ над фильтрами,чтобы уже точно было понятно что это фильтры.

5.3 Можно под названием фильтра разместить надпись "Развернуть", и чтобы при развернутом состоянии  она менялась на надпись "Свернуть"?
И чтобы при наведении всплывал комментарий Развернуть фильтр, и соответственно "свернуть фильтр" при развернутом состоянии"

#14 Ирина345

Ирина345

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

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

Отправлено 08 Декабрь 2016 - 14:02

Просмотр сообщенияatrofimov (07 Декабрь 2016 - 17:48) писал:

Здравствуйте! Изменения в аккаунтеSL-395059 проверил!

Спасибо огромное за помощь!


3. Вопрос закрыт. Все отлично, так как нужно! Спасибо большое!!

5. Такой вид фильтров очень даже устраивает! Понравилось! Спасибо! Несколько уточнений по нему.

5.1 Где можно поменять цвет рамки фильтра? Оранжевый на другой.

5.2 Надо добавить заголовок  ФИЛЬТРЫ над фильтрами,чтобы уже точно было понятно что это фильтры.

5.3 Можно под названием фильтра разместить надпись "Развернуть", и чтобы при развернутом состоянии  она менялась на надпись "Свернуть"?
И чтобы при наведении всплывал комментарий Развернуть фильтр, и соответственно "свернуть фильтр" при развернутом состоянии"
Здравствуйте,
1. Что бы изменить цвет рамки фильтра найдите в файле main.css
.contentTbodySearchFilterBlockHeader {
	border: 1px solid #f39f18;
	padding: 12px;
	text-align: center;
	cursor: pointer;
}

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

#15 atrofimov

atrofimov

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

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

Отправлено 08 Декабрь 2016 - 14:20

Здравствуйте! Изменения в аккаунтеSL-395059 проверил!

Все отлично! Большое спасибо!

1. Вопрос закрыт. Спасибо!! все получилось!

2. Вопрос закрыт. Заголовок фильтры не нужен теперь, к пояснениям свернуть и развернуть добавил слово фильтр.

3. Все так как нужно!! Отлично. Спасибо!!!

Спасибо большое за помощь!

#16 atrofimov

atrofimov

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

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

Отправлено 08 Декабрь 2016 - 22:21

Небольшой вопрос(аккаунт SL-395059).

Как сделать шрифт названия фильтра черным цветом и пожирнее не затрагивая стиля уточнений "Свернуть и Развернуть"?

#17 atrofimov

atrofimov

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

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

Отправлено 14 Декабрь 2016 - 20:54

Здравствуйте! Изменения в аккаунтеSL-395059.

Фильтры после Вашей помощи выглядят отлично! Спасибо большое!

Небольшая доработка. Как сделать чтобы не отображались недоступные пункты фильтра?

И еще, добавил кнопку Сбросить фильтры, при малом экране  когда все элементы друг под другом она немного наезжает на фильтр цены. Как между ними при малом экране увеличить отступ.

#18 Ирина345

Ирина345

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

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

Отправлено 19 Декабрь 2016 - 17:26

Просмотр сообщенияatrofimov (08 Декабрь 2016 - 22:21) писал:

Небольшой вопрос(аккаунт SL-395059).

Как сделать шрифт названия фильтра черным цветом и пожирнее не затрагивая стиля уточнений "Свернуть и Развернуть"?
Здравствуйте, найдите в файле main.css
ul.filter div.contentTbodySearchFilterBlockValues div{
overflow-y: scroll;
height: 145px;
border: 1px solid #dddddd;
}


замените на
ul.filter div.contentTbodySearchFilterBlockValues div{
overflow-y: scroll;
height: 145px;
border: 1px solid #dddddd;
	color: #000;
	font-weight: bold;
}
.title_filter {
	font-size: 11px;
	font-weight: normal;
}

Просмотр сообщенияatrofimov (14 Декабрь 2016 - 20:54) писал:

Здравствуйте! Изменения в аккаунтеSL-395059.

Фильтры после Вашей помощи выглядят отлично! Спасибо большое!

Небольшая доработка. Как сделать чтобы не отображались недоступные пункты фильтра?

И еще, добавил кнопку Сбросить фильтры, при малом экране  когда все элементы друг под другом она немного наезжает на фильтр цены. Как между ними при малом экране увеличить отступ.
Найдите в шаблоне Товары код
{% 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><br />
								 {% ENDFOR %}
								 </div>
								 </div>
								 {% ENDFOR %}
								 <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
								 {% FOR filter_prop_list %}
								 <div class="fnt11i contentTbodySearchFilterBlockValues col-md-6 col-xs-12" >
		 <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}<br>
								   <a class="title_filter" title="Развернуть">Развернуть</a></span>
		 <div class="SearchFilterBlock">
								 {% 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><br />
								 {% ENDFOR %}
замените на
{% FOR values %}
										 <input {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %}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 {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %} 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><br {%IF filter_attr_list.values.NB_GOODS_FILTERED=0 %}style="display:none" {% ENDIF %}/>
								 {% ENDFOR %}
								 </div>
								 </div>
								 {% ENDFOR %}
								 <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
								 {% FOR filter_prop_list %}
								 <div class="fnt11i contentTbodySearchFilterBlockValues col-md-6 col-xs-12" >
		 <span class="fnt12b color contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}<br>
								   <a class="title_filter" title="Развернуть">Развернуть</a></span>
		 <div class="SearchFilterBlock">
								 {% FOR values %}
										 <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]"{%IF filter_prop_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %} 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><br {%IF filter_prop_list.values.NB_GOODS_FILTERED=0 %}style="display:none"{% ENDIF %} />
								 {% ENDFOR %}

далее найдите в файле main.css
@media all and (max-width: 641px) {
после вставьте
.contentTbodySearchPriceFilterBlock {
	margin-bottom: 12px;
}


#19 atrofimov

atrofimov

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

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

Отправлено 20 Декабрь 2016 - 00:28

Здравствуйте! Изменения в аккаунтеSL-395059 произвел!

Спасибо большое! Все так как нужно. Вопросы по фильтрам закрыты. Благодарю за помощь!




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

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