Загальна інформація
Залежно від налаштувань, віджет може бути вставлений або у вигляді форми прямо в тілі сторінки, або у вигляді попап-вікна. відкривається при натисканні на кнопку.
кастомізація віджета
Будь-віджет з TimePad можна індивідуально налаштувати і змінити йому як зовнішній вигляд, так і поведінку. Найчастіше, особливо в складних випадках, це роблять співробітники TimePad. Але ви і самі можете багато чого змінити у себе на сайті.
Кастомізація на стороні TimePad
Набори налаштувань, шаблонів, стилів і кодів віджета на стороні TimePad ми для себе (і далі в цьому керівництві) звану, «кастомізації» або просто «кастомом».
Такі кастомізації створюються і підтримуються нашими співробітниками. При цьому вам не потрібно змінювати код вставки віджета, навіть якщо зміни робляться на вже запущеному в продаж подію.
Кастомізації зберігаються в базі даних TimePad і підключаються до кожного віджету через унікальний ID кастомізації. Якщо ви не вказали ID кастомізації самостійно (про це написано в розділі «Як влаштований код вставки»), значить до віджету була застосована кастомизация за замовчуванням. Стандартні шаблони, стилі, скрипти і так далі.
При цьому події і кастомізації пов'язані не жорстко. Одну кастомізацію можна підключити до різних подій, а до однієї події в різних умовах можна застосовувати різні кастомізації (наприклад, якщо у вас два різних сайту з різним дизайном, на яких ви публікуєте одні й ті ж події).
Увага! У деяких випадках кастомізації можуть покладатися на специфічні настройки події. Якщо співробітниками TimePad для вас була розроблена персональна кастомизация, перед її підключенням до іншої події (і вже тим більше - до іншої організації, якщо у вас їх декілька) краще уточніть її обмеження і особливості в службі підтримки ([email protected]). Для цього надішліть посилання на подію і ID кастомізації.
Кастомізація на вашому боці
Однак, ви і самі можете змінювати зовнішній вигляд і поведінку віджета, розташовуючи змінений код у себе на сайті, неподалік від коду вставки. Зокрема, змінювати стилі. редагувати тексти (включаючи локалізацію). і верстати свій html (використовуючи шаблони Mustache).
Ви також можете використовувати jQuery, щоб маніпулювати виджетом безпосередньо.
Перш ніж звертатися до віджету через jQuery, обов'язково прочитайте цю інструкцію.
архітектура
У сильно спрощеному варіанті сучасні віджети TimePad складаються з наступних частин:
- Завантажувач (loader)
- JQuery, mustache і easyXDM як додаткові бібліотеки
- код віджета
- Темплейти (шаблони) на mustache
- файли локалізації
- less-таблиці стилів
- Файл опису моделей даних
Віджет використовує спрощений MVC.
- У коді віджета позначаються «Рауса», наприклад форма реєстрації, сторінка з варіантами оплати, сторінка повідомлення про успішну реєстрацію
- Рауса за назвою зіставляються шаблони, написані на mustache
- В якості моделі використовується JS-об'єкт, який досить просто змінюється і доповнюється даними. Він цілком кидається в mustache.
Як відображається віджет (відповідь: через iframe)
Щоб у css і js не виникало конфліктів з сайтом-споживачем, все відображення відбувається в src-less iframe. Якщо віджету необхідно відобразити попап, то для нього створюється окремий iframe. Цільовий елемент, вікно і документ для відтворення іноді змінюються по ходу роботи віджету - тобто, науково висловлюючись, відбувається перемикання контексту.
Саме через те що віджет живе своїм асинхронної життям в різних айфреймах з непередбачуваним назвою, не можна надійно дістатися до його елементів просто викликавши долар-функцію jQuery. Щоб щось робити, потрібно вішатися на події віджета (і, повторимося, уточнити, як працювати з jQuery).
Як завантажується віджет
- завантажується loader
- loader шукає коди вставки віджетів, і на кожен з них
- Створює область відтворення на місці коду вставки
- Завантажує код потрібного віджета
- Завантажує бібліотеки потрібного віджета
- Завантажує пакет кастомізації якщо він вказаний в коді вставки (атрибут data-timepad-customized)
- збирає настройки
- Створює src-less iframe
- виникає подія switchedToNewRenderTarget
- Запускає код віджету, переходячи на роут за замовчуванням
Як модифікувати стандартну поведінку і додати своє буде розказано далі в цьому керівництві.