Qnits

Эта страница только для чтения. Вы можете посмотреть исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Как создать свой шаблон лендинга на движке 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>
----

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


<WRAP center round box 100%>
**Что в нем хорошего (можно взять за пример):**
  - Правильная подгрузка товара по артикулу (так что товар изначально появится на витрине партнера со стандартной ценой, а дальше партнер сможет ей управлять через раздел товаров витрины и это будет отражаться на ленде)
  - Телефон офиса и артикул товара берется из переменных шаблона
  - Работа с config.conf
  -  Подгрузка отзывов из конфига + реализация отзывов по умолчанию (а вот сам текст отзывов которые по умолчанию - так себе)
  -  Подгрузка и отражение Meta Title
  -  Подгрузка и отражение скидки
  - Работа с формой заказа (oneClickBuyTool)
  -  __Выбор цвета товара, влияющий на форму заказа__
  -  Обработка ошибок формы (когда сабмитится без данных или неправильный телефон) - ошибки показываются, дизайн не едет, исправиться и засабмитить по новой легко
  -  Создание заказа без редиректа на страницу заказа
  -  Подгрузка и отражение скидки
  - Страница Доставка и оплата + для мобильных в контенте страницы отображается "мини-содержание" чтоб с первого экрана был виден краткий обзор возможностей
  - Страница Гарантии
  - Реквизиты в футере
  - Ссылка на политику конфиденциальности
  - Картинки ужаты через [[https://kraken.io/web-interface]]

**Что в нем плохо:**
  - Много неиспользуемых файлов, скриптов
  - Наличие внешних ссылок/ресурсов (на css/картинки/скрипты в том-числе). Все используемые файлы должны быть в папках шаблона, а не на внешних ресурсах.
</WRAP>

			

----

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


<WRAP center round box 100%>
**Что в нем хорошего (можно взять за пример):**
  - Правильная подгрузка нескольких товаров по артикулу (так что товары изначально появятся на витрине партнера со стандартной ценой, а дальше партнер сможет ей управлять через раздел товаров витрины и это будет отражаться на ленде)
  - Телефон офиса и артикул товара берется из переменных шаблона
  - Работа с config.conf
  - Подгрузка отзывов из конфига + реализация отзывов по умолчанию (но в данном шаблоне отзывы без отображения фотографий клиентов)
  - Подгрузка и отражение Meta Title
  - Подгрузка и отражение Заголовка на странице
  - Работа с формой заказа (oneClickBuyTool)
  - Заказ сразу на три товара
  - Реквизиты в футере
  - Ссылка на политику конфиденциальности + тут хорошо что она не выделяется, не будет отвлекать клиентов
  - Картинки ужаты через https://kraken.io/web-interface +200% к скорости загрузки
			        
**Что в нем плохо:**
  - Много неиспользуемых файлов, скриптов
  - Кривая обработка ошибок формы (когда сабмитится без данных или неправильный телефон). Хоть ошибки и показываются, исправиться и засабмитить по новой можно, но выглядит это криво: 
{{:pasted:20150817-170644.png}}
</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!

И не забываем что в Qnits есть крутая программа [[как_добавить_свой_оффер_в_ваш_список|сделай ленд получай процент]] 
  * Да здравствует web 2.0 в ecommerce!
Qnits

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

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

Инструменты страницы
