Сообщений в теме: 6

[agentteam]

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

[Vaccina]

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

[agentteam]

Да, устроит.

[Vaccina]

В необходимой категории добавьте фильтр по характеристикам, а именно цвету, далее в шаблоне 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'};

[agentteam]

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

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

[Vaccina]

В 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;
}

[agentteam]

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