Вопрос или проблема
В своей самой простой форме я пытаюсь добавить некоторый javascript на свой сайт WordPress (созданный с помощью Elementor Pro), который откроет ссылку в iframe в стандартной световой коробке Elementor. Мне не нужно изменять существующие виджеты и не нужно создавать свои собственные. Мне просто нужно прикрепить слушатель событий клика к определенному элементу, который выполнит код, необходимый для открытия указанного URL в световой коробке Elementor с указанными свойствами.
Я знаю, что есть бескодовые способы открыть световую коробку по ссылке, и я также осведомлен о том, что это можно сделать, добавив определенную разметку к элементу. В данном случае давайте просто продолжим, не рассматривая ни один из этих вариантов. Таким образом, я полагаю, что мне остается попытаться подключиться к фронтенду Elementor и сделать это оттуда.
На данный момент у меня есть:
jQuery(window).on('elementor/frontend/init', () => {
document.addEventListener('click', function (e) {
if (e.target.closest('#do-lightbox')) {
const url="https://www.google.com";
openLightbox(url);
}
});
const openLightbox = url => {
elementorFrontend.utils.lightbox.showModal({
type: 'iframe',
url: url,
modalOptions: {
id: 'elementor-lightbox-' + Date.now(),
entranceAnimation: 'zoomIn',
exitAnimation: 'zoomOut',
closeButton: true,
},
});
});
Этот скрипт добавляется после всех фронтенд-скриптов Elementor с помощью хука elementor/frontend/after_enqueue_scripts.
Клик по элементу выдает следующую ошибку:
partner-logos-lightbox.js?ver=1731539592:28 Uncaught TypeError: elementorFrontend.utils.lightbox.showModal is not a function
Ввод elementorFrontend.utils.lightbox в консоли показывает, что это выполненное Promise, и, следовательно, у него нет доступного метода showModal. Так что я думаю, что ошибка имеет смысл. Я просто не уверен, как еще получить доступ к световой коробке.
Буду очень признателен за любую помощь.
Ответ или решение
Как открыть встроенный Lightbox Elementor Pro с помощью JavaScript
Если вам необходимо открыть Lightbox, встроенный в Elementor Pro, с помощью JavaScript, следуйте приведенным ниже шагам. Это решение подходит, если вы хотите использовать элементы JavaScript для управления поведением Lightbox без непосредственного изменения существующих виджетов или структуры вашего сайта.
Шаг 1: Подключение скрипта
Первым делом убедитесь, что ваш JavaScript-файл подключается к вашему сайту после загрузки всех скриптов Elementor. Для этого используйте хук elementor/frontend/after_enqueue_scripts. Вот пример того, как это можно сделать:
add_action('elementor/frontend/after_enqueue_scripts', function() {
wp_enqueue_script('my-custom-lightbox-script', get_template_directory_uri() . '/js/my-lightbox-script.js', ['jquery'], null, true);
});Шаг 2: Создание JavaScript кода
Теперь мы можем перейти к созданию JavaScript кода, который будет вызывать Lightbox при клике на определенный элемент. Событие клика будет отслеживаться, и при его срабатывании будет открываться нужный URL в Lightbox. Вот пример кода:
jQuery(window).on('elementor/frontend/init', function() {
document.addEventListener('click', function(e) {
if (e.target.closest('#do-lightbox')) {
const url = "https://www.google.com";
openLightbox(url);
}
});
const openLightbox = (url) => {
// Убедитесь, что элементор фронтэнд загружен и Lightbox доступен
const lightbox = elementorFrontend.utils.lightbox;
if (lightbox && typeof lightbox.showModal === 'function') {
lightbox.showModal({
type: 'iframe',
url: url,
modalOptions: {
id: 'elementor-lightbox-' + Date.now(),
entranceAnimation: 'zoomIn',
exitAnimation: 'zoomOut',
closeButton: true,
},
});
} else {
console.error('Lightbox не доступен');
}
};
});Объяснение ключевых моментов:
- Слушатель событий: Мы добавляем слушатель для события клика и проверяем, был ли клик на элементе с ID
do-lightbox. - Функция openLightbox: В этой функции мы проверяем, доступен ли объект Lightbox и существует ли метод
showModal. Это важно, так как ошибка в вашем коде связана с тем, что метод был недоступен — возможно, вы обращались к нему до полной загрузки скриптов. - Вызов Lightbox: Мы создаем объект с параметрами, описывающими, как должен отображаться Lightbox (тип, URL, анимация и кнопка закрытия).
Шаг 3: Отладка и тестирование
После того, как вы добавили код, проверьте консоль браузера на предмет ошибок и убедитесь, что Lightbox открывается как ожидается. Если у вас по-прежнему возникают проблемы, проверьте, загружается ли объект elementorFrontend и доступен ли lightbox в нужный момент времени.
Заключение
Следуя данным шагам, вы сможете успешно интегрировать вызов Lightbox Elementor Pro с помощью JavaScript, не изменяя структуру существующих виджетов. Убедитесь, что всё загружается корректно, проверяя наличие ошибок в консоли, и отладьте скрипт по мере необходимости. Если возникнут сложности, не стесняйтесь обращаться за дополнительной помощью.