Двигун спливаючих вікон є дуже гнучким, повністю налаштованим рішенням для відображення спливаючих вікон на вашому веб-сайті на основі Взаємодій.
Спливаюче вікно в Esl – це просто шаблон. Щоб створити наше перше спливаюче вікно, давайте додамо новий шаблон і виберемо новий тип шаблону Спливаюче вікно, як так:
Збережіть новий шаблон, а потім редагуйте його за допомогою Esl.
Ви відразу помітите, що цей шаблон виглядає інакше, ніж інші типи шаблонів Esl.
Вміст спливаючого вікна показується в центрі полотна, є нова група «Налаштування шаблону» під назвою «Спливаюче вікно», і немає «Заповненого вмісту»:
Створення вмісту вашого спливаючого вікна — це той же процес, що й на будь-якій іншій сторінці або шаблоні в Esl: ви просто додаєте елементи, які вам потрібні, на полотно, натиснувши та/або перетягуючи.
Умови спливаючого вікна
Використовуйте умови шаблону всередині двигуна під “Налаштування > Налаштування шаблону > Умови”, щоб вказати Esl, де на вашому веб-сайті має з’являтися це спливаюче вікно.
Ви можете додати стільки спливаючих шаблонів на сторінку, скільки хочете.
Налаштування спливаючого вікна
Специфічні налаштування спливаючого вікна розташовані під “Налаштування > Налаштування шаблону > Спливаюче вікно”.
Перша група керування дозволяє вам стилізувати накладку та вміст спливаючого вікна:
Ви можете глобально стилізувати свої спливаючі вікна через групу керування «Спливаючі вікна» всередині стилів теми.
Взаємодії спливаючого вікна
Далі в панелі налаштувань спливаючого вікна ви знайдете групу управління Взаємодіями.
Це місце, де ви визначаєте тригери для відкриття/закриття спливаючого вікна.
Тригери — це події браузера, такі як «Вміст завантажено», «Прокрутка» (на X пікселів, X % висоти тіла або X vh (висота перегляду)), переміщення миші за межі вікна тощо.
Зазвичай використовуваним тригером є показ спливаючого вікна після завантаження вмісту (наприклад, спливаюче вікно новин, спеціальні пропозиції тощо). Щоб це зробити, налаштуйте взаємодію «Вміст завантажено» так:
ПРИМІТКА: Натискання поза вмістом спливаючого вікна (на накладці) або натискання клавіші ESC закриває спливаюче вікно.
Якщо на саме спливаюче вікно або на будь-який інший елемент на сторінці, який викликає показ спливаючого вікна, не визначено жодних взаємодій, спливаюче вікно залишається прихованим.
Обмеження спливаючого вікна
За замовчуванням спливаюче вікно з’являється щоразу, коли воно викликається внаслідок взаємодії.
Ви також можете встановити обмеження спливаючого вікна в розділі “Налаштування > Налаштування шаблону > Спливаюче вікно > Обмеження спливаючого вікна” під час редагування шаблону спливаючого вікна.
Якщо досягнуто межі, спливаюче вікно більше не відображається.
Існує три типи обмежень спливаючого вікна, і лічильник для кожного збільшується щоразу, коли спливаюче вікно відображається:
| Тип обмеження | Сховище браузера | Опис |
| На завантаження сторінки | window.eslcms_popup_{id}_total |
Скидається після завантаження сторінки |
| На сесію | sessionStorage.eslcms_popup_{id}_total |
Скидається після закриття вкладки |
| Протягом сесій | localStorage.eslcms_popup_{id}_total |
Скидається після видалення |
Події спливаючого вікна та допоміжні функції
Нижче наведено список доступних допоміжних функцій та подій спливаючого вікна (JavaScript) для розробників.
Відкрити або закрити спливаюче вікно через JS
Ви можете використовувати eslOpenPopup і eslClosePopup, щоб програмно відкрити або закрити спливаючі вікна, створені в Esl.
Обидві ці функції приймають ідентифікатор спливаючого вікна (= ідентифікатор шаблону) або вузол елемента спливаючого вікна.
Приклад: Відкрити спливаюче вікно за селектором
// Відкрити спливаюче вікно з ID 3321, якщо існує будь-який елемент з класом .easysite-heading або .my-custom-selectordocument.querySelectorAll('.easysite-heading, .my-custom-selector').forEach( (el) => {el.addEventListener('click', () => {eslOpenPopup(3321)})})Приклад: Відкрити циклічне спливаюче вікно за ID елемента запиту та індексом циклу при завантаженні сторінки
// Відкрити вибране циклічне спливаюче вікно, де ID елемента запиту – vfiqrn, а індекс циклу – 7document.addEventListener('DOMContentLoaded', ()=>{// Якщо ви використовуєте кодовий елемент, встановіть деяку затримку після DOMContentLoaded, щоб забезпечити правильну установку windows.eslIsFrontendsetTimeout( ()=>{const queryId = 'vfiqrn'const targetPopup = document.querySelector(`.eslcms-popup[data-popup-loop="${queryId}"][data-popup-loop-index="7"]`)eslOpenPopup(targetPopup)}, 200)})Слухайте події відкриття або закриття спливаючого вікна
Ви можете виконати свою власну JavaScript-функцію, коли спливаюче вікно відкривається або закривається, через події esl/popup/open або esl/popup/close.
// Слухати подію відкриттяdocument.addEventListener( 'esl/popup/open', (event) => {// Ви можете отримати ідентифікатор спливаючого вікнаconst popupId = event.detail.popupId// Ви можете отримати елемент спливаючого вікна// const popupElement = event.detail.popupElement// Виконайте свої дії тутif (popupId == 3321) {console.log(`3321 спливаюче вікно відкрито`)}})// Слухати подію закриттяdocument.addEventListener( 'esl/popup/close', (event) => {// Ви можете отримати ідентифікатор спливаючого вікнаconst popupId = event.detail.popupId// Ви можете отримати елемент спливаючого вікна// const popupElement = event.detail.popupElement// Виконайте свої дії тутif (popupId == 3321) {console.log(`3321 спливаюче вікно закрито`)}})Приклади налаштування спливаючих вікон
Приклад: Спливаюче вікно всередині циклу запиту
Ви можете також додати спливаюче вікно всередині циклу запиту за допомогою елемента Шаблон. Усередині шаблону спливаючого вікна ви можете використовувати динамічні дані для відображення даних елемента циклу.
Скріншот нижче ілюструє налаштування для кнопки “Швидкий перегляд”, яка показує шаблон спливаючого вікна з кнопкою “Додати до кошика”, коротким описом продукту тощо.
Ми також встановили взаємодію на кнопці всередині циклу запиту, яка показує наш шаблон спливаючого вікна “Швидкий перегляд”, коли на неї натискають.
ЗАМІТКА (для версії Esl < 1.7.1): Елемент шаблону повинен бути розташований як сусід/дитина сусіда (структура макета) елемента взаємодії. В іншому випадку спливаюче вікно не буде викликано. Не ВСТАНОВЛЮЙТЕ взаємодію на сам div циклу запиту.
Приклад: Показати спливаюче вікно, коли миша виходить за межі вікна браузера (намір виходу)
Після того, як ви налаштували шаблон спливаючого вікна та створили макет, перейдіть до “Налаштування > Налаштування шаблону > Спливаюче вікно”, прокрутіть униз до групи Взаємодії та додайте наступну взаємодію:
Приклад: Додати іконку закриття спливаючого вікна (використовуючи взаємодії)
Щоб створити іконку закриття спливаючого вікна, яка активується при натисканні на неї, давайте додамо елемент Іконка до нашого спливаючого вікна. Проте будь-який елемент підходить.
Порада: Коли редагуєте елемент Іконка, встановіть стиль “Курсор” у розділі Стилі > Макет > Різне на “вказівник”. Це надає кращу візуальну підказку, що це інтерактивна іконка.
Відкрийте панель Взаємодії під час редагування елемента Іконка і створіть нову взаємодію типу “Клік”, встановіть ціль на “Спливаюче вікно”, виберіть спливаюче вікно та встановіть “Дію” на “Сховати елемент”.
Якщо ви плануєте використовувати цей значок закриття спливаючого вікна в багатьох місцях, створення глобального елемента закриття спливаючого вікна може бути хорошою ідеєю.
Після збереження цього елемента як Глобального елемента, вам потрібно буде використовувати інший підхід при налаштуванні взаємодії закриття спливаючого вікна, щоб воно могло націлюватися на будь-яке спливаюче вікно. У цьому випадку використайте “CSS селектор” як “Ціль” та встановіть “CSS селектор” на “.eslcms-popup“, ось так:
Приклад: Показати спливаюче вікно до певної дати/часу (використовуючи умови елемента)
Поки шаблонні умови визначають, на яких сторінках з’являється спливаюче вікно, ви можете додатково обмежити спливаюче вікно, визначивши Умови елемента на найзовнішньому елементі спливаючого вікна.
Щоб показати спливаюче вікно тільки до 1 листопада 2022 року, потрібно встановити наступну умову елемента на найзовнішній елемент макету вашого спливаючого вікна:
Якщо ця умова елемента не виконується, тобто досягнуто 1 листопада 2022 року, то HTML спливаючого вікна більше не рендериться. Отже, навіть якщо спливаюче вікно активується через взаємодію, воно не з’явиться, оскільки немає HTML спливаючого вікна для відображення.
AJAX спливаюче вікно
Esl впроваджує AJAX спливаючі вікна в 1.9.4. Основною метою є зменшення розміру DOM та запитів спливаючих вікон, коли вони використовуються в циклах запитів.
Увімкнення отримання контенту через AJAX для спливаючих вікон
При редагуванні шаблону спливаючого вікна просто увімкніть опцію “Отримувати контент через AJAX”. Ви також можете вказати анімацію завантаження AJAX, яка за замовчуванням розташована всередині .eslcms-popup-content спливаючого вікна. Зверніть увагу, що для рендеринга AJAX контекст має важливе значення. Динамічні дані з рядків повторювачів (як ACF або Metabox) не можуть бути відображені, оскільки у них немає унікальних ID, таких як записи, терміни або користувачі.
Нові налаштування контексту взаємодії спливаючих вікон
Ці нові налаштування можна знайти в панелі “Взаємодії”, якщо ваша взаємодія налаштована на показ спливаючого вікна.
За замовчуванням Esl генератор виявляє поточний контекст або об’єкт при відкритті AJAX спливаючого вікна через взаємодію. Це працює незалежно від того, чи ви перебуваєте в циклі запиту, і охоплює різні типи об’єктів, такі як записи, терміни або користувачі.
Чому ці налаштування контексту є необхідними?
Розгляньте можливість створення спливаючого вікна швидкого перегляду продукту з усіма пов’язаними динамічними даними у шаблоні сповіщення. Під час отримання цього шаблону через AJAX важливо повідомити Esl про поточний продукт (контекст). Це забезпечить правильне заповнення всіх динамічних даних. Неправильний тип контексту та ID під час отримання можуть призвести до відсутності або неточних динамічних даних. Пам’ятайте, що не всі дані, що повторюються, можуть бути контекстом у спливаючому вікні AJAX. Наприклад, ви не можете зараз повідомити Esl, що ваш контекст – це повторювач у рядку N поля повторювача.
Коли слід вказувати тип контексту та ID?
У випадках, коли ви знаходитеся всередині циклу запиту, особливо в вкладеному циклі запиту або циклі повторювача користувацьких полів, Esl може не виявити правильний контекст. У таких випадках вам слід вказати Тип контексту (публікація, термін або користувач) та ID контексту (ID публікації, ID терміна або ID користувача). Ви можете використовувати динамічні дані, такі як {post_id}, {term_id}, {mb_related_agent:value}, тощо, щоб задати ці значення.
Події JavaScript спливаючого вікна AJAX (@since 1.9.4)
Нові події JavaScript, додані до спливаючого вікна AJAX:
esl/ajax/popup/start– Викликається перед здійсненням AJAX-виклику спливаючого вікна.esl/ajax/popup/end– Викликається після завершення AJAX-виклику спливаючого вікна.esl/ajax/popup/loaded– Викликається після додавання вмісту AJAX-вікна до DOM.
Ви можете отримати popupId або popupElement, звертаючись до event.details.popupId або event.details.popupElement як зазвичай.
// Слухайте подію завантаження вмісту спливаючого вікна AJAXdocument.addEventListener( 'esl/ajax/popup/loaded', (event) => {// Ви можете отримати ID спливаючого вікнаconst popupId = event.detail.popupId// Ви можете отримати елемент спливаючого вікна// const popupElement = event.detail.popupElement// Зробіть свої справи тутif (popupId == 3321) {console.log(`3321 Вміст спливаючого вікна AJAX завантажено. Ініціалізуйте свій користувацький елемент JS`)}})Приклад: Відкрити спливаюче вікно AJAX з контекстом у JavaScript (@since 1.9.4)
З версії 1.9.4, eslOpenPopup приймає 3 параметри.
object– Або об’єкт елемента спливаючого вікна, або ID спливаючого вікнаtimeout– Цей параметр відповідає за анімацію таймера всередині спливаючого вікна (можна ігнорувати, якщо не потрібно).additionalParams– Використовується спеціально для спливаючих вікон AJAX. Очікуйте властивостей, таких як popupContextId та popupContextType
// Щоб відкрити спливаюче вікно з ID 1190 (вже налаштовано для завантаження контенту через AJAX) з контекстом поста з ID 668:eslOpenPopup(1190,0,{popupContextId: 668,popupContextType: 'post'});// Щоб відкрити спливаюче вікно з ID 2350 (вже налаштовано для завантаження контенту через AJAX) з контекстом терміна з ID 39:eslOpenPopup(2350,0,{popupContextId: 39,popupContextType: 'term'});