[woof_slideout]

The [woof_slideout] шорткод создает выдвижную панель фильтра, которая появляется с края экрана. Это компактное решение, которое скрывает фильтр до тех пор, пока он не понадобится пользователю — идеально подходит для мобильных устройств, страниц архива товаров или любого макета, где ограничен объем экрана.

Выдвижная панель поддерживает как графические, так и текстовые триггеры, настраиваемую анимацию, поведение, специфичное для мобильных устройств, и передает все неизвестные атрибуты внутреннему [woof] шорткод.

Атрибуты

Атрибут	По умолчанию	Описание
`image`	Иконка по умолчанию для плагина	URL изображения триггера. Установите `null` для использования вместо этого текстовой кнопки.
`image_h`	`50`	Высота изображения триггера в пикселях
`image_w`	`50`	Ширина изображения триггера в пикселях
`action`	`click`	Действие триггера: `click` or `hover`
`location`	`right`	Положение выдвижной панели: `left`, `right`, `top`, или `bottom`
`speed`	`100`	Скорость анимации в миллисекундах
`offset`	`100px`	Смещение от верха (для левого/правого положения) или от левого края (для верхнего/нижнего положения). Поддерживает px, %, em и т.д.
`onloadslideout`	`true`	Открыта ли панель при загрузке страницы (`true` or `false`)
`mobile_behavior`	`0`	Контроль видимости: `0` = показать на всех устройствах, `1` = показать только на мобильных, `2` = показать только на десктопе
`width`	`auto`	Ширина панели (например, `350px`, `30%`, `auto`)
`height`	`auto`	Высота панели (например, `500px`, `auto`)
`text`	`Filter`	Текст кнопки, отображаемый, когда `image` установлен на `null`. Также используется как заголовок.
`class`	`''`	Дополнительный CSS-класс для контейнера выдвижной панели
`redirect`	`''`	URL перенаправления после применения фильтра

Базовое использование


[woof_slideout]

Отображает выдвижную панель фильтра с правой стороны с настройками по умолчанию. Панель содержит стандартный [woof] фильтр.

Выдвижная панель слева


[woof_slideout location="left" speed="300" width="400px"]

Выдвигается с левой стороны с анимацией 300 мс и шириной панели 400 пикселей.

Текстовая кнопка вместо изображения


[woof_slideout image="null" text="Filter Products"]

Использует текстовую кнопку ("Фильтровать товары") вместо изображения в качестве триггера.

Фильтр только для мобильных


[woof_slideout mobile_behavior="1" location="bottom" height="80%"]

Выдвижная панель появляется только на мобильных устройствах, снизу, занимая 80% высоты экрана. Идеально подходит для дизайнов, ориентированных на мобильные устройства.

Автоматическое открытие при загрузке с триггером наведения


[woof_slideout onloadslideout="true" action="hover" speed="200"]

Панель открыта по умолчанию и реагирует на наведение (не на клик). Анимация в течение 200 мс.

Расширенные настройки: собственный контент внутри


[woof_slideout location="right" width="350px"]
  [woof taxonomies="product_cat" sid="slideout-cat"]
[/woof_slideout]

Любой контент, помещенный между открывающим и закрывающим тегами, используется как содержимое выдвижной панели. В этом примере, конкретный [woof] шорткод с фильтрацией по таксономии категорий помещен внутрь выдвижной панели.

Передача атрибутов во внутренний шорткод [woof]


[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]

Атрибуты, которые не относятся к самой выдвижной панели (taxonomies, sid, by_textи т.д.), автоматически передаются во внутренний [woof] шорткод. Это означает, что любой [woof] атрибут работает прозрачно.

Только для десктопа со смещением


[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]

Видима только на десктопе, расположена справа со смещением 200 пикселей от верха, ширина 320 пикселей.

Пример PHP: переопределение шаблона выдвижной панели

Вы можете переопределить шаблон выдвижной панели, поместив файл по адресу:


wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php

Или программно отфильтровать поведение выдвижной панели:


add_filter('woof_slideout_options', function($options) {
    if (is_product_category()) {
        $options['width'] = '100%';
        $options['location'] = 'bottom';
    }
    return $options;
});

Примечания

Расширение выдвижной панели должно быть включено в настройках плагина HUSKY, чтобы шорткод работал.
При использовании изображения в качестве триггера рекомендуемый размер составляет около 50×50 пикселей.
The redirect атрибут, при установке, перенаправит страницу на указанный URL после выбора значений фильтра.
Поддерживается несколько экземпляров выдвижной панели на одной странице — каждый получает уникальный ключ.