Предварительный просмотр Elementor для пользовательских (неэлементарных) виджетов / компонентов - PullRequest
Новая
       30

Предварительный просмотр Elementor для пользовательских (неэлементарных) виджетов / компонентов

1 голос
/ 16 июня 2020

У меня есть тема с заголовком. Этот заголовок не является виджетом Elementor, а просто обычным компонентом HTML / PHP. Как и виджет Elementor, у него есть некоторые свойства, например, прозрачный, наложенный ...

Я добавил эти свойства в раздел настроек страницы Elementor с помощью хука: 

add_action('elementor/element/wp-page/document_settings/before_section_start', 'page_settings' );

function page_settings($controlStack){
    $controlStack->start_controls_section(
            'page_settings',
            [
                'label' => _x('Page Settings', 'elementor', 'theme'),
                'tab' => \Elementor\Controls_Manager::TAB_SETTINGS,
            ]
        );

        $controlStack->add_control(
            'header_overlayed',
            [
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label' => _x('Header Overlayed', 'elementor', 'theme'),
                'label_on' => __('True', 'theme'),
                'label_off' => __('False', 'theme'),
                'return_value' => true,
                'default' => false,
            ]
        );

        $controlStack->add_control(
            'header_transparent',
            [
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label' => _x('Header Transparent', 'elementor', 'theme'),
                'label_on' => __('True', 'theme'),
                'label_off' => __('False', 'theme'),
                'return_value' => true,
                'default' => false,
            ]
        );

        $controlStack->end_controls_section();
}

Теперь проблема в что я хочу видеть изменения в предварительном просмотре Elementor, когда я изменяю какие-либо настройки.

Я попытался подключиться к elementor/editor/after_enqueue_scripts (любым другим хукам), чтобы выполнить пользовательский JS и имитировать предварительный просмотр. К сожалению, мне не повезло.

JavaScript код выглядел примерно так: 

var headerTransparency = function( newValue ){
        if( newValue == 'true' ){
            $('.header').addClass('header--transparent');
        }else{
            $('.header').removeClass('header--transparent');
        }
    }
elementor.settings.page.addChangeCallback( 'header_transparent', headerTransparency );

Есть ли способ это сделать?

1 Ответ

0 голосов
/ 18 июня 2020

Поскольку вы просто меняете стиль, вы также можете использовать параметр selectors. 

$controlStack->add_control(
    'header_overlayed',
    [
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label' => _x('Header Overlayed', 'elementor', 'theme'),
        'label_on' => __('True', 'theme'),
        'label_off' => __('False', 'theme'),
        'return_value' => true,
        'default' => false,
        'selectors' => [
            '{{WRAPPER}} .your-target-selector' => 'background-color: #f00 !important;' //{{VALUE}} for the field value
        ],
    ]
);

Но ваш метод JS также возможен. Думаю, ваша ошибка в том, что ваш хук не срабатывает из-за пропущенного события. Это должно быть содержимое вашего js файла: 

jQuery(document).ready(function(){
    elementor.settings.page.addChangeCallback( 'header_transparent', headerTransparency );
});

function headerTransparency ( newValue ) {
    if( newValue == 'true' ){
        jQuery('.header').addClass('header--transparent');
    }else{
        jQuery('.header').removeClass('header--transparent');
    }
}

В случае, если у вас могут быть ошибки с вашими инъекциями - вы можете внедрить скрипты / стили, например: 

add_action('elementor/editor/before_enqueue_scripts', function() {
    wp_enqueue_script( 'js-test-inject', get_template_directory_uri() . '/assets/js/test-inject.js', array( 'jquery' ), null, true );
}, 10, 3);

Я протестировал ваш сценарий на своем сайте, у меня он работает;)

...