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

Question

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

4 июл. 2019 г., 12:35:17

Просмотры: 75.9K

Голосов: 42

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

ZecKa

778

woocommerce offtopic javascript jquery

Все ответы на вопрос

Комментарии

Спасибо за ответ, именно это я и искал. Вернусь сюда, если найду другие события.

ZecKa

8 нояб. 2019 г. 14:52:17

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

Badger

12 мар. 2020 г. 16:50:29

@Badger Что именно не работает? На какой странице вы работаете и проверяли ли вы, что скрипты WooCommerce загружаются?

jgangso

16 мар. 2020 г. 11:05:15

В консоль ничего не записывается, когда я добавляю что-то в корзину на странице товара, используя следующий код: jQuery(function() { // Товар добавлен в корзину jQuery('body').on('added_to_cart', function(){ console.log('Товар добавлен в корзину'); }); }); Скрипты, кажется, загружаются. Я подключил свой скрипт с зависимостью от 'woocommerce'.

Badger

17 мар. 2020 г. 19:03:58

@Badger извините, я совсем забыл вам ответить. Для тех, кто может столкнуться с такой же проблемой: по умолчанию Woocommerce выполняет полную перезагрузку страницы при событии добавления в корзину, поэтому JS-событие никогда не срабатывает. Если вы включите добавление в корзину через AJAX в настройках WC, вы также получите JS-событие.

jgangso

13 авг. 2020 г. 12:56:28

Показать остальные 4 комментариев

Чтобы найти полный список всех событий (и быть в курсе любых новых добавленных) вы можете обратиться к .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 срабатывает после изменения слайдера цен

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

Где найти полный список Javascript (JQuery) событий, которые срабатывают на странице администрирования WooCommerce?

Vincenzo Di Gaetano

293

14 мар. 2021 г. 01:28:40

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

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)
  }
)

David Wolf

283

29 авг. 2022 г. 12:00:11

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

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

Andrew Schultz

233

29 июн. 2023 г. 11:43:45

jgangso 1.57K · Accepted Answer · 2019-11-08T14:02:16Z

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

JavaScript события WooCommerce

События 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' );

События 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 ] );

События WooCommerce на странице товара

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

События WooCommerce для вариативных товаров

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

События 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' );

События 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');
    // теперь.делаем.что.угодно();
});