woof_slideout
woof_slideout
Шорткод [woof_slideout] создает выдвижную панель фильтров, которая появляется с края экрана. Это решение, экономящее место, которое скрывает фильтр до тех пор, пока он не понадобится пользователю — идеально подходит для мобильных устройств, страниц архивов товаров или любого макета, где пространство экрана ограничено.
Выдвижная панель поддерживает как графические, так и текстовые триггеры, настраиваемую анимацию, поведение, специфичное для мобильных устройств, и передает все неизвестные атрибуты внутреннему шорткоду [woof].
Attributes
| Attribute | Default | Description |
|---|---|---|
image | Иконка плагина по умолчанию | URL изображения-триггера. Установите значение null, чтобы использовать текстовую кнопку вместо изображения. |
image_h | 50 | Высота изображения-триггера в пикселях |
image_w | 50 | Ширина изображения-триггера в пикселях |
action | click | Действие триггера: click или hover |
location | right | Позиция выдвижения: left, right, top или bottom |
speed | 100 | Скорость анимации в миллисекундах |
offset | 100px | Отступ сверху (для расположения слева/справа) или слева (для расположения сверху/снизу). Поддерживает px, %, em и т.д. |
onloadslideout | true | Должна ли панель быть открыта при загрузке страницы (true или false) |
mobile_behavior | 0 | Управление видимостью: 0 = показывать на всех устройствах, 1 = показывать только на мобильных, 2 = показывать только на настольных |
width | auto | Ширина панели (напр., 350px, 30%, auto) |
height | auto | Высота панели (напр., 500px, auto) |
text | Filter | Текст кнопки, отображаемый, когда image установлено в null. Также используется как метка для ручки. |
class | '' | Дополнительный CSS класс для контейнера выдвижной панели |
redirect | '' | URL перенаправления после применения фильтра |
Basic Usage
[woof_slideout]
Отображает выдвижную панель фильтров с правой стороны с настройками по умолчанию. Панель содержит стандартный фильтр [woof].
Slide-out from the Left
[woof_slideout location="left" speed="300" width="400px"]
Выдвигается с левой стороны с анимацией 300 мс и шириной панели 400px.
Text Button Instead of Image
[woof_slideout image="null" text="Filter Products"]
Использует текстовую кнопку («Filter Products») вместо изображения в качестве ручки-триггера.
Mobile-Only Filter
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Выдвижная панель появляется только на мобильных устройствах, снизу, занимая 80% высоты экрана. Идеально подходит для дизайнов, ориентированных на мобильные устройства.
Auto-Open on Load with Hover Trigger
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Панель открыта по умолчанию и реагирует на наведение (а не на клик). Анимируется за 200 мс.
Advanced: Custom Content Inside
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Любое содержимое, размещенное между открывающим и закрывающим тегами, используется в качестве содержимого выдвижной панели. В этом примере внутри выдвижной панели размещен конкретный шорткод [woof] с фильтрацией по таксономии категорий.
Passing Attributes to the Inner [woof] Shortcode
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Атрибуты, которые не являются частью самой выдвижной панели (taxonomies, sid, by_text и т.д.), автоматически перенаправляются внутреннему шорткоду [woof]. Это означает, что любой атрибут [woof] работает прозрачно.
Desktop-Only with Offset
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Видно только на настольных компьютерах, расположено справа с отступом 200px сверху, шириной 320px.
PHP Example: Override the Slideout Template
Вы можете переопределить шаблон выдвижной панели, разместив файл по адресу:
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;
});
Notes
- Расширение выдвижной панели должно быть включено в настройках плагина HUSKY, чтобы шорткод работал.
- При использовании изображения в качестве триггера рекомендуемый размер составляет около 50×50 пикселей.
- Атрибут
redirect, если установлен, перенаправит страницу на указанный URL после выбора значений фильтра. - Поддерживается несколько экземпляров выдвижной панели на одной странице — каждый получает уникальный ключ.