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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ○ Шаблон перестает работать, когда я вставляю фигурные скобки { }, например, в составе 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% задач.

• При необходимости, доп инфу по синтаксису шаблонизатора можно подчерпнуть здесь

Для смены товара в заказе достаточно изменить значение скрытого поля «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»)');

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

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

</script> {/literal}

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