Инструменты пользователя

Инструменты сайта


Боковая панель

Офферы:

​Лендинги

Многостраничники

Товары:

FAQ:

Вывод средств:

Рефералы и ученики:

Подключение и передача заказов с внешних витрин:

Юридическая информация:

Обучающая литература:

Вебинар QNITS:

как_создать_лендинг_на_движке_qnits

Как создать свой шаблон лендинга на движке Qnits?

Какая разница между созданием шаблона лендинга на движке Qnits и подключением лендинга через форму передачи заказов?

Сразу предупреждаю, если у вас есть готовый html лендинг, вы можете подключить его к платформе через форму передачи заказов (не iframe, лучше) за 3 минуты. Плюс способа подключения через форму: это просто и быстро.

Есть и альтернативный способ (о котором текст ниже) - создание шаблона на движке Qnits. У этого способа есть ряд других плюсов, если вы предоставляете его как оффер:

Пользователи смогут парковать шаблон на свои домены Пользователи смогут настраивать шаблон, например:

  • Управлять ценой,
  • Скидкой,
  • Отзывами
  • И т.д.

У шаблона будет прямой доступ к переменным платформы:

  • Актуальный телефон, адрес
  • Цена товара настроенная пользователем
  • И т.д.

Намного больше возможностей по работе с формой передачи заказов Не нужен свой хостинг (все хостится на серверах Qnits)

Ну а минус второго способа подключения в том, что создание шаблона на движке Qnits занимает больше времени чем просто вставка формы (переделывание готового html лендинга в шаблон на движке Qnits занимает около 4х часов).

Как создать шаблон лендинга на движке Qnits?

Создайте новую витрину, с шаблоном Landing и любым адресом например my-new-template.qnits.ru (как?) Подключитесь по FTP к созданной витрине (Как?)

Хост: my-new-template.qnits.ru (адрес который вы указали при создании витрины), Логин: my-new-template.qnits.ru (адрес который вы указали при создании витрины), Пароль:*ваш пароль от панели*

Начните перерабатывать шаблон.

Результат изменений можно сразу просматривать в браузере (по адресу который вы указали при создании витрины).

В процессе переработки Вам поможет следующий материал:

1. Примеры реализации шаблонов:

Что в нем хорошего (можно взять за пример):

  1. Реализация мобильной, планшетной и пк версии
  2. Телефон офиса берется из переменных шаблона
  3. Работа с config.conf
  4. Подгрузка и отражение скидки
  5. Работа с формой заказа (oneClickBuyTool)
  6. Несколько форм заказа на странице
  7. Есть форма заказа сразу трех комплектов - по аналогии можно делать формы заказа и на несколько разных вещей
  8. Нет лишних файлов
  9. Нет внешних ссылок/ресурсов

Что в нем плохого:

  1. Телефон офиса показывается, а артикул нет! Надо либо показывать и телефон и артикул, либо делать кнопку заказа звонка без отображения телефона и артикула.

2. Структура папок на FTP

На движке Qnits, разные виды файлов шаблона должны быть разложены строго по определенным папкам. Иначе они не будут подгружаться. Вот схема папок:

3. Разметка шаблона (tpl)

Принцип прост. «tpl файлы» - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.

Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}. Основные теги которые могут вам понадобится:

1. § {$название переменной} список переменных

  • Подставляет на место тега значение соответствующей переменной шаблона

2. § {if (условие)} 111 {/if}

  • Выводит 111 если выполняется условие

3. § {if (условие)} 111 {else} 222 {/if}

  • Выводит 111 если выполняется условие, 222 если оно не выполняется.

4. Частые вопросы по разметке (tpl)

  • ○ Шаблон перестает работать, когда я вставляю фигурные скобки { }, например, в составе js кода
  • ○ Пишите так: {literal} скрипт, и любой другой текст шаблона с фигурными скобками.{/literal}
  • ○ Как загрузить свой фейвикон?
  • ○ Загрузите свой файл favicon.png в папку с картинками шаблона (папка называется «images»)
  • • Как задать содержимое раздела head на уровне шаблона?
  • ○ Создайте файл «head.tpl» в папке «html» и пропишите там любые хедеры, которые вам нужны
  • ○ Только не надо прописывать таким образом счетчики метрики (через вставку кода счетчика в шаблон). Счетчики метрики мы советуем задавать через настройку магазина, а не ручное добавление в шаблон, - иначе не будут учитываться конверсии.
  • • Как отключить стили Qnits на определенных страницах?
  • ○ Для отключения стилей Qnits:
  • § Откройте файл html/head.tpl (создайте файл, если его нет в вашем текущем шаблоне)
  • § Вставьте в него {$settings→setUseQnitsStylesOnThisPage(false)}
  • ○ Пример:
  • ○ Используйте блок {if} для выделения нужных страниц, не отключайте стили на всех страницах, иначе например страница заказа может стать неработоспособной
  • • Как сделать разное отображение для мобильных/планшетов/пк?
  • Можно использовать такую конструкцию:
  • {if $userDevice→isTablet()}
  • Отображение для планшетов
  • {elseif $userDevice→isMobile()}
  • Отображение для мобильных
  • {else}
  • Отображение для ПК
  • {/if}
  • Например, подгрузка разных стилей в head.tpl
  • {if $userDevice→isTablet()}
  • <link rel=«stylesheet» type=«text/css» href=«/design/css/tablet/index.css»/>
  • {elseif $userDevice→isMobile()}
  • <link rel=«stylesheet» type=«text/css» href=«/design/css/mobile/index.css»/>
  • {else}
  • <link rel=«stylesheet» type=«text/css» href=«/design/css/index.css»/>
  • {/if}
  • Или например, подгрузка разных вариантов отображения в start_page.tpl
  • {if $userDevice→isTablet()}
  • {include file='start_page_tablet.tpl'}
  • {elseif $userDevice→isMobile()}
  • {include file='start_page_mobile.tpl'}
  • {else}
  • {include file='start_page_pc.tpl'}
  • {/if}
  • Этого достаточно для 99% задач.
  • При необходимости, доп инфу по синтаксису шаблонизатора можно подчерпнуть здесь

5. Подгрузка товара:

6. Форма быстрого заказа:

7. Смена товара в форме быстрого заказа:

Для смены товара в заказе достаточно изменить значение скрытого поля «ocProducts» в сгенерированной форме. В этом поле записаны:

Товар, который должен попадать в заказ Желаемая цена (можно пропускать это значение как в примере ниже), Количество

Вот пример реализации js выбора товара из шаблона Nardin (в файле start_page.tpl):

{literal} <script type=«text/javascript»>$(document).ready(function () {$(«input[name=radios],input[name=radios2]»).on('change', function () {if ($(this).val() == 'first') {$('.watch').css('background-image', 'url(«/design/images/header_watch.png»)');

/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */

$(this).parent().parent().parent().find(«input[name='QproductOneClickBuyModel[0][ocProducts]']»).val(«qproduct:{/literal}{$product→qproduct_id}{literal}-preferedPrice:-quantity:1»);}else {$('.watch').css('background-image', 'url(«/design/images/header_watch2.png»)');

/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */

$(this).parent().parent().parent().find(«input[name='QproductOneClickBuyModel[0][ocProducts]']»).val(«qproduct:{/literal}{$product2→qproduct_id}{literal}-preferedPrice:-quantity:1»);}});})

</script> {/literal}

Если в форме несколько разных видов товаров, то значение выглядит таким образом «qproduct:146987401-preferedPrice:-quantity:1|qproduct:146987402-preferedPrice:-quantity:1|qproduct:146987403-preferedPrice:-quantity:1» (в данном примере передается 3 товара по 1 шт.)

Это все что может понадобиться при создании своего шаблона лендинга на движке Qnits!

как_создать_лендинг_на_движке_qnits.txt · Последние изменения: 2017/06/21 16:13 — watch-led.ru@mail.ru