Список событий JS на фронтенде WooCommerce

Вопрос или проблема

Где я могу найти исчерпывающий список событий Javascript, определяемых WooCommerce (например, события, как woocommerce_variation_has_changed)?

В поисках того же самого я немного погрузился в исходные файлы JS.

События Javascript WooCommerce

События JS при оформлении заказа WooCommerce

$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );

События JS на странице корзины WooCommerce

$( document.body ).trigger( 'wc_cart_emptied' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_wc_div' );
$( document.body ).trigger( 'updated_cart_totals' );
$( document.body ).trigger( 'country_to_state_changed' );
$( document.body ).trigger( 'updated_shipping_method' );
$( document.body ).trigger( 'applied_coupon', [ coupon_code ] );
$( document.body ).trigger( 'removed_coupon', [ coupon ] );

События JS на странице одиночного продукта WooCommerce

$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );

События JS на странице изменяемого продукта WooCommerce

$( document.body ).trigger( 'found_variation', [variation] );

События JS при добавлении в корзину WooCommerce

$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'removed_from_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'wc_cart_button_updated', [ $button ] );
$( document.body ).trigger( 'cart_page_refreshed' );
$( document.body ).trigger( 'cart_totals_refreshed' );
$( document.body ).trigger( 'wc_fragments_loaded' );

События JS при добавлении метода оплаты WooCommerce

$( document.body ).trigger( 'init_add_payment_method' );

Чтобы привязать слушателя к этим событиям, используйте:

jQuery('<event_target>').on('<event_name>', function(){
    console.log('<event_name> triggered');
});

Например:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // now.do.whatever();
});

Чтобы найти полный список всех событий (и быть в курсе добавленных новых), вы можете обратиться к файлам .js в каталоге: /wp-content/plugins/woocommerce/assets/js/frontend

Ниже я перечисляю другие события (в дополнение к ответу @jgangso):

ВАРИАЦИИ

  • hide_variation срабатывает, когда отображаемые данные вариации сбрасываются
  • show_variation срабатывает, когда найдена вариация, которая соответствует всем атрибутам
  • woocommerce_variation_select_change срабатывает при изменении поля атрибута
  • woocommerce_variation_has_changed срабатывает, когда выбор вариации был изменен
  • check_variations срабатывает:
    • когда изменяется поле атрибута
    • когда данные вариации перезагружаются из DOM
  • woocommerce_update_variation_values срабатывает, когда вариации были обновлены
  • woocommerce_gallery_reset_slide_position сбрасывает позицию слайда, если у вариации изображение отличается от текущего
  • woocommerce_gallery_init_zoom устанавливает изображения продукта для выбранной вариации

ФРАГМЕНТЫ КОРЗИНЫ

  • wc_fragments_refreshed срабатывает, когда обновление фрагментов корзины через Ajax прошло успешно
  • wc_fragments_ajax_error срабатывает, когда обновление фрагментов корзины через Ajax провалилось
  • wc_fragment_refresh обновление при показе страницы после нажатия кнопки “назад” (Safari)
  • wc_fragments_loaded срабатывает после загрузки фрагментов корзины

ВЫБОР СТРАНЫ (ОФОРМЛЕНИЕ ЗАКАЗА)

  • country_to_state_changed срабатывает, когда страна изменяется в поле выбора
  • country_to_state_changing и wc_address_i18n_ready обрабатывают локализацию

ОДИНОЧНЫЙ ПРОДУКТ

  • wc-product-gallery-before-init срабатывает перед инициализацией всех галерей на странице
  • wc-product-gallery-after-init срабатывает после инициализации всех галерей на странице

ПОЛЗУНОК ЦЕНЫ

  • price_slider_updated срабатывает после обновления ползунка цены
  • price_slider_create срабатывает после создания ползунка цены
  • price_slider_slide срабатывает после перемещения ползунка цены
  • price_slider_change срабатывает после изменения ползунка цены

Связанные ответы:

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

jQuery(document.body).on(
  "init_checkout payment_method_selected update_checkout updated_checkout checkout_error applied_coupon_in_checkout removed_coupon_in_checkout adding_to_cart added_to_cart removed_from_cart wc_cart_button_updated cart_page_refreshed cart_totals_refreshed wc_fragments_loaded init_add_payment_method wc_cart_emptied updated_wc_div updated_cart_totals country_to_state_changed updated_shipping_method applied_coupon removed_coupon",
  function (e) {
    console.log(e.type)
  }
)

Если вы хотите использовать параметры в вашем коде, вот пример

jQuery(document.body).on("wc_cart_button_updated", function (e, $button) {
    console.log($button);
});

Ответ или решение

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

Теория: Использование JavaScript событий в WooCommerce

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

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

Примеры: Перечень JavaScript событий в WooCommerce

Согласно данным, приведенным выше, события в WooCommerce можно классифицировать по нескольким категориям, исходя из того, где именно в магазине они применяются.

1. События оформления заказа

  • init_checkout — инициализация этапа оформления заказа.
  • payment_method_selected — выбран метод оплаты.
  • update_checkout и updated_checkout — обновление информации при оформлении заказа.
  • checkout_error — произошло ошибка при оформлении.
  • applied_coupon_in_checkout и removed_coupon_in_checkout — применение и удаление купонов при оформлении.

2. События страницы корзины

  • wc_cart_emptied — очищена корзина.
  • update_checkout и updated_wc_div — обновление интерфейса корзины.
  • updated_cart_totals — обновлены итоги корзины.
  • country_to_state_changed — изменение страны для расчета доставки.
  • updated_shipping_method — обновлен метод доставки.
  • applied_coupon и removed_coupon — применение и удаление купонов.

3. События страницы отдельного товара

  • init — инициализация вкладок и рейтингов.

4. События для переменных товаров

  • found_variation — найдена вариация товаров.

5. События добавления товара в корзину

  • adding_to_cart и added_to_cart — различные стадии добавления товара.
  • removed_from_cart — товар удален из корзины.
  • wc_cart_button_updated — обновление состояния кнопок корзины.
  • cart_page_refreshed и cart_totals_refreshed — обновление страницы и итогов корзины.
  • wc_fragments_loaded — фрагменты корзины загружены.

6. События добавления метода оплаты

  • init_add_payment_method — инициализация добавления метода оплаты.

Кроме того, существуют другие события, относящиеся к вариациям товаров, обновлениям фрагментов корзины и работе с полями выбора страны на странице оформления заказа.

Применение: Как работать с этими событиями

Чтобы эффективно использовать описанные события, разработчик может привязывать обработчики к ним, используя jQuery:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // Дополнительная логика
});

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

Кроме того, исследование исходных файлов JavaScript WooCommerce, расположенных в /wp-content/plugins/woocommerce/assets/js/frontend, может дать более полное представление о доступных событиях и их предназначении. Это полезно для обеспечения актуальности кода в условиях постоянного обновления и добавления нового функционала в WooCommerce.

В заключение, понимание и использование JavaScript событий в WooCommerce позволяет создать более адаптивные и кастомизированные интернет-магазины, соответствующие высоким стандартам пользовательского опыта и бизнес-логики.

Оцените материал
Добавить комментарий

Капча загружается...