Ajax загрузка шорткодов в wordpress

Поделитесь опытом как правильно вызывать шорткоды сгенерированные плагинами,темой в Wordpress.

Зачем нужно: Имею Wordpress + плагин elementor + JupiterX тему. В elementor можно создавать шаблоны блоков/секций и получать их шорткод для вызова. Пример шорткода [elementor-template id="1824"]. По клику на кнопку хочу вызывать AJAX нужную секцию (секция содержит слайдеры, табы, посты) и вставить ее в тело страницы.

Читал кодекс wordpress https://codex.wordpress.org/AJAX_in_Plugins

Но до меня не дошло, как применить это здесь. Есть ли у кого-то подобный опыт? Можете ли выложить примеры кода с комментариями?

Как я пытался вызвать шорт код AJAX.

HTML

[SCode_ajax_footer]

PHP

<?php
/**
 * Plugin Name: Ajax Shortcode
 * Description: 
 * Plugin URI:  
 * Version:     16.02.2020
 * Author:      
 * Author URI:  
 * License:     GPLv3
 */


add_action('plugins_loaded',  'plugin_setup');


/**
* Plugin URL
*/
define('SRT_AJAX_SHORT_URL', plugin_dir_url(__FILE__));
$plugin_url = SRT_AJAX_SHORT_URL;



    /**
     * Regular plugin work
     */
    function plugin_setup()
    {

        #SCode_ajax_footer
        add_shortcode( 'SCode_ajax_footer', 'SCode_ajax_footer' );
        #ajax_srt_footer
        add_action( 'wp_ajax_ajax_footer','ajax_footer' );
        add_action( 'wp_ajax_nopriv_ajax_footer', 'ajax_footer' );    

    }



    /**
     * ACTION Enqueue scripts
     */
     function enqueue() 
    {
        # jQuery will be loaded as a dependency
        ## DO NOT use other version than the one bundled with WP
        ### Things will BREAK if you do so
        wp_enqueue_script( 
             'ajax-ft',
             SRT_AJAX_SHORT_URL."ajax.js",
             array( 'jquery' )
        );
        # Here we send PHP values to JS
        wp_localize_script( 
             'ajax-ft',
             'wp_ajax',
             array( 
                 'ajaxurl'      => admin_url( 'admin-ajax.php' ),
                 'ajaxnonce'   => wp_create_nonce( 'ajax_post_validation' )
            ) 
        );
    }


    /**
     * SHORTCODE AJAX Footer
     */
    function SCode_ajax_footer(  ) 
    {
       $output = '<div id="srtAjaxFooter"></div> ';
        return $output;
    }

    /**
     * AJAX query About block
     */
    function ajax_footer()
    {
        echo do_shortcode('[elementor-template id="16"]');
    }

JS

/* 
 * @plugin Ajax Shortcode
 */

jQuery( document ).ready( function( $ ) 
{ 

    $(window).load(function(e) {
        /*
        *callBack wpAjaxShortcode
        *@param shorcodeName, containerId
        *@return 
        */
        function ajaxCallBackShortcode(shorcodeName, containerId) {
            $.post( 
                wp_ajax.ajaxurl, 
                {action: shorcodeName},                   
                function( response )
                {
                    // ERROR HANDLING
                    if( !response.success )
                    {
                        // No data came back, maybe a security error
                        if( !response.data )
                            $( containerId ).html( 'AJAX ERROR: no response' );
                        else
                            $( containerId).html( response.data.error );
                    }
                    else
                        $( containerId).html( response.data );
                }
            ); // end post
        }

       let shorcodeName, containerId;


        //callBack Footer
        ajaxCallBackShortcode(shorcodeName = 'ajax_footer', containerId = '#srtAjaxFooter');
    }); // end click
});

По сути он шорткод не вызывает. Сам шорткод сгенерирован темой.

Если я напишу свой плагин.

И перепишу Функцию

PHP

  /**
     * AJAX query About block
     * Check for security and send proper responses back
     */
    function ajax_footer()
    {
        $footer= '<div>Это код футера</div>';
        wp_send_json_success( $footer);
    }

То такая функция, отработает конечно же. И вставит на фронтенде

<div>Это код футера</div>

Подскажите, что делаю неправильно. Как вызвать на фронтенд шорткод сгенерированный темой ? [elementor-template id="16"]


Ответы (1 шт):

Автор решения: KAGG Design
function ajax_footer() {
    wp_send_json_success( do_shortcode( '[elementor-template id="16"]' ) );
} 
→ Ссылка