1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Нужна инструкция по настройке скрытия фильтров товаров

Главные вкладки

Комментарии

Аватар пользователя ivnish ivnish 8 сентября 2022 в 7:49

Технически это выглядит так:

1) Пишем JS код, который будет сворачивать-разворачивать фильтры на мобильном
2) Наводим красоту с помощью CSS, иконку добавляем через свойство :before или любым знакомым способом

Аватар пользователя VasyOK VasyOK 9 сентября 2022 в 11:59

Наглядный пример.
1. Модуль jquery_ui_accordion.
2. Приводим HTML к виду:

<div class="acc-place">
  <div class="acc-header">
     /*То, что раскрывает*/
  </div>

  <div class="acc-content">
     /*То, что раскрывается*/
  </div>
</div>

3. В теме.
mytheme.info.yml

libraries:
    - mytheme/themescripts

mytheme.libraries.yml

themescripts:
  version: 1.x
  js:    
    js/my-script.js: {}    
  dependencies:
    - jquery_ui/core
    - jquery_ui_accordion/accordion

4. my-script.js

(function($) {
    Drupal.behaviors.mytheme1Behavior = {
        attach: function(context, settings) {

            var acc = $(".acc-place"),
                activate_acc;

            function accordion_behavior() {

                var min = $(window).width() < 1025;
                if (min && !activate_acc) {
                    acc.accordion({
                        active: false,
                        collapsible: true,
                        heightStyle: "content",
                        header: ".acc-header"
                    });

                    activate_acc = true

                } else if (!min && activate_acc) {
                    acc.accordion("destroy");
                    activate_acc = false
                }

            }

            accordion_behavior();

            $(window).resize(function() {
                accordion_behavior();
            });

        }
    };
})(jQuery, Drupal);

"jquery drupal" погуглите
https://www.youtube.com/watch?v=8YhfAq57qdE - для 7ки.