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


Фильтр По Цвету Не Словами, А Цветом

фильтры

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

#1 agentteam

agentteam

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

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

Отправлено 15 Октябрь 2015 - 21:16

Добрый день,
Есть ли возможность сделать отображение фильтров по цветам, не словами "черный" "белый", а блоками с соответствующим цветом. Как здесь например http://prntscr.com/8ro1g4  ?

#2 Vaccina

Vaccina

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

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

Отправлено 16 Октябрь 2015 - 04:17

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

#3 agentteam

agentteam

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

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

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

Да, устроит.

#4 Vaccina

Vaccina

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

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

Отправлено 28 Октябрь 2015 - 06:42

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

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

в конец main.js вставьте:
$(function() {
var colors = {'Коричневый': 'brown', 'Серый': 'gray', 'Черный': 'black'};
$('.filter.colors label span').each(function() {

		 var name = $.trim($(this).text());
		 if(name in colors) {
				 $(this).css({
						 'backgroundColor': colors[name]
				 });
		 }
});
});


В последующем вам необходимо редактировать код в main.js, а именно строку:
var colors = {'Коричневый': 'brown', 'Серый': 'gray', 'Черный': 'black'};


#5 agentteam

agentteam

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

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

Отправлено 29 Ноябрь 2015 - 20:54

Спасибо. Попробовал, и получилось что фоном для названий цветов стали соответствующие цвета. Скриншот http://prntscr.com/98daql
Но так выглядит не упорядоченно.

Можно ли сделать чтобы перед названием цвета появлялся 15х15px прямоугольник, у которого уже фон был бы соответствующего цвета? На скриншото изобразил что имею ввиду http://prntscr.com/98dcvb
Сам я не додумался как.

#6 Vaccina

Vaccina

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

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

Отправлено 03 Декабрь 2015 - 04:31

В main.js:
$(function() {
var colors = {'Коричневый': 'brown', 'Серый': 'gray', 'Черный': 'black'};
$('.filter.colors label span').each(function() {
				 var name = $.trim($(this).text());
				 if(name in colors) {
								 $(this).css({
												 'backgroundColor': colors[name]
								 });
				 }
});
});

замените на:
$(function() {
var colors = {'Коричневый': 'brown', 'Серый': 'gray', 'Черный': 'black'};
$('.filter.colors label span').each(function() {
				 var name = $.trim($(this).text());
				 if(name in colors) {
								 $(this).prepend("<span class='color_label'></span>");
								 $(this).find('span').css({
												 'backgroundColor': colors[name]
								 });
				 }
});
});

В style.css добавьте:
.filter.colors label span.color_label {
	content: " ";
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}


#7 agentteam

agentteam

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

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

Отправлено 04 Декабрь 2015 - 15:16

Отлично получилось, спасибо большое!





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

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

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