Различия

Здесь показаны различия между двумя версиями данной страницы.

--- как_создать_лендинг_на_движке_qnits [2015/08/17 18:00]
watch-led.ru@mail.ru создано
+++ как_создать_лендинг_на_движке_qnits [2017/06/21 16:13] (текущий)
watch-led.ru@mail.ru
@@ Строка 3: / Строка 3: @@
 ===== Какая разница между созданием шаблона лендинга на движке Qnits и подключением лендинга через форму передачи заказов? =====
-<WRAP center round box 100%>
+<WRAP center round box 100%> Сразу предупреждаю, если у вас есть готовый html лендинг, вы можете подключить его к платформе через [[:форма_быстрого_заказа|форму передачи заказов]] (не iframe, лучше) за 3 минуты. Плюс способа подключения через форму: это просто и быстро. </WRAP>
-Сразу предупреждаю, если у вас есть готовый html лендинг, вы можете подключить его к платформе через форму передачи заказов (не iframe, лучше) за 3 минуты. Плюс способа подключения через форму: это просто и быстро.
-</WRAP>
 {{youtube>Mv7Tz78KCDw}}
-<WRAP center round box 100%>
+<WRAP center round box 100%> Есть и альтернативный способ (о котором текст ниже) - создание шаблона на движке Qnits. У этого способа есть ряд других плюсов, если вы предоставляете его как оффер:
-Есть и альтернативный способ (о котором текст ниже) - создание шаблона на движке Qnits. У этого способа есть ряд других плюсов, если вы предоставляете его как оффер:
+Пользователи смогут парковать шаблон на свои домены Пользователи смогут настраивать шаблон, например:
+  * Управлять ценой,
+  * Скидкой,
+  * Отзывами
+  * И т.д.
-Пользователи смогут парковать шаблон на свои домены
-Пользователи смогут настраивать шаблон, например:
-   * Управлять ценой,
-   * Скидкой,
-   * Отзывами
-   * И т.д.
 У шаблона будет прямой доступ к переменным платформы:
-   * Актуальный телефон, адрес
-   * Цена товара настроенная пользователем
-   * И т.д.
-Намного больше возможностей по работе с формой передачи заказов
-Не нужен свой хостинг (все хостится на серверах Qnits)
-</WRAP>
+  * Актуальный телефон, адрес
+  * Цена товара настроенная пользователем
+  * И т.д.
+Намного больше возможностей по работе с формой передачи заказов Не нужен свой хостинг (все хостится на серверах Qnits) </WRAP>
-<WRAP center round box 100%>
-Ну а минус второго способа подключения в том, что создание шаблона на движке Qnits занимает больше времени чем просто вставка формы (переделывание готового html лендинга в шаблон на движке Qnits занимает около 4х часов).
-</WRAP>
+<WRAP center round box 100%> Ну а минус второго способа подключения в том, что создание шаблона на движке Qnits занимает больше времени чем просто вставка формы (переделывание готового html лендинга в шаблон на движке Qnits занимает около 4х часов). </WRAP>
 ===== Как создать шаблон лендинга на движке Qnits? =====
-<WRAP center round box 100%>
+<WRAP center round box 100%> Создайте новую витрину, с шаблоном Landing и любым адресом например my-new-template.qnits.ru (как?) Подключитесь по FTP к созданной витрине (Как?)
-Создайте новую витрину, с шаблоном Landing и любым адресом например my-new-template.qnits.ru (как?)
-Подключитесь по FTP к созданной витрине  (Как?)
-Хост: my-new-template.qnits.ru (адрес который вы указали при создании витрины),
+Хост: my-new-template.qnits.ru (адрес который вы указали при создании витрины), Логин: my-new-template.qnits.ru (адрес который вы указали при создании витрины), Пароль:*ваш пароль от панели*
-Логин: my-new-template.qnits.ru (адрес который вы указали при создании витрины),
-Пароль:*ваш пароль от панели*
+Начните перерабатывать шаблон.
-Начните перерабатывать шаблон.
+Результат изменений можно сразу просматривать в браузере (по адресу который вы указали при создании витрины). </WRAP>
-Результат изменений можно сразу просматривать в браузере (по адресу который вы указали при создании витрины).
-</WRAP>
 ==== В процессе переработки Вам поможет следующий материал: ====
 === 1. Примеры реализации шаблонов: ===
+{{:pasted:20150817-161737.png}}<WRAP center round download 60%> [[https://www.dropbox.com/s/3su8g89omhto3sg/QnitsTplSampleNano.zip?dl=1|скачать исходник шаблона]] </WRAP>
-{{:pasted:20150817-161737.png}}
+<WRAP center round box 100%> **Что в нем хорошего (можно взять за пример):**
-<WRAP center round download 60%>
-[[https://www.dropbox.com/s/3su8g89omhto3sg/QnitsTplSampleNano.zip?dl=1|скачать исходник шаблона]]
-</WRAP>
-<WRAP center round box 100%>
-**Что в нем хорошего (можно взять за пример):**
   - Реализация мобильной, планшетной и пк версии
   - Телефон офиса берется из переменных шаблона
@@ Строка 74: / Строка 55: @@
 **Что в нем плохого:**
-  - Телефон офиса показывается, а артикул нет! Надо либо показывать и телефон и артикул, либо делать кнопку заказа звонка без отображения телефона и артикула.
-</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>
+=== 2. Структура папок на FTP ===
-<WRAP center round box 100%>
+На движке Qnits, разные виды файлов шаблона должны быть разложены строго по определенным папкам. Иначе они не будут подгружаться. Вот схема папок:
-**Что в нем хорошего (можно взять за пример):**
-  - Правильная подгрузка нескольких товаров по артикулу (так что товары изначально появятся на витрине партнера со стандартной ценой, а дальше партнер сможет ей управлять через раздел товаров витрины и это будет отражаться на ленде)
-  - Телефон офиса и артикул товара берется из переменных шаблона
-  - Работа с config.conf
-  - Подгрузка отзывов из конфига + реализация отзывов по умолчанию (но в данном шаблоне отзывы без отображения фотографий клиентов)
-  - Подгрузка и отражение Meta Title
-  - Подгрузка и отражение Заголовка на странице
-  - Работа с формой заказа (oneClickBuyTool)
-  - Заказ сразу на три товара
-  - Реквизиты в футере
-  - Ссылка на политику конфиденциальности + тут хорошо что она не выделяется, не будет отвлекать клиентов
-  - Картинки ужаты через https://kraken.io/web-interface +200% к скорости загрузки
-**Что в нем плохо:**
-  - Много неиспользуемых файлов, скриптов
-  - Кривая обработка ошибок формы (когда сабмитится без данных или неправильный телефон). Хоть ошибки и показываются, исправиться и засабмитить по новой можно, но выглядит это криво:
-{{:pasted:20150817-170644.png}}
-</WRAP>
+{{:pasted:20150817-171443.png}}
-----
+=== 3. Разметка шаблона (tpl) ===
-=== 2. Структура папок на FTP ===
+Принцип прост.  "tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.
+Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.Основные теги которые могут вам понадобится:
-На движке Qnits, разные виды файлов шаблона  должны быть разложены строго по определенным папкам. Иначе они не будут  подгружаться. Вот схема папок:
-{{:pasted:20150817-171443.png}}
+<WRAP center round box 80%> 1. § {$название переменной} [[:переменные_шаблонов|список переменных]]
+  * Подставляет на место тега значение соответствующей переменной шаблона
-=== 3. Разметка шаблона (tpl) ===
+. § {if (условие)} 111 {/if}
+  * Выводит 111 если выполняется условие
-Принцип прост.
-"tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.
-Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.Основные теги которые могут вам понадобится:
+. § {if (условие)} 111 {else} 222 {/if}
-<WRAP center round box 80%>
-. § {$название переменной} список переменных-йцукен
-  * Подставляет на место тега значение соответствующей переменной шаблона
-. § {if (условие)} 111 {/if}
-  * Выводит 111 если выполняется условие
-. § {if (условие)} 111 {else} 222 {/if}
   * Выводит 111 если выполняется условие, 222 если оно не выполняется.
 </WRAP>
 === 4. Частые вопросы по разметке (tpl) ===
 <WRAP center round box 100%>
-  * ○ Шаблон перестает работать, когда я вставляю фигурные скобки {  }, например, в составе js кода
-  *  ○ Пишите так: {literal} скрипт, и любой другой текст шаблона с фигурными скобками.{/literal}
+  * ○ Шаблон перестает работать, когда я вставляю фигурные скобки { }, например, в составе js кода
-  *  ○ Как загрузить свой фейвикон?
+  * ○ Пишите так: {literal} скрипт, и любой другой текст шаблона с фигурными скобками.{/literal}
-  *  ○ Загрузите свой файл favicon.png в папку с картинками шаблона (папка называется "images")
+  * ○ Как загрузить свой фейвикон?
+  * ○ Загрузите свой файл favicon.png в папку с картинками шаблона (папка называется "images")
   * • Как задать содержимое раздела head на уровне шаблона?
-  *  ○ Создайте файл "head.tpl" в папке "html" и пропишите там любые хедеры, которые вам нужны
+  * ○ Создайте файл "head.tpl" в папке "html" и пропишите там любые хедеры, которые вам нужны
-  *  ○ Только не надо прописывать таким образом счетчики метрики (через вставку кода счетчика в шаблон). Счетчики метрики мы советуем задавать через настройку магазина-йцукен, а не ручное добавление в шаблон, - иначе не будут учитываться конверсии.
+  * ○ Только не надо прописывать таким образом счетчики метрики (через вставку кода счетчика в шаблон). Счетчики метрики мы советуем задавать через [[:установка_счётчика_метрики_на_витрину|настройку магазина]], а не ручное добавление в шаблон, - иначе не будут учитываться конверсии.
   * • Как отключить стили Qnits на определенных страницах?
-  *  ○ Для отключения стилей Qnits:
+  * ○ Для отключения стилей Qnits:
-  *  § Откройте файл html/head.tpl (создайте файл, если его нет в вашем текущем шаблоне)
+  * § Откройте файл html/head.tpl (создайте файл, если его нет в вашем текущем шаблоне)
-  *  § Вставьте в него {$settings->setUseQnitsStylesOnThisPage(false)}
+  * § Вставьте в него {$settings→setUseQnitsStylesOnThisPage(false)}
-  *  ○ Пример:
+  * ○ Пример:
-  *  {{:pasted:20150817-172039.png}}
+  * {{:pasted:20150817-172039.png}}
+  * ○ Используйте блок {if} для выделения нужных страниц, не отключайте стили на всех страницах, иначе например страница заказа может стать неработоспособной
-  *  ○ Используйте блок {if} для выделения нужных страниц, не отключайте стили на всех страницах, иначе например страница заказа может стать неработоспособной
   * • Как сделать разное отображение для мобильных/планшетов/пк?
   * Можно использовать такую конструкцию:
-  *  {if $userDevice->isTablet()}
+  * {if $userDevice→isTablet()}
-  *  Отображение для планшетов
+  * Отображение для планшетов
-  *  {elseif $userDevice->isMobile()}
+  * {elseif $userDevice→isMobile()}
   * Отображение для мобильных
-  *  {else}
+  * {else}
   * Отображение для ПК
-  *  {/if}
+  * {/if}
   * Например, подгрузка разных стилей в head.tpl
-  *  {if $userDevice->isTablet()}
+  * {if $userDevice→isTablet()}
-  *  <link rel="stylesheet" type="text/css" href="/design/css/tablet/index.css"/>
+  * <link rel="stylesheet" type="text/css" href="/design/css/tablet/index.css"/>
-  *  {elseif $userDevice->isMobile()}
+  * {elseif $userDevice→isMobile()}
-  *  <link rel="stylesheet" type="text/css" href="/design/css/mobile/index.css"/>
+  * <link rel="stylesheet" type="text/css" href="/design/css/mobile/index.css"/>
-  *  {else}
+  * {else}
-  *  <link rel="stylesheet" type="text/css" href="/design/css/index.css"/>
+  * <link rel="stylesheet" type="text/css" href="/design/css/index.css"/>
-  *  {/if}
+  * {/if}
   * Или например, подгрузка разных вариантов отображения в start_page.tpl
-  *  {if $userDevice->isTablet()}
+  * {if $userDevice→isTablet()}
-  *  {include file='start_page_tablet.tpl'}
+  * {include file='start_page_tablet.tpl'}
-  *  {elseif $userDevice->isMobile()}
+  * {elseif $userDevice→isMobile()}
-  *  {include file='start_page_mobile.tpl'}
+  * {include file='start_page_mobile.tpl'}
-  *  {else}
+  * {else}
-  *  {include file='start_page_pc.tpl'}
+  * {include file='start_page_pc.tpl'}
-  *  {/if}
+  * {/if}
   * Этого достаточно для 99% задач.
   * При необходимости, доп инфу по синтаксису шаблонизатора можно подчерпнуть [[https://code.google.com/p/quicky/wiki/Manual|здесь]]
 </WRAP>
 === 5. Подгрузка товара: ===
 {{:pasted:20150817-173623.png}}
+=== 6. Форма быстрого заказа: ===
-=== 6. Форма быстрого заказа: ===
 {{:pasted:20150817-173740.png}}
 === 7. Смена товара в форме быстрого заказа: ===
+<WRAP center round box 100%> Для смены товара в заказе достаточно изменить значение скрытого поля "ocProducts" в сгенерированной форме. В этом поле записаны:
-Для смены товара в заказе достаточно изменить значение скрытого поля "ocProducts" в сгенерированной форме. В этом поле записаны:
+<WRAP center round box 100%> Товар, который должен попадать в заказ Желаемая цена (можно пропускать это значение как в примере ниже), Количество </WRAP>
-<WRAP center round box 100%>
+**Вот пример реализации js выбора товара из шаблона Nardin (в файле start_page.tpl):**
-Товар, который должен попадать в заказ
-Желаемая цена (можно пропускать это значение как в примере ниже),
-Количество
-</WRAP>
+{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")');
-**Вот пример реализации js выбора товара из шаблона Nardin (в файле start_page.tpl):**
+/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */ <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>
-{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}{$product2→qproduct_id}{literal}-preferedPrice:-quantity:1");}});}) </WRAP>
-<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>
+</script> {/literal}
-/* Передаем выбор цвета в форму, тут нужен именно артикул витрины, а не библиотеки, мы можем его получить из подгруженного товара */
-<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

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

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

Различия

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