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
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
JavaScript:
(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;">×</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);