(function ($) {
if (!('azexo_tutorials' in window)) {
window.azexo_tutorials = {};
}
window.azexo_tutorials['how_to_start'] = [
{
'type': 'information',
'label': 'Dashboard'
+ ''
+ 'Welcome to the Dashboard interactive tutorial.
'
+ 'In this step by step guide, we will show you how to start.
'
+ '
'
+ 'Start',
'target': 'body',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Add sections to pages'
+ ''
+ 'Here you can add new AZEXO sections to product/collection/article pages.
'
+ 'Also you can override sections which provide theme.
'
+ 'You can click on this button or go to next step.'
+ '
'
+ 'Next',
'target': '.azd-customize a',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Override pages/templates'
+ ''
+ 'Here you can override template which theme provide.
You can disable original template and create new instead.
By elements from scratch.'
+ '
'
+ 'Next',
'target': '.azd-sidebar-menu',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Create page'
+ ''
+ 'Let\'s create one page.
'
+ 'Click here for switch to pages list.'
+ '
',
'target': '.azd-dialog-toggle[href="#azd-pages"]',
'event_el': '.azd-dialog-toggle[href="#azd-pages"]',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Create page'
+ ''
+ 'Click here for create blank page.'
+ '
',
'target': '#azd-pages .azd-create-blank',
'event_el': '#azd-pages .azd-create-blank',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Create page'
+ ''
+ 'Enter page name then click "OK"'
+ '
',
'target': '.azd-modal',
'event_el': '.azd-modal .azd-modal-ok',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'What you can do with page'
+ ''
+ 'Click for view page.
'
+ 'It will be empty if it new'
+ '
',
'target': 'table.azd-pages tbody tr:first-child .azd-actions .azd-view',
'event_el': 'table.azd-pages tbody tr:first-child .azd-actions .azd-view',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'What you can do with page'
+ ''
+ 'Click here to open page in builder'
+ '
',
'target': 'table.azd-pages tbody tr .azd-actions .azd-edit:not(.azd-convert)',
'event_el': 'table.azd-pages tbody tr .azd-actions .azd-edit:not(.azd-convert)',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'information',
'label': 'Finish'
+ ''
+ 'By same way you can work with other templates'
+ '
'
+ 'Done',
'target': 'body',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'animation': 'fade',
},
];
window.azexo_tutorials['builder'] = [
{
'type': 'information',
'label': 'Page Builder'
+ ''
+ 'Welcome to the Page Builder interactive tutorial.
'
+ 'In this step by step guide, we will show you how to start.
'
+ '
'
+ 'Start',
'target': 'body',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Actions panel'
+ ''
+ 'First of all you need add new section.
'
+ 'You can do it via main actions panel.
'
+ '
'
+ 'Next',
'target': '.azh-library-actions',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Sections manager'
+ ''
+ 'Move mouse to this place.
'
+ 'It will open sections manager.
'
+ '
',
'target': '.azh-library-actions .azh-builder',
'event_el': '.azh-library-actions .azh-builder',
'event': 'hover.tut',
'func_end': function(){
$('#azexo-html-library').addClass('azh-hover');
},
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Add empty section'
+ ''
+ 'Click here to open available empty sections list.'
+ '
',
'target': '.azh-add-section[data-category="empty rows"]',
'event_el': '.azh-add-section[data-category="empty rows"]',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Add empty section'
+ ''
+ 'Click here for add new section to page.'
+ '
',
'target': '.azh-library .azh-sections .azh-section[data-path="empty rows/2 columns.html"]',
'event_el': '.azh-library .azh-sections .azh-section[data-path="empty rows/2 columns.html"]',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Page sections'
+ ''
+ 'Here you can see all added sections to page.
'
+ 'You can re-order them or remove.
'
+ '
'
+ 'Next',
'target': '#azexo-html-library .azh-structure',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Expand page sections list'
+ ''
+ 'When you page will have many sections.
'
+ 'You can collapse sections library by clicking on this button.
'
+ '
'
+ 'Next',
'target': '#azexo-html-library .azh-section-operations',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'func_end': function(){
$('#azexo-html-library').removeClass('azh-hover');
},
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Save page'
+ ''
+ 'You can save your changes by clicking on this button.
'
+ 'Click it for test.'
+ '
',
'target': '#azexo-html-library .azh-library-actions .azh-save',
'event_el': '#azexo-html-library .azh-library-actions .azh-save',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Section settings'
+ ''
+ 'Click on this button to open section settions.'
+ '
',
'target': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
var $controls = $section.data('azh-controls');
return $controls.find('.azh-utility-wrapper');
},
'event_el': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
var $controls = $section.data('azh-controls');
return $controls.find('.azh-utility-wrapper');
},
'event': 'click.tut',
'func_start': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
azh.window.scrollTop($section.offset().top + azh.window.height() / 2);
var $controls = $section.data('azh-controls');
$section.trigger('mouseenter');
},
'pos': 'left',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Section settings'
+ ''
+ 'Here you can change section settings.
'
+ 'Each section have such settings.'
+ '
'
+ 'Next',
'target': '.azh-controls-container .azh-section-controls.azh-active .azh-utility',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Add new element'
+ ''
+ 'Lets add new element. Click here.'
+ '
',
'target': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
return $section.find('[data-element=""]').first();
},
'event_el': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
return $section.find('[data-element=""]').first();
},
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Switch tab'
+ ''
+ 'Lets choose content elements type. Click here.'
+ '
',
'target': '#simplemodal-container .azh-tabs-buttons > span[data-category="content"] a',
'event_el': '#simplemodal-container .azh-tabs-buttons > span[data-category="content"] a',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Add image element'
+ ''
+ 'Click on this button to add image element.'
+ '
',
'target': '#simplemodal-container [data-path="content/image.htm"]',
'event_el': '#simplemodal-container [data-path="content/image.htm"]',
'event': 'click.tut',
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Context menu'
+ ''
+ 'Click right mouse button to open context menu for this part of page'
+ '
',
'target': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
return $section.find('[data-element="content/image.htm"] img').first();
},
'event_el': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
return $section.find('[data-element="content/image.htm"] img').first();
},
'event': 'contextmenu.tut',
'func_end': function () {
setTimeout(function(){
$('.azh-context-menu .azh-remove').css('pointer-events', 'none');
});
},
'pos': 'bellow',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Context menu'
+ ''
+ 'Here you can change most important settings.
'
+ 'Change image for example'
+ '
'
+ 'Next',
'target': '.azh-context-menu',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'left',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Element settings'
+ ''
+ 'Click on this button to open element settions.'
+ '
',
'target': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
var $element = $section.find('[data-element="content/image.htm"]').first();
var $controls = $element.data('azh-controls');
return $controls.find('.azh-utility-wrapper');
},
'event_el': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
var $element = $section.find('[data-element="content/image.htm"]').first();
var $controls = $element.data('azh-controls');
return $controls.find('.azh-utility-wrapper');
},
'event': 'click.tut',
'func_start': function () {
var $section = azh.$(azh.body.find('.azh-content-wrapper [data-section]:last-child').get(0));
var $element = $section.find('[data-element="content/image.htm"]').first();
var $controls = $element.data('azh-controls');
$element.trigger('mouseenter');
},
'pos': 'right',
'animation': 'fade',
},
{
'type': 'action',
'label': 'Element settings'
+ ''
+ 'Here you can change element settings.
'
+ 'It works by same way as for sections.
'
+ 'Each element have such settings.'
+ '
'
+ 'Next',
'target': '.azh-controls-container .azh-element-controls.azh-active .azh-utility',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'pos': 'right',
'animation': 'fade',
},
{
'type': 'information',
'label': 'Thank you'
+ ''
+ 'Thank you for watching this tutorial.
'
+ 'And thank you for using our product.'
+ '
'
+ 'Finish',
'target': 'body',
'event_el': '.az-tut-proceed',
'event': 'click.tut',
'animation': 'fade',
},
];
})(jQuery);