Сверстать по своему макету

Виджеты TimePad используют html-шаблоны на языке mustache.

В данном примере стандартные mustache-шаблоны виджета заменяются пользовательскими:

<script type="text/mustache" id="mainTplMy">
    <h1>Hello, world! This is {{{event.name}}}!</h1>
</script>

<script type="text/mustache" id="payTplMy">
    Заплатите нам {{order.total}} денег!
</script>

<a href="http://org13.timepad.ru/event/АЙДИ_СОБЫТИЯ/" data-twf-placeholder="yes">Перейти к заказу билетов</a>
<script type="text/javascript"
        defer="defer"
        data-data-timepad-customized="АЙДИ_ИЗ_ВАШЕГО_КОДА"
        data-twf2s-event--id="АЙДИ_СОБЫТИЯ"
        data-timepad-widget-v2="event_register"
        src="//timepad.ru/js/tpwf/loader/min/loader.js">
  (function() {
    return {
      "overrideTemplates": {
        "main": "#mainTplMy",
        "pay": "#payTplMy"
      }
    };
  })();
</script>

Не забудьте заменить АЙДИ_ИЗ_ВАШЕГО_КОДА, АЙДИ_СОБЫТИЯ на свои!

В примере выше мы внедряем новый код шаблонов прямо в страницу рядом с кодом вставки. Обратите внимание, что id <script>-элементов с шаблонами могут быть любыми, главное правильно указать css-селекторы для их получения в блоке настроек виджета.

Но в большинстве случаев лучше и правильней вынести код шаблонов во внешние файлы и сделать, например, так:

{* пример для шаблонизатора smarty *}
{foreach ['main', 'pay'] as $tplName}
<script type="text/mustache" id="my_widget_{$tplName}">
    {include "widgetTpls/{$tplName}.mustache"}
</script>
{/foreach}

Где взять оригинальные шаблоны

Виджет регистрации на событие

Шаблоны экранов:

  • main.mustache — главный экран с формой выбора билетов
  • pay.mustache — экран выбора способа оплаты для платных заказов
  • pending.mustache — экран подтверждения приема заявки для событий с модерацией заявок
  • select_date.mustache — экран выбора даты для повторяющегося события
  • success.mustache — экран подтверждения регистрации
  • tlen.mustache — экран с информацией о том, что регистрация на событие закрыта
  • widget_error.mustache — экран с ошибкой инициализации виджета
  • button.mustache — экран с кнопкой открытия попапа регистрации для виджета в режиме попапа

Шаблоны блоков:

  • _ank.mustache — блок анкет (начиная от емейла заказчика и заканчивая галочками в конце формы)
  • _attendee_form.mustache — блок вопросов для анкеты участника
  • _errorBlock.mustache — блок вывода ошибок при регистрации
  • _event.mustache — краткая информация о мероприятии
  • _footer.mustache — подвал виджета
  • _order.mustache — блок информации о составе заказа
  • _policyResult.mustache — блок с информацией о примененных скидочных политиках
  • _promocodeBlock.mustache — вывод результата проверки промокода
  • _question.mustache — блок вопроса в анкете регистрации
  • _re_selector.mustache - блок выбора категории регистрации при редактировании мультианкет
  • _registrant.mustache — блок вопросов для анкеты заказчика
  • _seatcheck.mustache — блок вывода схемы зала для событий со схемами залов
  • _selectTickets.mustache — таблица с выбором количества билетов
  • _support.mustache — блок с контактами технической поддержки

Виджет списка событий

В данный момент виджет списка событий использует следующие шаблоны:

Где взять данные для подстановки в шаблоны

Вся модель виджета доступна в консоли браузера. На любой странице, где стоит виджет регистрации, можно открыть консоль и ввести:

TWF2.getWidget().model

Если вы делаете это на странице события, процесс несколько сложнее. Там есть не только виджет регистрации, но и, например, виджеты с баннерами. Поэтому getWidget() без параметров вернет не тот виджет, который вам нужен. Чтобы понять, какой же из них правильный, сначала нужно ввести следующее:

l = TWF2L.widgets

Отобразится массив, описывающий все виджеты. У одного из них поле _instance будет иметь тип event_register. Допустим, это будет третий виджет. Значит, дальше вам нужно написать:

TWF2.getWidget(2).model

Готово. Свойства объекта, который появится в консоли, и будут теми самыми переменными, которые вы можете видеть в наших стандартных шаблонах. Например, если у объекта есть свойство event, а у этого свойства — свойство city, значит, в шаблоне вы можете написать:

Город: {{event.city}}

и вывести город, в котором происходит событие.