Создание Intro.js Powered Tours в WordPress

 function wpintro_manage_steps_display() { $step_data = get_option('wpi_step_data', ''); if ($step_data != '') { $step_data = unserialize($step_data); } echo "<div id='sortable'>"; foreach ($step_data as $key => $data) { echo "<div class='wip_sort' style='margin:5px; border:2px solid; background: #fff;' data-identifier=" . $key . " > <ul> <li>" . $data['url'] . "</li> <li>" . $data['desc'] . "</li> <li>" . $data['id'] . "</li> </ul> </div>"; } echo "</div>"; } 

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

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

 function wpintro_admin_scripts() { wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-sortable'); wp_register_script('wpintro_admin', plugin_dir_url(__FILE__) . 'admin.js', array('jquery')); wp_enqueue_script('wpintro_admin'); $config_array = array( 'ajaxURL' => admin_url('admin-ajax.php'), ); wp_localize_script('wpintro_admin', 'conf', $config_array); } add_action('admin_enqueue_scripts', 'wpintro_admin_scripts'); 

Рекомендуется использовать admin_enqueue_scripts действия admin_enqueue_scripts для назначения сценариев и стилей, необходимых для раздела администратора. Здесь мы использовали wp_enqueue_script для ядра пользовательского интерфейса jQuery и сортируемых исходных файлов, так как они доступны по умолчанию внутри ядра WordPress. Мы должны использовать функции wp_register_script и wp_enqueue_script , так как admin.js — это пользовательский файл JavaScript. Наконец, мы используем функцию wp_localize_script для добавления необходимых данных конфигурации в admin.js .

Давайте посмотрим на файл admin.js (показанный ниже) для обработки порядка сортировки шагов.

 jQuery(document).ready(function() { jQuery("#sortable").sortable({ update: function() { var selected_ids = ""; jQuery(".wip_sort").each(function() { selected_ids += jQuery(this).attr("data-identifier")+"@"; }); jQuery.post(conf.ajaxURL, { action: "wpintro_update_step_order", data: selected_ids, }, function(data) { }, "json"); } }); jQuery("#sortable").disableSelection(); }); 

Мы #sortable сортируемую функциональность в контейнере #sortable . Все основные элементы div внутри контейнера #sortable получат функции перетаскивания. Мы можем переместить элементы div чтобы установить правильный порядок шагов. Пользовательский интерфейс jQuery будет выполнять функцию update каждый раз, когда мы перемещаем элементы путем перетаскивания.

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

 add_action( 'wp_ajax_nopriv_wpintro_update_step_order', 'wpintro_update_step_order'); add_action('wp_ajax_wpintro_update_step_order', 'wpintro_update_step_order'); function wpintro_update_step_order() { $step_data = get_option('wpi_step_data', ''); $step_data = unserialize($step_data); $updates_step_order = array(); $step_order = explode('@', $_POST['data']); array_pop($step_order); for ($i = 0; $i < count($step_order); $i++) { $updates_step_order[$step_order[$i]] = $step_data[$step_order[$i]]; } $step_data = serialize($updates_step_order); update_option('wpi_step_data', $step_data); echo json_encode($updates_step_order); exit; } 

Функция wpintro_update_step_order используется для обработки запросов AJAX на стороне сервера. Сначала мы извлекаем существующие данные шага из базы данных. Затем мы перебираем идентификаторы шага и переставляем данные шага в соответствии с обновленным порядком. Наконец, мы сохраняем обновленные данные шага в базе данных.

Мы завершили бэкэнд-функциональность продукта. На данный момент у нас есть все данные о шаге продукта для реализации тура. В следующем разделе мы рассмотрим реализацию продукта на веб-интерфейсе.

Интеграция данных шага с Intro.js

Пришло время составить обзор продукта, используя существующие данные шага с Intro.js. Во-первых, мы должны включить файлы JavaScript и CSS с данными конфигурации. Я предполагаю, что вы уже прочитали предыдущее руководство и загрузили файлы, связанные с Intro.js. Скопируйте файлы intro.js и introjs.css в папку wpintrojs . Следующий код показывает включение файлов сценариев в веб-интерфейс.

 add_action('wp_enqueue_scripts', 'wpintro_enqueue_script'); function wpintro_enqueue_script() { wp_enqueue_script('jquery'); wp_register_script('introjs', plugin_dir_url(__FILE__) . 'intro.js'); wp_enqueue_script('introjs'); wp_register_style('introjscss', plugin_dir_url(__FILE__) . 'introjs.css'); wp_enqueue_style('introjscss'); wp_register_script('wpintro_custom', plugin_dir_url(__FILE__) . 'custom.js', array('jquery')); wp_enqueue_script('wpintro_custom'); $step_data = get_option('wpi_step_data', ''); $step_data = unserialize($step_data); $step_data = array_values($step_data); $stepdata_array = array( 'steps' => json_encode($step_data), ); wp_localize_script('wpintro_custom', 'stepData', $stepdata_array); } 

Мы использовали admin_enqueue_scripts для включения внутреннего скрипта. wp_enqueue_scripts — рекомендуемое действие для включения скриптов во wp_enqueue_scripts интерфейс. В последнем разделе мы получаем данные шага из базы данных и назначаем их новому файлу JavaScript с именем custom.js в виде строки в кодировке JSON. Наконец, нам нужно создать файл custom.js и включить следующий код для инициализации custom.js продукта.

 jQuery(document).ready(function() { var currentstep = 0; if(QueryString.currentstep){ currentstep = QueryString.currentstep; } var steps_json = stepData.steps; var wip_index=0; steps_json = jQuery.parseJSON(steps_json); jQuery.each(steps_json, function(k, v) { wip_index++; jQuery("#"+v.id).attr("data-step", wip_index).attr("data-intro", v.desc).attr("data-url", v.url); }); jQuery("#flexi_form_start").click(function() { introJs().setOption("doneLabel", "Next page").start().oncomplete(function() { window.location.href = steps_json[currentstep].url + "?multipage=true&currentstep=" + currentstep; }).onbeforechange(function(targetElement) { currentstep = jQuery(targetElement).attr("data-step"); }); }); }); 

Сначала мы устанавливаем текущий шаг на ноль. Мы используем пользовательскую функцию QueryString для получения параметров запроса из URL. Вы можете найти реализацию функции QueryString в папке с исходными кодами.

Затем мы передаем данные шага через функцию jQuery.parseJSON чтобы создать объект JavaScript. Далее мы должны добавить специфические атрибуты данных Intro.js к элементам шага. При циклическом просмотре данных шага мы находим элемент с заданным идентификатором и присваиваем атрибуты данных, используя значения в steps_json

Наконец, мы инициализируем Intro.js по нажатию кнопки, как мы делали в предыдущем уроке. Здесь он немного отличается от предыдущего урока, поскольку мы используем обзор продукта по нескольким страницам вместо отдельной страницы. Следовательно, мы устанавливаем URL-адрес страницы с multipage атрибутом Intro.js после завершения первой страницы. Также мы меняем значение currentstep шага на каждом шаге изменения.

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

 if (RegExp("multipage", "gi").test(window.location.search)) { var introObj = introJs(); introObj.setOption("doneLabel", "Next page").start().oncomplete(function() { if (steps_json[currentstep]) { window.location.href = steps_json[currentstep].url + "?multipage=true&currentstep=" + currentstep; } }).onbeforechange(function(targetElement) { currentstep = jQuery(targetElement).attr("data-step"); if (steps_json.length <= (parseInt(currentstep) + 1)) { introObj.setOption("doneLabel", "Done"); } }); } 

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

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

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

 <a id="flexi_form_start">Start Tour</a> 

Расширение плагина

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

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

Вывод

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

Скачать исходные коды
Предварительный просмотр демо

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