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

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

<WRAP center round box 100%> Сразу предупреждаю, если у вас есть готовый html лендинг, вы можете подключить его к платформе через [[:форма_быстрого_заказа|форму передачи заказов]] (не iframe, лучше) за 3 минуты. Плюс способа подключения через форму: это просто и быстро. </WRAP>

{{youtube>Mv7Tz78KCDw}}

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

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

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

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

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

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

<WRAP center round box 100%> Ну а минус второго способа подключения в том, что создание шаблона на движке Qnits занимает больше времени чем просто вставка формы (переделывание готового html лендинга в шаблон на движке Qnits занимает около 4х часов). </WRAP>

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

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

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

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

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

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

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

{{:pasted:20150817-161737.png}}<WRAP center round download 60%> [[https://www.dropbox.com/s/3su8g89omhto3sg/QnitsTplSampleNano.zip?dl=1|скачать исходник шаблона]] </WRAP>

<WRAP center round box 100%> **Что в нем хорошего (можно взять за пример):**

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

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

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

</WRAP>

----


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

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

{{:pasted:20150817-171443.png}}

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

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

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

<WRAP center round box 80%> 1. § {$название переменной} [[:переменные_шаблонов|список переменных]]

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

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

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

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

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

</WRAP>

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

<WRAP center round box 100%>

  * ○ Шаблон перестает работать, когда я вставляю фигурные скобки { }, например, в составе js кода
  * ○ Пишите так: {literal} скрипт, и любой другой текст шаблона с фигурными скобками.{/literal}
  * ○ Как загрузить свой фейвикон?
  * ○ Загрузите свой файл favicon.png в папку с картинками шаблона (папка называется "images")

  * • Как задать содержимое раздела head на уровне шаблона?
  * ○ Создайте файл "head.tpl" в папке "html" и пропишите там любые хедеры, которые вам нужны
  * ○ Только не надо прописывать таким образом счетчики метрики (через вставку кода счетчика в шаблон). Счетчики метрики мы советуем задавать через [[:установка_счётчика_метрики_на_витрину|настройку магазина]], а не ручное добавление в шаблон, - иначе не будут учитываться конверсии.

  * • Как отключить стили Qnits на определенных страницах?
  * ○ Для отключения стилей Qnits:
  * § Откройте файл html/head.tpl (создайте файл, если его нет в вашем текущем шаблоне)
  * § Вставьте в него {$settings→setUseQnitsStylesOnThisPage(false)}
  * ○ Пример:
  * {{:pasted:20150817-172039.png}}

  * ○ Используйте блок {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% задач.

  * При необходимости, доп инфу по синтаксису шаблонизатора можно подчерпнуть [[https://code.google.com/p/quicky/wiki/Manual|здесь]]

</WRAP>

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

{{:pasted:20150817-173623.png}}

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

{{:pasted:20150817-173740.png}}

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

<WRAP center round box 100%> Для смены товара в заказе достаточно изменить значение скрытого поля "ocProducts" в сгенерированной форме. В этом поле записаны:

<WRAP center round box 100%> Товар, который должен попадать в заказ Желаемая цена (можно пропускать это значение как в примере ниже), Количество </WRAP>

**Вот пример реализации 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")');

/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */ <WRAP center round box 100%> $(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")'); </WRAP>

/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */ <WRAP center round box 100%> $(this).parent().parent().parent().find("input[name='QproductOneClickBuyModel[0][ocProducts]']").val("qproduct:{/literal}{$product2→qproduct_id}{literal}-preferedPrice:-quantity:1");}});}) </WRAP>

</script> {/literal}

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

</WRAP>

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