Intro.js

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

В этой записи Вы узнаете, как использовать Intro.js для построения эффективного интерактивного обзора продукта. Форма пошагового обзора с помощью Intro.js была разработана Rakhitha Nimesh (редактор сайта sitepoint).

Форма пошагового обзора продукта
Форма пошагового обзора продукта с помощью Intro.js

Что такое Пошаговый обзор

Пошаговый обзор продукта — это серия этапов, которые отображают существующие характеристики или функций продукта. Существуют различные варианты интерактивного обзора, для большинства обзоров, которые были созданы в качестве презентаций, применялся Flash. Но, в последнее время для интерактивного обзора стали более популярными библиотеки JavaScript, поскольку они предлагают пошаговую демонстрацию возможностей продукта, вместо статических изображений и анимации.

к меню ↑

Зачем нужен Пошаговый обзор

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

  • Люди не любят читать длинные документации.
  • Документация не предоставляет интерактивную демонстрацию каждого продукта.
  • Люди не регулярно читают документацию и, следовательно, они не знают о всех возможностях продукта.

В качестве решения, пошаговый обзор используются для выделения особенностей продукта, что бы привлечь внимание пользователей к продукту. Особенностью пошагового обзора, является то, что интерактивный обзор может отличаться в зависимости от вида продукции. Каждая библиотека JavaScript предоставляет стандартный набор функций, необходимых для интерактивного подробного обзора продукта. Давайте посмотрим на самые основные особенности библиотеки JavaScript.

к меню ↑

Особенности JavaScript пошагового обзора

  • Запуск кнопки, Знакомство с продуктом — эта кнопка запускает библиотеку JavaScript, от разработчика может потребоваться определить пользовательскую кнопку, чтобы инициализировать интерактивный обзор. Эта кнопка должна быть разработана таким образом, что бы она привлекала внимание пользователей и, как правило, это не обычные на вид кнопки.
  • Действие, Знакомство с продуктом — после начала обзора продукта, у пользователя должна быть возможность перемещаться через ряд шагов, представляя выбор функции до тех пор, пока пока обзор не завершен. Создание библиотеки «Знакомство с продуктом» должно содержать простой и ясный способ определения шагов обзора, добавляя различные элементы в документ HTML. Хотя это и не является обязательным, полезно иметь кнопки «Предыдущая» и «Далее» для навигации, знакомство с продуктом.
  • Подробный обзор, кнопка «Пропустить» — далеко не каждый пользователь хочет пройти полный обзор продукта. Иногда первые шаги подробного обзора может быть достаточно эффективным, чтобы пользователь принял решение о покупке продукта. В таких ситуациях, нужно предоставить пользователям, пропустить обзор на этом этапе и смотреть обзор продукта дальше. Поэтому библиотека должна содержать кнопку «Пропустить», которая позволит пользователю пропустить обзор. Эта кнопка должна быть на каждом этапе пошагового обзора.
  • Завершить Знакомство с продуктом — когда пользователь заканчивает обзор, должен быть способ завершить обзор. Как правило, это будет последний шаг, который, должен иметь эффективный способ предоставить пользователю возможность приобрести осмотренный продукт (корзина). И должна быть кнопка сравнить, выбрать другой продукт для обзора.

Таковы общие черты пошагового обзора продукта. Далее, давайте рассмотрим некоторые из наиболее популярных библиотек JavaScript для создания продуктов на базе интерактивного обзора.

к меню ↑

Создание библиотеки «Знакомство с продуктом»

Существует несколько библиотек JavaScript для интерактивного обзора. Каждая из них уникальная по своему. Некоторые из наиболее популярных веб-серверов перечислены ниже:

Среди перечисленных библиотек, Intro.js предоставляет все необходимые функции для пошагового обзора продукта. В этой статье для примера мы будем использовать Intro.js.

к меню ↑

Обзора продукта с помощью Intro

Intro.js легкая open source библиотека для создания “step by step“ пошагового обзора на веб-сайтах. Вы можете скачать копию этой библиотеки с Github. После загрузки, распакуйте zip файл и попробовать пример.

Как правило, все функции и необходимая информация доступна на официальном сайте, и пошаговый обзор продукта используется, чтобы подчеркнуть особенности с дополнительной информацией. На этой странице, мы сделаем слегка измененный пошаговый обзор. Каждый объект будет отображаться по мере продвижения обзора. Давайте начнем с копирования необходимых файлов в новую папку нашего проекта.

к меню ↑

Добавить файлы Intro

Во-первых, мы должны добавить связанные файлы Intro.js в нашу папку проекта. Скопируйте intro.js и introjs.css в папку проекта.

к меню ↑

Создать файл HTML

Создайте новый файл index.html и подключите JavaScript и CSS файлы, как показано ниже.

<!DOCTYPE HTML>
<html lang="ru">
  <head>
  <meta charset="utf-8">
  <title>Подробный обзор продукта</title>
  <link href="introjs.css" rel="stylesheet">
 </head>
 <body>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="intro.js"></script>
</body>
</html>
к меню ↑

Проектирование

Как я упоминал ранее, все шаги будут скрыты за исключением первого шага. Кнопка «Начать обзор» нужна обязательно что бы запустить обзор — это первый шаг обзора. Кнопка реализована с помощью следующего кода.

<div class="main_container">
<div class="flexi_form_title">
<h1 data-step="1" data-intro="Форма обзора">Flexible Forms</h1>
<a id="flexi_form_start" href="javascript:void(0);">Start Tour</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="intro.js"></script>
<script>
$("#flexi_form_start").click(function() {
introJs().start();
});
</script>

Выше код должен быть вставлен между тегами документа HTML <body> и </body>. Обратите внимание, что нет стилей CSS для этого элемента. Вы можете найти код CSS в исходных файлах. На данный момент, в браузере вы должны увидеть:

Страница пошагового обзора
Начальная страница пошагового обзора

Intro.js использует атрибут пользовательских данных под названием data-step для определения обзора продукта. Это будет числовое значение используемое для определения порядка шагов. Существует также атрибут data-intro для пояснения каждого шага.

Сразу после нажатия кнопки, мы должны инициализировать обзор продукта, вызвав функции: introJs().start(). После нажатия кнопки «Начать обзор» откроется первый шаг обзора.

к меню ↑

Проектирование, Скрытые действия

После завершения первого шага, мы должны показать следующий набор шагов, которые спрятаны в ходе первоначальной загрузки страницы.

Поэтому давайте рассмотрим следующий код:

<div id="form_container">
<form data-step="2" data-intro="Гибкая форма формат по умолчанию с несколькими типами полей" 
style="display:none" data-position="bottom">
 <ul>
  <li data-step="3" data-position="left" data-intro="Встроенная проверка формы" >
  <div class='left'>Поле для текста</div><input type='text' />
</li>
  <li data-step="4" data-intro="Настраиваемые Формы, Макеты"><div class='left'>Раскрывающееся поле</div>
    <select>
     <option>Выбор 1</option>
     <option>Выбор 2</option>
    </select>
  </li>
  <li data-step="5" data-intro="Руководство для заполнения форм">
    <div class='left'>Поле для файла</div><input type='file' />
    <div class='right'>Отправить файл PDF</div>
  </li>
  <li><div class='left'>Указатель</div><input type='checkbox' /><input type='checkbox' /></li>
  <li><div class='left'>Раскрывающееся поле</div>
    <select>
     <option>Выбор 1</option>
     <option>Выбор 2</option>
    </select>
  </li>
</ul>
</form>
</div>

Этот блок кода вставляется после первого блока, элемент main_container будет скрыт initially. Этот блок содержит несколько шагов обзора продукта. Здесь, кроме того, мы использовали атрибуты данных положения, которые позволяют нам определить направление полей. Каждый шаг, должен показать элементы динамически. Так, мы используем пользовательский код JavaScript для фильтрации каждого шага в обзоре.

Рассмотрим следующий код:

$("#flexi_form_start").click(function() {
introJs().start().onbeforechange(function(targetElement) {
$(".steps").hide();
$(".left").css("float", "left");
$("input").removeClass("error");
$(".right").hide();

switch($(targetElement).attr("data-step")) {
case "2":
$(".flexi_form").hide();
$(targetElement).show();
break;
case "3":
$("input").addClass("error");
$(targetElement).show();
break;
case "4":
$(".left").css("float", "none");
$(targetElement).show();
break;
case "5":
$(".right").show();
$(targetElement).show();
break;
}
});
});

В Intro.js предусмотрена функция, называется она onbeforechange(), которая выполняется перед каждым шагом перехода. Для следующего шага, элемент будет передавать в качестве аргумента этой функции. Мы можем фильтровать шаги с помощью простого вызова switch, как показано в предыдущем коде. Затем мы добавим фильтр в каждый шаг внутри вызова switch и добавим необходимый код, чтобы увидеть характеристики продукта.

Это демо используется для иллюстрации обзора продукта. Большинство функций, напрямую не связанны с Intro.js. Пошаговый обзор продукта будет выглядеть примерно как на снимке.

Вид пошагового обзора
Вид следующих шагов интерактивного обзора

Вы можете просмотреть полное демо и исходный код в конце этой статьи.

к меню ↑

Осуществление полной функции

Как упоминалось ранее, важно призывать действовать пользователя по окончании обзора. Здесь, мы будем перенаправить пользователя на другую страницу, после нажатия кнопки «Выбор сделан».

Это делается с помощью следующего кода:

introJs().start().oncomplete(function() {
window.location.href = "complete.html";
}).onbeforechange(function(targetElement) {
// Остальной код
})

В Intro.js метод oncomplete() используется для выполнения кода, завершив знакомство с продуктом. Метод вызывается, когда на последнем шаге пользователь щелкает кнопку «Выбор сделан». Вот тогда, перенаправляем пользователя на другую страницу. Вы должны постараться, что бы пользователю захотелось нажал эту кнопку.

к меню ↑

Внедрение функции «Пропустить»

Пользователи должны иметь возможность пропустить обзор в любом месте пошагового обзора, для этого на каждом шаге, существует кнопка «Пропустить», за исключением последнего шага. Intro.js использует onexit() способ пропустить. Следующий код был изменен, чтобы включить вызов onexit().

introJs().start().oncomplete(function() {
window.location.href = "complete.html";
}).onexit(function() {
window.location.href = "complete.html";
}).onbeforechange(function(targetElement) {
// Остальной код
})
к меню ↑

Заключение

В этой статье Вы узнали все основные функциональные возможности библиотеки Intro.js для пошагового обзора продукта. Вы можете скачать исходный код и посмотреть демо, по следующим ссылкам.

Скачать исходный код

Посмотреть Демо

Теперь, у вас есть возможность продвинуть свой продукт, используя удивительный JavaScript для пошагового обзора продукта.