Insert a template to Elementor editor programmatically

[ionut442]

Hi,

I have a quick question (I posted this on multiple forums but I couldn't get an answer): can anyone please tell me how can I actually insert a template into the Elementor editor?
I have an addon that will add some templates to Elementor. With some JS code, I can access and import the templates but I don't know how to insert them into the page.

Thank you!

This is part of the code that I have

(function($) {
    $(window).on('elementor/frontend/init', function() {
        $('body').on('click', '#custom-button', function() {
            showPopupAndHidePanel();
        });

        function showPopupAndHidePanel() {
            if ($('#custom-popup').length === 0) {
                var popupContent = '<div id="custom-popup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">' +
                    '<div style="background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 10000;">' +
                    '<div id="close-button" style="cursor: pointer; position: absolute; top: 10px; right: 10px; font-size: 20px;">&times;</div>' +
                    '<div id="gallery-container"><div class="image-grid"><a href="#" id="sphere-link">Sphere 1</a></div></div>' +
                    '</div>' +
                    '</div>';
                $('body').append(popupContent);

                $('#close-button').on('click', function() {
                    $('#custom-popup').remove();
                });

                $('#sphere-link').on('click', function(e) {
                    e.preventDefault();
                    importAndInsertTemplate('Sphere_1.json');
                });
            }
        }

        function importAndInsertTemplate(templateName) {
            $.ajax({
                url: ajax_object.ajaxurl,
                type: 'POST',
                data: {
                    action: 'eai_import_template',
                    template_name: templateName
                },
                success: function(response) {
                    if (response.success) {
                        alert('Template Imported Successfully');
                    } else {
                        alert('Failed to import template. Please try again.');
                    }
                },
                error: function() {
                    alert('Failed to import template. Please try again.');
                }
            });
        }

        setTimeout(function() {
            var addButton = '<div id="custom-button" class="elementor-add-section-area-button" style="background-color: #0073e6; color: white; border-radius: 50%; text-align: center; padding: 0; display: flex; justify-content: center; align-items: center; font-family: sans-serif;">EAI</div>';
            var addTemplateButton = $('.elementor-add-template-button');
            if (addTemplateButton.length > 0) {
                addTemplateButton.after(addButton);
            }
        }, 1000);
    });
})(jQuery);

 

[sirvav_com]

Hi,

I have a quick question (I posted this on multiple forums but I couldn't get an answer): can anyone please tell me how can I actually insert a template into the Elementor editor?
I have an addon that will add some templates to Elementor. With some JS code, I can access and import the templates but I don't know how to insert them into the page.

Thank you!

This is part of the code that I have

(function($) {
    $(window).on('elementor/frontend/init', function() {
        $('body').on('click', '#custom-button', function() {
            showPopupAndHidePanel();
        });

        function showPopupAndHidePanel() {
            if ($('#custom-popup').length === 0) {
                var popupContent = '<div id="custom-popup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">' +
                    '<div style="background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 10000;">' +
                    '<div id="close-button" style="cursor: pointer; position: absolute; top: 10px; right: 10px; font-size: 20px;">&times;</div>' +
                    '<div id="gallery-container"><div class="image-grid"><a href="#" id="sphere-link">Sphere 1</a></div></div>' +
                    '</div>' +
                    '</div>';
                $('body').append(popupContent);

                $('#close-button').on('click', function() {
                    $('#custom-popup').remove();
                });

                $('#sphere-link').on('click', function(e) {
                    e.preventDefault();
                    importAndInsertTemplate('Sphere_1.json');
                });
            }
        }

        function importAndInsertTemplate(templateName) {
            $.ajax({
                url: ajax_object.ajaxurl,
                type: 'POST',
                data: {
                    action: 'eai_import_template',
                    template_name: templateName
                },
                success: function(response) {
                    if (response.success) {
                        alert('Template Imported Successfully');
                    } else {
                        alert('Failed to import template. Please try again.');
                    }
                },
                error: function() {
                    alert('Failed to import template. Please try again.');
                }
            });
        }

        setTimeout(function() {
            var addButton = '<div id="custom-button" class="elementor-add-section-area-button" style="background-color: #0073e6; color: white; border-radius: 50%; text-align: center; padding: 0; display: flex; justify-content: center; align-items: center; font-family: sans-serif;">EAI</div>';
            var addTemplateButton = $('.elementor-add-template-button');
            if (addTemplateButton.length > 0) {
                addTemplateButton.after(addButton);
            }
        }, 1000);
    });
})(jQuery);

Hello,
You need to add your codes to elementor, like elementor elements ?
Slider, Product boxed etc ?