How load WPBakery content by AJAX?

Question

I am facing an issue with dynamically loading content created with WPBakery via AJAX on my website. When I attempt to load the content, it appears unstyled and seems to be missing the necessary scripts and styles for proper rendering.

Here’s a brief overview of the problem:

I have a product page where I want to load the detailed description (created with WPBakery) dynamically via AJAX when a user clicks a "Load More" button. After the AJAX call, the content loads, but it appears unstyled and raw, showing WPBakery shortcodes.

You can see the issue in action here:

I’ve tried various methods to enqueue WPBakery scripts and styles during the AJAX call, but none seem to work. I’ve also referred to some online discussions and tried their solutions, but the problem persists.

Could you please guide me on how to properly load WPBakery content via AJAX while ensuring it’s correctly rendered and styled?

My plugin:

load-more-content.php:

php

<?php
/*
Plugin Name: Load More Content
Description: Ukrywa zawartość produktu i pokazuje ją po kliknięciu w przycisk "Wczytaj Więcej".
Version: 1.0
Author: Twoje Imię
*/

function load_more_content_scripts() {
    if (is_product() && get_the_ID() == 9020577) {
        wp_enqueue_script('load-more-content-js', plugin_dir_url(__FILE__) . 'load-more-content.js', array('jquery'), '1.0', true);
        wp_enqueue_style('load-more-content-css', plugin_dir_url(__FILE__) . 'load-more-content.css');
        
        // Lokalizacja skryptu
        wp_localize_script('load-more-content-js', 'load_more_content', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'post_id' => get_the_ID()
        ));
    }
}
add_action('wp_enqueue_scripts', 'load_more_content_scripts');

function add_load_more_button() {
    if (is_product() && get_the_ID() == 9020577) {
        echo '<button id="loadMoreBtn">Wczytaj Więcej</button>';
    }
}
add_action('woocommerce_before_single_product', 'add_load_more_button');

function load_product_description() {
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    if ($post_id) {
        $product = wc_get_product($post_id);
        if ($product) {
            $description = $product->get_description();
            echo apply_filters('the_content', $description);
        }
    }
    die();
}

// Dodajemy akcję, aby załączyć skrypty i style WPBakery
add_action('wp_enqueue_scripts', 'enqueue_visual_composer_styles_scripts');
function enqueue_visual_composer_styles_scripts() {
    if (function_exists('wpb_map') && method_exists('WPBMap', 'addAllMappedShortcodes')) {
        WPBMap::addAllMappedShortcodes();
    }
    
    if (wp_script_is('wpb_composer_front_js', 'registered')) {
        wp_enqueue_script('wpb_composer_front_js');
    }

    if (wp_style_is('js_composer_front', 'registered')) {
        wp_enqueue_style('js_composer_front');
    }
}

add_action('wp_ajax_load_product_description', 'load_product_description');
add_action('wp_ajax_nopriv_load_product_description', 'load_product_description');

// Usuń długi opis produktu z pierwotnego ładowania strony
function remove_product_description($content) {
    if (is_product() && get_the_ID() == 9020577 && !defined('DOING_AJAX')) {
        return ''; // Usuń treść
    }
    return $content;
}
add_filter('the_content', 'remove_product_description');
?>

load-more-content.js: javascript

jQuery(document).ready(function($) {
    $('#loadMoreBtn').on('click', function() {
        $.ajax({
            url: load_more_content.ajax_url,
            type: 'POST',
            data: {
                action: 'load_product_description',
                post_id: load_more_content.post_id
            },
            success: function(response) {
                $('.woocommerce.page-container').html(response);
                $('#loadMoreBtn').hide();
            }
        });
    });
});

Answer 1

Solved:

The page builder content can be loaded via ajax using WPBMap::addAllMappedShortcodes(); prior to content output. However please note that not all elements might render correctly via ajax.