Как в Elementor закрывать Off‑Canvas и одновременно открывать попап

При использовании виджета Off‑Canvas в Elementor часто нужно сделать кнопку внутри выезжающего меню, которая:

• закрывает Off‑Canvas,
• и сразу открывает попап (форма обратного звонка и т.п.).

По умолчанию, если просто повесить на кнопку триггер попапа, окно Off‑Canvas остаётся открытым сверху, и попап оказывается «под» ним. Ниже — универсальное решение, которое можно повторить на любом сайте.

1. Настраиваем кнопку внутри Off‑Canvas

1. Откройте в Elementor шаблон шапки или страницы, где используется виджет Off‑Canvas.
2. Внутри Off‑Canvas добавьте кнопку, которая должна открывать попап (например, «Заказать звонок»).
3. Выделите кнопку и во вкладке Содержимое → Ссылка → Динамические теги выберите нужный попап и режим Open Popup. Так кнопка начнёт открывать попап штатными средствами Elementor.
4. Во вкладке Дополнительно → CSS ID задайте кнопке ID, например: canvas_call

2. Находим ссылку, которая закрывает Off‑Canvas

У виджета Off‑Canvas есть своя «системная» ссылка закрытия вида:

<a class="elementor-icon"
   href="#elementor-action%3Aaction%3Doff_canvas%3Aclose%26settings%3D..."
   aria-controls="off-canvas-XXXX"
   aria-expanded="true">
    <i class="fas fa-times"></i>
</a>

Именно по этой ссылке Elementor понимает, что нужно закрыть Off‑Canvas.
Нам нужна только её часть href="#elementor-action%3Aaction%3Doff_canvas%3Aclose...".

Универсальный селектор для такой ссылки:

a[href*="#elementor-action%3Aaction%3Doff_canvas%3Aclose"]

3. JS‑код: закрываем Off‑Canvas, попап остаётся на динамическом теге

Дальше добавим небольшой JS, который при клике по нашей кнопке:

• программно нажмёт на ссылку закрытия Off‑Canvas;
• не будет мешать штатному открытию попапа через динамический тег.

Вариант через functions.php (универсальный)

Добавьте в functions.php вашей темы или в отдельный плагин сниппетов:

add_action( 'wp_footer', function() {
    ?>
    <script>
    jQuery(function($) {
      $(document).on('click', '#canvas_call', function(e) {
        // Не отменяем клик целиком, чтобы сработал динамический тег попапа

        // Закрываем Off-Canvas, «нажимая» на его стандартную ссылку закрытия
        $('a[href*="#elementor-action%3Aaction%3Doff_canvas%3Aclose"]').trigger('click');
        // После этого Elementor сам откроет попап по динамическому тегу на кнопке
      });
    });
    </script>
    <?php
});

Что здесь важно:

• #canvas_call — ID кнопки внутри Off‑Canvas (можно заменить на свой, если используете другое имя).
• Селектор a[href*="#elementor-action%3Aaction%3Doff_canvas%3Aclose"] ищет «родную» ссылку закрытия Off‑Canvas и вызывает по ней клик.
• e.preventDefault() намеренно закомментирован, чтобы не блокировать стандартное действие кнопки (открытие попапа через Dynamic Tag).

4. Как повторить на любом сайте

Чтобы воспроизвести решение на другом проекте:

1. Off‑Canvas:
   • Используйте виджет Off‑Canvas от Elementor;
   • убедитесь, что у него есть ссылка закрытия с href вида #elementor-action:action=off_canvas:close....
2. Кнопка в Off‑Canvas:
   • Добавьте кнопку;
   • назначьте ей Dynamic Tag → Popup → Open Popup с нужным попапом;
   • задайте ей уникальный CSS ID, например canvas_call.
3. JS‑код:
   • Вставьте приведённый выше код в functions.php или в модуль сниппетов (Code Snippets, WPCode и т.п.);
   • при необходимости измените:
     • #canvas_call — на ваш ID кнопки;
     • селектор ссылки закрытия Off‑Canvas — если у вашего виджета другое значение href (можно задать ссылке закрытия класс, например offcanvas-close, и в JS заменить строку на $('.offcanvas-close').trigger('click');).

После этого при клике по кнопке:

• сначала закрывается Off‑Canvas,
• затем, штатно, открывается попап, заданный в Dynamic Tag’е Elementor.

Такой подход не жёстко привязан к конкретной теме или плагину — достаточно поймать ссылку закрытия Off‑Canvas и ID кнопки, поэтому его удобно переносить между проектами и оформлять как сниппет.