Сворачивание полей в фильтре

+8
598
Сворачивание полей в фильтре

Данный компонент является решением (не единственным, могут быть еще 🤣 ) темы https://instantcms.ru/forum/svernut-znachenie-polja.html

После установки в настройках поля и свойств появится новая опция «Сворачивать в фильтре», которая становится доступна при включении показа в фильтре.

Изображение

Изображение

Если опцию активировать, поле при показе на сайте (и в виджете, и в панели фильтра в типе контента) будет «свернуто». Как 3 поля на скриншоте.

Изображение

Скриншот для примера. Разумеется, если скрывать поля в хаотичном порядке, то в панели фильтра это будет выглядеть странно.

Ограничения

Доработка предоставляется как есть, бесплатно. Автор не несет никакой ответственности.
Подходит только для modern (и дочерних).
Разрабатывалось на 2.15.1, тестировалось на 2.14.2. На версиях ниже работать не будет. 

Демо нет.

Обратите внимание, что правки коснулись также и 2х файлов шаблона. Поэтому не забывайте их обновлять при обновлении icms. А лучше создайте свой дочерний шаблон, и разместите файлы шаблона этого дополнения в дочернем шаблоне. Как сделать дочерний шаблон

Как установить

По инструкции docs.instantcms.ru/manual/addons

Если что-то пошло не так, удалите компонент и его файлы.

Update 2022-01-22

Архив обновлен до версии 1.0.1 Установить как обычно. Архив для установки/обновления один.
Теперь если поле фильтра заполнено, то оно не скрывается.

Изображение

Прикреплённый файл:
Скачать 9 Кбскачан 21 раз
+1
Олег Васильевич я Олег Васильевич я 3 месяца назад #

Благодаря вам, половина задумки решена. Спасибо!

Есть такое предложение, чтобы сделать информативнее:

  1. $uri_query = cmsCore::getInstance()->uri_query;
  2. $label_hidden_class = '';
  3. $input_hidden_class = ' show';
  4. if(!empty($field['is_in_filter_hidden']) && array_key_exists($field['name'], $uri_query) === false) {
  5. $label_hidden_class = ' collapsed';
  6. $input_hidden_class = '';
  7. }

Или как-то культурнее, чтобы поле было открытым, если по нему применён фильтр. Что скажете?

… Шаблон фильтра в ТК, вроде нет возможности выбрать, а для виджета лучше дополнительный шаблон
0
Алексей Т Алексей Т 3 месяца назад #

Готов задонатить за задумку Олега :)

+1
Loadырь Loadырь 3 месяца назад #

Можно же сделать «покультурнее». Есть переменная $filters

0
Олег Васильевич я Олег Васильевич я 3 месяца назад #

Спасибо, не знал, что в виджете доступна!

+4
Zau4man Zau4man 3 месяца назад #

Обновил компонент с учетом пожеланий выше.

0
Александр Александр 3 месяца назад #

А теоретически к дефолтному шаблону приладить можно?

+1
CEH9I CEH9I 3 месяца назад #

У меня есть решение, но оно построено на CSS.

По пути

/templates/default/controllers/content/widgets/filter/

Создайте файл filter_spoiler.tpl.php

В него добавьте код из спойлера

  1. <div class="widget_content_filter">
  2. <div class="filter-container">
  3. <form action="<?php echo $page_url; ?>" method="get" id="<?php echo $form_id; ?>">
  4. <?php echo html_input('hidden', 'page', 1); ?>
  5. <div class="fields">
  6. <?php foreach($fields as $name => $field){ ?>
  7. <?php $value = isset($filters[$name]) ? $filters[$name] : null; ?>
  8. <?php $output = $field['handler']->getFilterInput($value); ?>
  9. <?php if (!$output){ continue; } ?>
  10.  
  11. <div class="field ft_<?php echo $field['type']; ?> f_<?php echo $field['name']; ?>">
  12. <input type="checkbox" id="value_spoiler <?php echo $field['name']; ?>" />
  13. <label for="value_spoiler <?php echo $field['name']; ?>" ><?php echo $field['title']; ?></label>
  14. <div class="value_spoiler">
  15. <?php echo $output; ?>
  16. </div>
  17. </div>
  18.  
  19.  
  20.  
  21. <?php } ?>
  22. <?php if (!empty($props)){ ?>
  23. <?php foreach($props as $prop){ ?>
  24. <?php $value = isset($filters["p{$prop['id']}"]) ? $filters["p{$prop['id']}"] : null; ?>
  25. <?php $output = $prop['handler']->getFilterInput($value); ?>
  26. <?php if (!$output){ continue; } ?>
  27. <div class="field ft_<?php echo $prop['type']; ?> f_prop_<?php echo $prop['id']; ?>">
  28. <label for="filter_value_spoiler_<?php echo $field['name']; ?>" ><?php echo $prop['title']; ?></label>
  29. <div class="value_spoiler">
  30. <?php echo $output; ?>
  31. </div>
  32. </div>
  33. <?php } ?>
  34. <?php } ?>
  35. </div>
  36. <div class="buttons">
  37. <?php echo html_submit(LANG_FILTER_APPLY); ?>
  38. <?php if (count($filters)){ ?>
  39. <button class="cancel_filter_link"> <a class="cancel_filter_link" href="<?php echo $page_url; ?>"><?php echo LANG_CANCEL; ?></a></button>
  40. <?php } ?>
  41. </div>
  42. </form>
  43. </div>
  44. </div>
  45. <?php ob_start(); ?>
  46. <script>
  47. $(function (){
  48. icms.forms.initFilterForm('#<?php echo $form_id; ?>');
  49. });
  50. </script>
  51. <?php $this->addBottom(ob_get_clean()); ?>
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61. <style>
  62. .cancel_filter_link:hover{
  63. color: white;
  64. text-decoration: none;
  65.  
  66. }
  67. .cancel_filter_link{
  68. background: red;
  69. color: white;
  70. text-decoration: none;
  71. float: right;
  72. }
  73. input[id^="value_spoiler"]{
  74. display: none;
  75. }
  76. input[id^="value_spoiler"] + label {
  77. display: block;
  78. width: 100%;
  79. margin: 0 auto;
  80. padding: 5px 20px;
  81. background: black;
  82. color: #fff;
  83. text-align: center;
  84. font-size: 24px;
  85. border-radius: 8px;
  86. cursor: pointer;
  87. transition: all .6s;
  88. }
  89. input[id^="value_spoiler"] + label:after{
  90. content: '\e85a';
  91. font-family: 'fontello';
  92. float: right;
  93. transition: all .2s;
  94. }
  95. input[id^="value_spoiler"]:checked + label {
  96. color: black;
  97. background: #ccc;
  98. }
  99. input[id^="value_spoiler"]:checked + label:after{
  100. content: '\e85d';
  101. font-family: 'fontello';
  102. float: right;
  103. transition: all .2s;}
  104.  
  105. input[id^="value_spoiler"] ~ .value_spoiler {
  106. width: 95%;
  107. height: 0;
  108. overflow: hidden;
  109. opacity: 0;
  110. color: black;
  111. margin: 5px auto 0;
  112. padding: 5px;
  113. background: #eee;
  114. border: 1px solid #ccc;
  115. border-radius: 8px;
  116. transition: all .6s;
  117. }
  118. input[id^="value_spoiler"]:checked + label + .value_spoiler{
  119. height: auto;
  120. opacity: 1;
  121. display: flex;
  122. padding: 5px;
  123. }
  124. </style>

Потом в настройках виджета выберите этот шаблон и все. Ну, а что не понравится подправите стилями.

Еще от автора

Слайд-панель
Компонент добавит на сайт возможность вывести вверху сайта небольшую "выезжающую" панель, в которой можно анонсировать приложение сайта.
Выбор страницы в пагинации
Делюсь шаблоном пагинации, в котором добавлена возможность выбрать страницу в пагинации, когда страниц очень много.
Ztemplate - расширяем опции виджета Элементы шаблона
Небольшой, но удобный компонент, который позволит добавить в опцию "Что выводить?" виджета "Элементы шаблона" новые пункты или скрыть существующие.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.