Эта страница содержит техническую информацию для верстальщиков. Здесь описаны технические принципы и особенности работы нашего шаблонизатора. Старая версия документации доступна по ссылке, однако не рекомендуется к использованию
Рекомендуем ознакомиться со страницей перенос лендинга для понимания общих принципов работы. Также рекомендуем ознакомиться с кодом этого демо-лендинга - в нем используются все возможности шаблонизатора.
Не забывайте, что у нас есть эмулятор нашего шаблонизатора

Возможности шаблонизатора

Системные
При создании собственных шаблонов обязательно учитывайте следующие особенности:

Все подключаемые ресурсы (стили, скрипты, изображения) должны находиться в папке files/
files - возвращает путь к папке «files» шаблона. Имейте ввиду, что простое прописывание в html-коде пути вида <img src="files/image.jpg" /> приведет к недоступности подключаемого ресурса. Необходимо использовать следующую конструкцию <img src="files/image.jpg" />

jquery - подключает jQuery 1.9.1. Можете не использовать его если вам нужна альтернативная версия jQuery. В любом случае, для более быстрой загрузки лендинга рекомендуем загружать jQuery c CDN. Например, отсюда http://api.yandex.ru/jslibs/libs.xml#jquery

Ваши шаблоны должны быть в кодировке UTF-8

domain - возвращает текущий домен. Текущее значение: «http://demo-1.leadvertex.info»

webmaster - возвращает ID вебмастера. Текущее значение: «0». Используется в тех случаях, когда на странице успешного заказа предлагается посмотреть другие офферы. В таком случае, вы можете сделать ссылки на эти офферы партнерскими, и лиды, совершенные на них будут засчитаны от веб-мастера, который привел текущего покупателя. Например, ссылка на другой оффер может быть вида http://demo-1.leadvertex.info/?f=0


webmaster=1: ... content ... :webmaster=1 - условный тег отобразит все, что находится между открывающим и закрывающим тегом для вебмастера с ID = 1. Например, вы можете вставлять отдельные счетчики и коды на лендинг только для конкретных веб-мастеров


utm_source - возвращает метку utm_source. Текущее значение: «»

utm_medium - возвращает метку utm_medium. Текущее значение: «»

utm_term - возвращает метку utm_term. Текущее значение: «»

utm_content - возвращает метку utm_content. Текущее значение: «»

utm_campaign - возвращает метку utm_campaign. Текущее значение: «»


order_number - возвращает номер текущего заказа пользователя. Текущее значение: «нет»

order_total - возвращает итоговую стоимость оформленного заказа пользователя. Текущее значение: «0»


content - В корне папки каждого домена есть главный файл layout.html - это шаблон основной страницы, в которую обычно включается шапка и подвал, а контент прочих страниц загружается из отдельных файлов. Тег content включает в содержимое главного файла layout.html содержимое файла, находящегося в папке pages. Т.е. запрос вида http://demo-1.leadvertex.info/page.html выведет внутри главного файла layout.html содержимое файла pages/page.html

no_layout - если этот тег прописан в коде страницы из папки pages/, то содержимое этой страницы будет отображено само по себе, т.е. без использования главного файла index.html
Пример можете посмотреть на странице успешного заказа

upsell_time="10" - этот параметр должен задаваться только в файле vars.html, находящемся в корне лендинга. Параметр указывает количество минут, в течение которых может быть использована форма уточнения заказа после оформления самого заказа. Это ограничение нужно для того, что во время изменения данных заказа пользователем и операторов не возникло конфликтов

upsell_hide="0" - этот параметр должен задаваться только в файле vars.html, находящемся в корне лендинга. Может принимать значения 0 или 1. Обозначает, нужно ли скрывать форму уточнения заказа по истечению заданного времени (см. выше). Если 0, то форма уточнения заказа будет доступна постоянно до тех пор, пока в браузере будут хранится специальные cookie

Пользовательские переменные

Вы можете определять свои или переопределять существующие переменные из файлов шаблонов. Вы можете определять свои переменные в любых html-файлах лендинга, однако для глобальных переменных, которые могут быть использованы на многих страницах (например, название валюты, старая цена, телефон) мы рекомендуем в файле vars.html, находящегося в корне лендинга определять несколько переменных, которые будут использованы в других местах в коде лендинга:

[[currency="руб"]]
[[price_old="3900"]]
[[phone="8-800-2000-600"]]
[[email="mail@example.com"]]

Используя такой подход в файле vars.html в любом месте на любой странице вы сможете использовать объявленные ранее переменные просто вызывая их (currency, price_old, phone, email) в любом месте на странице

При таком подходе вы легко сможете изменить валюту на лендинге и контактные данные отредактировав всего один файл.

Товары и цены

Информация о товарах задается на складе. Каждый товар на складе имеет свой алиас (техническое название, которое используется в коде лендингов). Например, такой товар как «Зеленый кофе» может иметь алиас «coffee». Алиас для каждого товара вы можете посмотреть в списке товаров на складе

Общее

good-unity alias="alias_tovara" - возвращает измерения товара, заданную на складе (например: шт, уп, ед или что-либо другое)

Цена товара

Цена товара формируется исходя из цены, указанной на складе. Для каждого товара может быть задано несколько цен, в зависимости от количества. Например, 1 единица товара может стоить 2000, а 2 единицы - 3500.

good-price alias="alias_tovara" - возвращает стоимость одной единицы для заданного товара.

good-price alias="alias_tovara" for=3 - возвращает стоимость трех единиц товара.

good-price-total form="1" - возвращает итоговую стоимость всех добавленных в форму товаров. Параметр form задает номер формы, для которой нужно рассчитать итоговую стоимость

Цена доставки

Для указания цены доставки нет специальных тегов. Доставка добавляется как отдельный товар на склад, у которого просто не списываются остатки (Это важно! При добавлении товара уберите галочку «Вести учет остатков этого товара»). Вы можете добавить на склад 2 товара, например, товар с алиасом «pochta» и «courier» задав для каждого свою цену и выводить ее как цену обычного товара (см. выше)

Форма заказа
Обязательно ознакомьтесь с информацией об алиасах перед тем, как разбираться с формой заказа

Вы можете разместить на одной странице до 10 различных форм заказа с разным набором полей и правилами валидации. В любой из форм возможен следующий набор полей:

  • fio - ФИО
  • country - Страна
  • postIndex - Почтовый индекс
  • region - Регион
  • city - Город
  • address - Адрес
  • house - Дом
  • flat - Квартира
  • phone - Телефон
  • email - Email
  • comment - Комментарий
  • checkboxAgreeTerms - Галочка «Согласен с условиями покупки»
  • paymentOn - Способ оплаты
  • additional1 - additional25 - набор из 25 доп.полей под любые нужды
Специальные теги формы заказа
К любому специальному тегу вы можете дописывать любые атрибуты, которые попадут в html тег. Например, form1Begin action="/success.html" style="display: block;" class="form" добавит к html-тегу атрибуты style и class <form ... style="display: block;" class="form">

form1Begin action="/success.html" alias="alias1, alias2"
Форма заказа обязательно начинается со специального открывающего тега form1Begin. В параметре alias передается алиас товара, который по умолчанию будет поступать в админку при отправке формы. Можно указать несколько алиасов через запятую или не указывать их вообще.
Также в открывающем теге form1Begin можно указать параметр validationByAlert со значение 1 и если при заполнении формы были допущены ошибки, то они будут отображены во всплывающем сообщении.
Пример кода form1Begin action="/success.html" alias="alias1, alias2" validationByAlert="1"


form1Label for="fio" label="Ф.И.О. <span>*</span>"
Необязательный тег. Возвращает заголовок (тег <label>) для указанного поля в атрибуте «for».


form1Field name="fio" required="1" type="text" validator="~^.+$~"
Поле формы. Имеет ряд специальных атрибутов:

  • name - название поля
  • required - обязательность заполнения (0 или 1)
  • type - тип поля
    • text - однострочное поле (input)
    • textarea - многострочное однострочное поле
    • select - выпадающий список
    • mask - маска (input)
    • checkbox - галочка
    • payment - выпадающий список для выбора способа оплаты
  • validator - правило валидации поля (зависит от типа)
    • Если тип поля text или textarea - регулярное выражение. Примеры регулярных выражений:
      • ~^.+$~ - любые символы
      • ~^.{5,20}$~ - строка из любых символов длинной от 5 до 20 символов
      • ~^.{20}$~ - строка из любых символов длинной ровно 20 символов
      • ~^\d{20}$~ - строка из цифр длинной ровно 20 символов
      • ~\+?\d{9,15}~ - проверка номера телефона
    • Если тип поля select - список значений через запятую. Например, Россия, Украина, Казахстан
    • Если тип поля mask - в шаблоне можно использовать символы:
      • * — любой символ (и буква, и цифра)
      • а (англ) — любая буква
      • 9 — цифра от 0 до 9
      Например, +7 (999) 999-99-99
    • Если тип поля payment - может принимать следующие значения
      • ~0,1~ - сгенерирует выпадающий список в следующем порядке: Online, При получении
      • ~1,0~ - сгенерирует выпадающий список в следующем порядке: При получении, Online
      • ~1~ - сгенерирует скрытое поле со значением - Online
      • ~0~ - сгенерирует скрытое поле со значением - При получении


form1Error name="fio" text="Поле «Ф.И.О» заполнено неверно"
Обязательный тег, который выводит сообщение об ошибки заполнения поля. Нужен для корректной работы валидации формы.


form1End
Обязательный тег, закрывающйи форму


Интерактивные теги формы

good-button alias="braslet" form="1" add="Добавить" remove="Удалить" add-class="add" remove-class="remove"
Этот тег создает кнопку, которая добавляет товар с алиасом «braslet» к заказу. Имеет ряд специальных атрибутов:

  • alias - обязательный атрибут, в котором необходимо указать алиас товара
  • form - номер формы заказы (для формы уточнения заказа необходимо указать «update»), в которую необходимо добавить товар, если атрибут не указан, то товар добавится ко всем формам
  • add - текст кнопки, пока товар не добавлен к заказу
  • remove - текст кнопки после добавления товара к заказу
  • add-class - класс кнопки, пока товар не добавлен к заказу
  • remove-class - класс кнопки после добавления товара к заказу
  • submit - делает из кнопки однокликовый апсел, если поставить значение «1», то при нажатии на кнопку товар добавится к заказу и клиента переведет на страницу успешного заказа
  • ajax - делает из кнопки однокликовый апсел, если поставить значение «1», то при нажатии на кнопку товар добавится к заказу и страница не будет перезагружена


good-quantity alias="braslet" form="1" empty="Выберите количество"
Этот тег позволяет добавить к заказу сразу несколько экземпляров одного и того же товара. Создает выпадающий список с количеством от 1 до 10 для добавления товара с алиасом «braslet» к заказу. Имеет ряд специальных атрибутов:

  • alias - обязательный аттрибут, в котором нужно указать алиас товара
  • form - номер формы заказы (для формы уточнения заказа необходимо указать «update»), в которую необходимо добавить товар, если аттрибут не указан, то товар добавится ко всем формам
  • empty - необязательный атрибут. Текст, который будет отображаться в списке на первом месте, пока не выбрано количество товара


good-select alias="alias1,alias2" form="1" empty="Выберите товар"
Этот тег позволяет выбрать какой-либо товар из списка представленных. Создает выпадающий список с названиями товаров. Имеет ряд специальных атрибутов:

  • alias - обязательный аттрибут, в котором нужно указать алиасы товара через запятую. Например, alias1, alias2
  • form - номер формы заказы (для формы уточнения заказа необходимо указать «update»), в которую необходимо добавить товар
  • empty - необязательный атрибут. Текст, который будет отображаться в списке на первом месте, пока не выбран товар


Вы можете смешивать обычные теги с тегами нашего шаблонизатора, а также добавлять к ним любые атрибуты, например прописывать стили, placeholder'ы, data-атрибуты, классы и идентификаторы

[[form1Begin action="/upsell.html" alias="id1, id2"]]
    <div>
        [[form1Label for="fio" label="Ф.И.О. <span>*</span>"]]
        [[form1Field name="fio" type="text" required="1" validator="~^.+$~" placeholder="Как вас зовут?"]]
        [[form1Error name="fio" text="Поле «Ф.И.О» заполнено неверно" class="error" style="color: red"]]
    </div>
    <div>
        [[form1Label for="country" label="Страна"]]
        [[form1Field name="country" type="select" required="1" validator="Россия, Украина, Казахстан, Республика Беларусь"]]
        [[form1Error name="country" text="Поле «Страна» заполнено неверно" class="error" style="color: red"]]
    </div>
    <div>
        [[form1Label for="quantity" label="Количество" data-hint="что-нибудь2"]]
        [[good-quantity alias="id1" empty="Удалить" form="1"]]
    </div>
    <div>
        [[form1Label for="phone" label="Телефон <span>*</span>" data-hint="Мы перезвоним в течение 15 минут"]]
        [[form1Field name="phone" type="mask" required="1" validator="+7(999)999-99-99" class="textField"]]
        [[form1Error name="phone" text="Поле «Телефон» заполнено неверно" style="color: red"]]
    </div>
    <div>
        [[form1Field name="checkboxAgreeTerms" type="checkbox" required="1" style="margin: 0"]]
        [[form1Label for="checkboxAgreeTerms" label="Я принимаю условия" style="display: inline-block" ]]
        [[form1Error name="checkboxAgreeTerms" text="Вы должны согласиться с условиями покупки" style="color: red"]]
    </div>
    <hr>
    <button type="submit" class="btn btn-success" style="width: 100%">Оформить заказ</button>
[[form1End]]
Форма уточнения заказа

Форма уточнения заказа используется на странице успешного оформления заказа, и служит для того, чтобы предложить клиентам дополнить данные о себе (например, город, адрес и индекс) или совершать апселы, которые будут добавлены в заказ.

Важно Форма уточнения заказа не может быть выведена на одной странице с формой заказа. Также, форма уточнения заказа выводится только в течение 10 минут после того, как основной заказ уже был совершен. Это сделано для того, чтобы избежать конфликтов у операторов прозвона и клиентов, уточняющих данные заказа. После использования формы уточнения заказа или по истечению 10 минут она исчезнет, и не появится у клиента до тех пор, пока он не сделает новый заказ

Для вывода формы уточнения заказа используются те же теги, что и для вывода основной форма, только вместо номера формы указывается Update. Пример

[[formUpdateBegin action="/upsell.html" alias="id1, id2"]]
    <div>
        [[formUpdateLabel for="address" label="Адрес"]]
        [[formUpdateField name="address" type="text" validator="~^.+$~"]]
        [[formUpdateError name="address" text="Поле «Адрес» заполнено неверно"]]
    </div>
    <div>
        [[formUpdateLabel for="postIndex" label="Почтовый индекс"]]
        [[formUpdateField name="postIndex" type="text" validator="~^.+$~"]]
        [[formUpdateError name="postIndex" text="Поле «Почтовый индекс» заполнено неверно"]]
    </div>
    <hr>
    <button type="submit" class="btn btn-success" style="width: 100%">Уточнить данные</button>
[[formUpdateEnd]]
Результат вывода такой формы вы можете увидеть, если сделаете заказ здесь, либо включите в настройках полей формы в своём демо оффере какое-либо из уточняющих полей

Условные теги

formUpdate: ... content ... :formUpdate Условные теги formUpdate выведут находящееся в них содержимое, если на лендинге в настоящий момент доступна форма уточнения заказа.

Дата и время

today - возвращает текущую дату. Текущее значение: «17 ноября»

year - возвращает текущий год. Текущее значение: «2019»

from_to - возвращает диапазон дат (по умолчанию за 7 дней), где последний день является текущим. Текущее значение: «10 по 17 ноября»

from_to=5 - возвращает диапазон дат за 3 дня (параметр изменяемый). Текущее значение: «12 по 17 ноября»

only_to - возвращает текущую дату + 2 дня. Текущее значение: «19 ноября»

only_to=5 - возвращает текущую дату + 5 дней (параметр изменяемый). Текущее значение: «22 ноября»

География
Если определить географию невозможно, то возвращается «Москва, Московская область»

geo_city - возвращает город пользователя по IP. Текущее значение: «Фэрфилд»

geo_region - возвращает регион пользователя по IP. Текущее значение: «Коннектикут»

geo_country - возвращает страну пользователя по IP. Текущее значение: «США»

geo_country_code - возвращает ISO-код страны пользователя по IP. Текущее значение: «US»

О том, как реализовать простейший гео-таргетинг смотрите в FAQ

JavaScript, CSS и сторонние библиотеки

О том, как подключить к проекту jQuery, описано выше

Подключать сторонние, популярные библиотеки типа bootstrap и moderniz мы рекомендуем с Яндекс CDN - такой подход поможет вам обеспечить более высокую скорость загрузки страниц, что повысит вашу конверсию и снизит нагрузку на наши сервера


Есть определенные вещи, которые очень часто используются в лендингах. Например, обратный отсчет времени для стимулирования клиента заказать товар/услугу быстрее. Ниже приведены готовые скрипты, которые позволят вам проще подключать часто требуемый функционал. Список будет пополняться.
Обратный отсчет времени

countdown.js - подключает скрипт таймера обратного отсчета.

Время отсчета таймера задается в секундах в любом месте страницы (или в вашем скрипте). В данном примере: 560 секунд <script>window.leadvertex.seconds = 560</script>

Далее, прописав классы к нужным элементам их содержимое будет заменяться соответствующими значениями:

  • .lv_countdown_days Дней:
  • .lv_countdown_hours Часов:
  • .lv_countdown_minutes Минут:
  • .lv_countdown_seconds Секунд:

После истечения времени счетчик пойдет повторно

Добавление товаров к форме заказа

Вы можете вручную добавить или удалить товар в определенную форму заказа, для этого необходимо воспользоваться одним из методов:

  • window.leadvertex.form.goodAdd(form, alias, quantity) - добавляет товар в указанную форму. Описание параметров: form - номер формы, alias - алиас товара и quantity - количество товара
  • window.leadvertex.form.goodRemove(form, alias) - удаляет товар из указанной формы. Описание параметров form - номер формы, alias - алиас товара.

FAQ
Используя географические теги вы можете сделать простейший редирект на другой сайт если страна посетителя не соответствует заданной. Например, вы работаете по России, и к вам заходит пользователь с Украины. Вы можете перенаправить пользователя с украины на другой сайт используя следующий код
<script>
  if ('{{geo_country_code}}'=='UA')
    window.location.href = 'http://другой-сайт.ru/?f={{webmaster}}';
</script>
Вы можете использовать эмулятор нашего шаблонизатора у себя на компьютере