Пользовательские элементы управления Elementor не отображаются на вкладке Advanced виджета при использовании инъекционных хуков.

Вопрос или проблема

Ниже представлен мой крайне простой код плагина. Я пытаюсь подключиться к вкладке “Дополнительно” каждого виджета Elementor, чтобы отобразить параметры конфигурации моего плагина. Плагин показывает/скрывает виджеты на фронт-энде в зависимости от значения параметра URL. На вкладке “Дополнительно” любого виджета должна быть секция “Условная видимость” с моими опциями ниже, но как бы я ни старался, я не могу заставить это работать.

Чего мне здесь не хватает? Я проверил документацию Elementor и, очевидно, упускаю что-то важное.

<?php
/**
 * Название плагина: Elementor Conditional Visibility
 * Описание: Расширяет Elementor, добавляя функциональность условной видимости ко всем виджетам.
 * Версия: 1.0.0
 * Текстовый домен: elementor-conditional-visibility
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Выход, если доступ осуществляется напрямую.
}

/**
 * Внедрение наших пользовательских контролов на вкладку "Дополнительно" всех виджетов.
 *
 * Документация по хукам для моей справки: https://developers.elementor.com/docs/hooks/injecting-controls/
 */
add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
    // Убедимся, что мы внедряем сразу после 'section_attributes' на вкладке "Дополнительно".
    if ( 'section_attributes' !== $section_id ) {
        return;
    }

    $element->start_controls_section(
        'ecv_conditional_visibility_section',
        [
            'tab'   => \Elementor\Controls_Manager::TAB_ADVANCED,
            'label' => __( 'Условная видимость', 'elementor-conditional-visibility' ),
        ]
    );

    // Имя параметра URL
    $element->add_control(
        'ecv_url_param_name',
        [
            'label'       => __( 'Имя параметра URL', 'elementor-conditional-visibility' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => __( 'например, promo', 'elementor-conditional-visibility' ),
            'description' => __( 'Укажите параметр запроса для проверки, например "promo" в ?promo=summer.', 'elementor-conditional-visibility' ),
        ]
    );

    // Значение параметра URL
    $element->add_control(
        'ecv_url_param_value',
        [
            'label'       => __( 'Значение параметра URL', 'elementor-conditional-visibility' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => __( 'например, summer', 'elementor-conditional-visibility' ),
            'description' => __( 'Виджет будет совпадать с этим значением. Оставьте пустым, если должно совпадать любое значение.', 'elementor-conditional-visibility' ),
        ]
    );

    // Если параметр совпадает
    $element->add_control(
        'ecv_action_on_match',
        [
            'label'       => __( 'Если параметр совпадает', 'elementor-conditional-visibility' ),
            'type'        => \Elementor\Controls_Manager::SELECT,
            'default'     => 'показать',
            'label_block' => true,
            'options'     => [
                'показать' => __( 'Показать', 'elementor-conditional-visibility' ),
                'скрыть' => __( 'Скрыть', 'elementor-conditional-visibility' ),
            ],
        ]
    );

    // Если параметр не предоставлен или не совпадает
    $element->add_control(
        'ecv_action_on_not_match',
        [
            'label'       => __( 'Если параметр не предоставлен или не совпадает', 'elementor-conditional-visibility' ),
            'type'        => \Elementor\Controls_Manager::SELECT,
            'default'     => 'показать',
            'label_block' => true,
            'options'     => [
                'показать' => __( 'Показать', 'elementor-conditional-visibility' ),
                'скрыть' => __( 'Скрыть', 'elementor-conditional-visibility' ),
            ],
        ]
    );

    $element->end_controls_section();
}

/**
 * Решение, отобразить ли виджет на основе пользовательских настроек условной видимости.
 *
 * Также можно использовать хук 'elementor/widget/before_render_content', если предпочитаете.
 */
add_action( 'elementor/frontend/widget/before_render', 'ecv_apply_conditional_visibility' );
function ecv_apply_conditional_visibility( $widget ) {
    $settings = $widget->get_settings_for_display();

    $param_name   = isset( $settings['ecv_url_param_name'] ) ? trim( $settings['ecv_url_param_name'] ) : '';
    $param_value  = isset( $settings['ecv_url_param_value'] ) ? trim( $settings['ecv_url_param_value'] ) : '';
    $action_match = isset( $settings['ecv_action_on_match'] ) ? $settings['ecv_action_on_match'] : 'показать';
    $action_no    = isset( $settings['ecv_action_on_not_match'] ) ? $settings['ecv_action_on_not_match'] : 'показать';

    // Если нет имени параметра, ничего не делаем.
    if ( ! $param_name ) {
        return;
    }

    // Получить текущее значение в URL (?param_name=...).
    $current_value = isset( $_GET[ $param_name ] ) ? sanitize_text_field( $_GET[ $param_name ] ) : '';

    // Определяем, является ли это "совпадением".
    $has_match = false;
    if ( $current_value !== '' ) {
        // Если 'значение для совпадения' пустое, любое непустое значение URL считается совпадением.
        if ( '' === $param_value ) {
            $has_match = true;
        } else {
            $has_match = ( $current_value === $param_value );
        }
    }

    // Логика скрытия/отображения.
    if ( $has_match ) {
        // Параметр совпадает.
        if ( 'скрыть' === $action_match ) {
            $widget->set_settings( '_render_widget', false );
        }
    } else {
        // Параметр отсутствует или не совпадает.
        if ( 'скрыть' === $action_no ) {
            $widget->set_settings( '_render_widget', false );
        }
    }
}

Ответ или решение

Основываясь на вашей проблеме с отображением настроек кастомного элемента управления в разделе "Дополнительно" виджета Elementor, давайте рассмотрим возможные причины и шаги для их устранения.

Теория

Ваше намерение состоит в том, чтобы добавить кастомные элементы управления к каждой секции "Дополнительно" в Elementor с использованием хуков, тем самым предоставив возможность управлять видимостью виджетов на основе URL-параметров. В теории, это должно быть реализовано путем использования хука elementor/element/common/section_attributes/before_section_end, который позволяет путем инъекции добавить секцию с элементами управления. Однако, когда настройки не появляются, это может свидетельствовать о проблемах, связанных с самим отображением элементов управления, неправильным идентификатором секции, или порядком загрузки скриптов.

Пример

Ваш текущий код использует хук, чтобы вставить кастомные элементы управления в секцию section_attributes вкладки "Дополнительно". Пример кода:

add_action( 'elementor/element/common/section_attributes/before_section_end', 'ecv_add_conditional_visibility_controls', 10, 3 );
function ecv_add_conditional_visibility_controls( $element, $section_id, $args ) {
    if ( 'section_attributes' !== $section_id ) {
        return;
    }
    $element->start_controls_section(
        'ecv_conditional_visibility_section',
        [
            'tab'   => \Elementor\Controls_Manager::TAB_ADVANCED,
            'label' => __( 'Conditional Visibility', 'elementor-conditional-visibility' ),
        ]
    );
    // Добавление поля "URL Parameter Name"
    $element->add_control(
        'ecv_url_param_name',
        [
            'label'       => __( 'URL Parameter Name', 'elementor-conditional-visibility' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => __( 'e.g. promo', 'elementor-conditional-visibility' ),
        ]
    );

    // Здесь могут быть добавлены дополнительные параметры управления...
    $element->end_controls_section();
}

Применение

Проверка на правильность хука и идентификатора секции

  1. Правильность идентификатора секции: Убедитесь, что вы используете корректный идентификатор секции. Проверьте на наличие опечаток и соответствие документации Elementor. В вашем случае идентификатор section_attributes должен совпадать с фактическим идентификатором секции в Elementor. Проверьте последние версии документации, так как изменения могут быть внесены разработчиками Elementor.

  2. Хук и его параметры: Убедитесь, что хук elementor/element/common/section_attributes/before_section_end правильно используется и поддерживается вашей версией Elementor. Проверьте, соответствуют ли передаваемые параметры хуку: $element, $section_id, $args.

Очистка кеша и проверки JavaScript

  1. Очистка кеша: Иногда изменения не отображаются из-за кеширования в браузере или на уровне сайта. Очистите кеш вашего браузера, а также проверьте наличие плагинов кеширования на вашем сайте и временно отключите их, чтобы убедиться, что они не мешают обновлению настроек.

  2. Проблемы с JavaScript: Ошибка в загрузке или конфликт с другими JavaScript-файлами может препятствовать отображению кастомных настроек. Откройте консоль разработчика вашего браузера (обычно доступно через F12) и проверьте наличие ошибок. Если какие-то ошибки связаны с Elementor или приведенным вами кодом, попробуйте их исправить.

Обновление и совместимость версии

  1. Совместимость версии и плагинов: Убедитесь, что у вас установлены актуальная версия Elementor и все используемые плагины. Если ваш код работает с более старой версией Elementor, также возможно, что изменения в API плагина повлияли на поведение вашего кода.

  2. Конфликт с другими плагинами: Временно отключите другие плагины, которые могут влиять на элементы управления в Elementor, чтобы исключить конфликты.

Альтернативные рекомендации

  1. Другие хуки: Если текущий хук по каким-то причинам не работает, попробуйте использовать другие хуки, такие как elementor/element/common/before_section_start или elementor/element/common/after_section_end, чтобы понять, могут ли они решить проблему.

Таким образом, основой для исправления вашей проблемы должна стать проверка правильности используемого хука, идентификатора секции и совместимости версии Elementor. Надеюсь, эти шаги помогут разрешить ваше затруднение, и ваша кастомная секция будет успешно отображаться в разделе "Дополнительно" виджета Elementor.

Оцените материал
Добавить комментарий

Капча загружается...