Разработчикам

Как создать фильтр по цвету?

Пользователь 216641 Заглянувший Сообщений: 16 Регистрация: 16.09.2013	#1 16.09.2013 22:32:37 Подскажите пожалуйста как можно создать фильтр такого вида? https://docs.google.com/file/d/0B-p5ZJyU7mZCS0dETUVkRkw5NWs/edit

Пользователь 13254 Постоянный посетитель Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007	#2 17.09.2013 10:38:53 Самый простой вариант сделать свойство список с цветами можно прямо с числовым значением цвета. И кастомизировать шаблон фильтра, где выводить этот список цветом (css + js)

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

17.09.2013 11:49:43

Цитата
Сергей Мицковец пишет: Самый простой вариант сделать свойство список с цветами можно прямо с числовым значением цвета. И кастомизировать шаблон фильтра, где выводить этот список цветом (css + js)

а можно пожалуйста по подробней?)свойство список с цветами есть, и у каждого цвета есть id,стандартный компонент фильтра добавил в каталог,выбор цвета продукта выводит и фильтрует,но выглядит это все в виде <select> списка </select> , а как сделать чекбоксами не могу додуматься(((

Юрий Волошин Администратор Сообщений: 1376 Баллов: 114 Регистрация: 07.03.2008	#4 17.09.2013 12:54:02 Это фильтр или все таки свойства товара с торговыми предложениями, например: футболка и пошли: зеленая, красная, синяя, ...

Пользователь 216641 Заглянувший Сообщений: 16 Регистрация: 16.09.2013	#5 17.09.2013 13:03:55 это фильтр по цвету продукции преобразовать список цвета продукции в чекбоксы получилось с помощью этой статьи http://devfix.ru/web_studio/blogs/508/ теперь вопрос как каждому чекбоксу задать свой цвет?

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

18.09.2013 11:31:50

Цитата
Александр пишет: преобразовать список цвета продукции в чекбоксы получилось с помощью этой статьи http://devfix.ru/web_studio/blogs/508/

Обратите внимание, что в этой статье не сказано, что сам компонент надо кастомизировать, (посмотрите как это сделано в демо сайте с новостями) иначе после первого же обновления Ваш фильтр «потрется» обновится. Проще всего кастомизировать шаблон компонента и изменить результ компонента в result_modifer.php перед шаблоном и там же добавить к чекбоксам маленькие дивчики с цветом.

В статью не вникал, но насколько я понимаю, код в статье меняет все мультиселекты на чекбоксы. А Вам нужно только один, другие могут остаться мультиселектами. Поэтому в result_modifer.php, а бы нашел текущее свойство $FILTER_NAME."_pf[".$arProp["ВАШ ЦВЕТ"]."]; и соответственно select name="$FILTER_NAME."_pf[".$arProp["ВАШ ЦВЕТ"]."]" и заменил бы на что угодно, хоть на просто дивы с цветом на которые нужно кликнуть. Либо еще проще скрыл бы этот мультиселект, а показывал бы те же цветные дивы и яваскриптом бы «нажимал» на необходимые поля в этом мультиселекте согласно нажатым дивам.

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

18.09.2013 12:15:15

Посмотрел, оказалось совсем просто, вот Ваш result_modifer.php

Код

echo '<pre>';print_r($arResult); echo'</pre>';
foreach($arResult["arrProp"] as $i=>$prop){
   if($prop["CODE"]=="COLOR_ELEMENT"){
      foreach($prop["VALUE_LIST"] as $val=>$name){
         if (in_array($val, $arResult["ITEMS"]["PROPERTY_".$i]["INPUT_VALUE"])) $checked='checked="checked"'; else $checked='';
         $val_prop.='<label><input type="checkbox" name="'.$arResult["FILTER_NAME"].'_pf['.$prop["CODE"].'][]" '.$checked.' value="'.$val.'"/>'.$name.'</label>';
      }
      $arResult["ITEMS"]["PROPERTY_".$i]["INPUT"]=$val_prop;
   }
}

Сответственно цвет сами добавите в label, где он у Вас в названии или в value?
И почитайте про компонент, шаблон и result_modifer

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

18.09.2013 16:32:47

Сергей Мицковец,большое спасибо!!!
но не совсем понятно((
создал файл result_modifer.php с кодом который Вы посоветовали,закинул его к копии компонента фильтра и вот что выводит

Код

после этого еще и выводит фильтры селектами

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

18.09.2013 17:17:33

Все правильно, закоментируйте

Код
echo '<pre>';print_r($arResult); echo'</pre>';

Я его Вам оставил, что бы Вам нагляднее было видно откуда, что берется.

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

#10

18.09.2013 17:30:36

Цитата

Сергей Мицковец пишет:
Все правильно, закоментируйте

Код
echo '<pre>';print_r($arResult); echo'</pre>';

Я его Вам оставил, что бы Вам нагляднее было видно откуда, что берется.

я Вам как раз хотел про это сказать(в предыдущем сообщении),что если закоментировать эту строку,тогда одни списки отображаются(как и без файла result_modifer.php)
не понятно вот как с помощью этого файла разложить по цветам,не могли бы Вы для примера показать хотя бы с одним цветом?

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

#11

18.09.2013 17:41:28

Смотрите строку

Код
if($prop["CODE"]=="COLOR_ELEMENT"){

вместо "COLOR_ELEMENT" Вам нужно написать свой код свойства "TSVET_PRODUKTSII" и обратите внимание он у Вас [MULTIPLE] => N, тогда должны быть радиобатоны вместо чекбоксов.

Пользователь 216641 Заглянувший Сообщений: 16 Регистрация: 16.09.2013	#12 18.09.2013 18:02:59 Сергей Мицковец,если [MULTIPLE] => Y тогда фильтр не работает(( и так и не понятно как чекбокс "обвернуть" своим цветом(

Пользователь 13254 Постоянный посетитель Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007	#13 18.09.2013 18:29:44 Совсем не понятно, у Вас чекбоксы вместо селекта появляются? А куда Вы положили result_modifer.php?

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

#14

18.09.2013 20:33:32

Цитата
Сергей Мицковец пишет: Совсем не понятно, у Вас чекбоксы вместо селекта появляются? А куда Вы положили result_modifer.php?

да,чекбоксы появляются,файл лежит bitrix/templates/название_шаблона/components/bitrix/catalog.filter/template8/result_modifer.php
и при перезагрузке отмеченный чекбокс не checked(
ну с этим я еще может и смогу разобраться,подскажите пожалуйста как разукрасить чекбоксы?

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

#15

19.09.2013 11:01:59

Ну, все правильно, а чекбоксы здесь

Код
if (in_array($val, $arResult["ITEMS"]["PROPERTY_".$i]["INPUT_VALUE"])) $checked='checked="checked"'; else $checked='';

и [MULTIPLE] => Y должен быть, иначе не будет множественности
И вариантов выполнения может быть много:

Код

echo '<pre>';print_r($arResult); echo'</pre>';
$code = "TSVET_PRODUKTSII";
$rsProperty =  CIBlockPropertyEnum::GetList(Array("SORT"=>"ASC"), Array("IBLOCK_ID"=>$arParams["IBLOCK_ID"], "CODE"=>$code));
while($arProperty = $rsProperty->GetNext()){
   $arListProp[$arProperty["ID"]]=$arProperty["XML_ID"];
};
foreach($arResult["arrProp"] as $i=>$prop){
   if($prop["CODE"]==$code){
      foreach($prop["VALUE_LIST"] as $val=>$name){
         if (in_array($val, $arResult["ITEMS"]["PROPERTY_".$i]["INPUT_VALUE"])) $checked='checked="checked"'; else $checked='';
         $val_prop.='<label><input type="checkbox" name="'.$arResult["FILTER_NAME"].'_pf['.$prop["CODE"].'][]" '.$checked.' value="'.$val.'"/><span style="color:#'.$arListProp[$val].'">'.$name.'</span></label>';
      }
      $arResult["ITEMS"]["PROPERTY_".$i]["INPUT"]=$val_prop;
   }
}

Или напишите вместо названия цвета его цифровое значение и рисуйте квадратик, или пишите цифровое значение после названия «Красный#F00», а в результе вырезайте его, да как угодно можно сделать.

Пользователь 216641 Заглянувший Сообщений: 16 Регистрация: 16.09.2013	#16 19.09.2013 11:31:13 Сергей Мицковец, огромное Вам спасибо,что так подробно расписали!) но мне интересна реализация именно такого фильтра по цветам,как здесь http://www.kruzevo.com/catalog/13/0/ уже все перерыл,но такого не могу найти((

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

#17

19.09.2013 11:44:52

Ну, а кто же Вам мешает, методами jQury сделать очень просто, я же Вам писал, даже не нужно менять мультиселект на чекбоксы. Делаете ему display:none, рисуете в темплейте квадратики на основе вашего свойства, каждому из них даете id="color_номер свойства (value)", при onClick на этом квадратике селекту с таким же value, делаете selected. Все просто, при повторном нажатии убираете. Такого не найдете, делайте сами.

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

#18

19.09.2013 12:48:55

Сергей Мицковец, я уже совсем запутался(
если не нужно менять мультиселект,то куда это

Цитата

Делаете ему display:none, рисуете в темплейте квадратики на основе вашего свойства, каждому из них даете id="color_номер свойства (value)", при onClick на этом квадратике селекту с таким же value, делаете selected. Все просто, при повторном нажатии убираете.

все прописывать?

Пользователь 13254 Постоянный посетитель Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007	#19 19.09.2013 13:18:39 Ух, жесть какая-то. display:none пишите своему мультиселекту, либо в темплейте, либо в том же result_modifer, а в темплейте на его месте рисуете квадратики.

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

#20

19.09.2013 14:47:35

Сергей Мицковец, я Вам уже наверное надоел,но последний вопрос,делаю таким способом

Код

$val_prop.='<label><input type="checkbox" style="display: none;"  name="'.$arResult["FILTER_NAME"].'_pf['.$prop["CODE"].'][]" '.$checked.' value="'.$val.'"/><span style="background-color:#'.$arListProp[$val].';width: 18px;
    height: 18px;float: left;margin: 5px;">'.$nam.'</span></label>';

квадратики с цветами выводятся,но как сделать onClick что бы при нажатии на квадратик появлялась рамка вокруг выделенного квадрата,соотв. при повторном нажатии пропадала?

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

#21

19.09.2013 15:40:06

В result_modifer

Код

$val_prop.='<label class="color_box"><input type="checkbox" style="display:none;"  name="'.$arResult["FILTER_NAME"].'_pf['.$prop["CODE"].'][]" '.$checked.' value="'.$val.'"/><span style="background-color:#'.$arListProp[$val].';width: 18px; height: 18px;float:left; margin:5px;"></span></label>';

В template

Код

<style>
.selected_color{border:1px solid #000;  margin:4px !important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
   $(".color_box span").click(function(){
      $(this).toggleClass("selected_color");
   });
})
</script>

Пользователь 13254 Постоянный посетитель Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007	#22 19.09.2013 15:45:17 Ну и добавлять стиль в спан после перегрузки страницы

Пользователь 216641 Заглянувший Сообщений: 16 Регистрация: 16.09.2013	#23 19.09.2013 15:51:06 Сергей Мицковец, у меня просто слов нет,я так Вам благодарен,большущее Вам спасибо!!!)))

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

Заглянувший

Сообщений: 16 Регистрация: 16.09.2013

#24

22.09.2013 18:20:49

Цитата
Сергей Мицковец пишет: Ну и добавлять стиль в спан после перегрузки страницы

не могу понять как это сделать(после перезагрузки страницы пропадает состояние выделенного цвета

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

Постоянный посетитель

Сообщений: 284 Баллов: 28 Регистрация: 02.07.2007

#25

23.09.2013 10:56:58

Так же как и «checked» в result_modifer

Код

foreach($arResult["arrProp"] as $i=>$prop){
   if($prop["CODE"]==$code){
      foreach($prop["VALUE_LIST"] as $val=>$name){
         if (in_array($val, $arResult["ITEMS"]["PROPERTY_".$i]["INPUT_VALUE"])){
               $checked='checked="checked"';
               $spanClass='class="selected_color"';
            }else{
               $checked='';
               $spanClass='';
            }
         $val_prop.='<label class="color_box"><input type="checkbox" style="display:none;"  name="'.$arResult["FILTER_NAME"].'_pf['.$prop["CODE"].'][]" '.$checked.' value="'.$val.'"/><span '.$spanClass.' style="background-color:#'.$arListProp[$val].';width: 18px; height: 18px;float:left; margin:5px;"></span></label>';
      $arResult["ITEMS"]["PROPERTY_".$i]["INPUT"]=$val_prop;
   }
}

Как создать фильтр по цвету?

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером