можливості віджету

Загальна інформація

Залежно від налаштувань, віджет може бути вставлений або у вигляді форми прямо в тілі сторінки, або у вигляді попап-вікна. відкривається при натисканні на кнопку.

кастомізація віджета

Будь-віджет з 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
    • Запускає код віджету, переходячи на роут за замовчуванням

Як модифікувати стандартну поведінку і додати своє буде розказано далі в цьому керівництві.

Схожі статті

Copyright © 2024