Skip to main content

PageTriggers

Класс основывается на BaseTrigger и добавляет ему возможность вставки js кода триггеров в футер страницы.

Данный класс работает совместно с классом TemplatesTriggers, который извлекает триггеры из всех шаблонов на странице (jet plugin шаблоны, theme builder шаблоны, elementor template виджеты).

Список событий, которые можно обработать на странице:

  • Старт страницы - загрузка страницы курса или ее открытие (включая повторные)
  • Переменная изменена - в курсе изменилась переменная
  • Клик по элементу - элемент определяется с помощью css селектора
  • Клик вне элемента - элемент определяется с помощью css селектора
  • Наведение на элемент - элемент определяется с помощью css селектора
  • Наведение вне элемента - элемент определяется с помощью css селектора
  • Попадание элемента в область видимости - элемент определяется с помощью css селектора
  • Виджет пройден - различные виджеты по разному считаются пройденными - quiz, media и forms. Виджет определяется по id и может находиться на другой странице курса

generate_script()​

Генерирует js код на основе всех триггеров из текущего документа, собранных в классе TemplatesTriggers и в классе AdditionalPageTriggers. Для каждого триггера происходит последовательно несколько действий:

  • Генерируется js код триггера - метод BaseTrigger::render_action
  • Код оборачивается в опции - метод Options::apply_options
  • Код оборачивается в условия - BaseTrigger::add_conditions Далее js код всех триггеров оборачивается в обертку с ожиданием инициализации всех зависимостей:
jQuery(window).on('elementor/frontend/init', function() {  
    elementorFrontend.on( 'components:init', function() {      
	    const \$store = {get cw() {return Alpine.store('cw')},get timer() {return Alpine.store('timer')}};      
	    setTimeout(() => {            
			{$trigger_str}  
            setTimeout(()=>window.dispatchEvent(new CustomEvent('pageTriggersInited')))//Skip one tick to save data from triggers to \$store.  
      }, 100)    
    });
});

Немного про const $store: В триггерах виджетов код для получения Alpine cw store выглядит вот так $store.cw.<path_to_var>. Это работает благодаря тому, что Alpine автоматически прокидывает переменную $store во все свои атрибуты. При генерации кода в теге script в футере, $store недоступна и Alpine предлагает использовать вот такой синтаксис Alpine.store('cw'), для получения данных курса. Но чтобы сохранить единый код триггеров для виджетов и страниц было принято решение прокинуть переменную $store со свойством cw в сгенерированный в футере триггеры

Остальные методы​

Остальные методы класса описывают опции триггеров для страницы и генерацию js кода для выбранных опций