JavaScript события в Woocommerce при добавлении в корзину, покупке и не только

В отличии от классической установки Google Analytics в WordPress интеграция Tag Manager от Гугла является чуть более сложной процедурой. Он, как я понимаю, используется для более комплексного отслеживания конверсий и подобных вещей. Вам нужно внедрить определенный код в зависимости от срабатывания тех или иных событий: добавления товара в корзину, перехода к оплате, совершения заказа и т.д. Реализуется это с помощью Javascript и некоторых особенностей Woocommerce.

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

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

Список решений:

• Выполнение jQuery для вариаций товаров (ссылка на другой пост).
• Событие added_to_cart при добавлении в корзину.
• Обычный Javascript для кнопки купить (альтернатива предыдущему варианту).
• Хук woocommerce_add_to_cart.
• Обработка события при оформлении заказа через хук woocommerce_thankyou.
• JS-валидация до создания заказа.
• Разные Javascript триггеры для Woocommerce.

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

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

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_shop() || is_product_category() || is_product_tag() ): // Only for archives pages
        ?>
            <script type="text/javascript">
                // Ready state
                (function($){ 
 
                    $( document.body ).on( 'added_to_cart', function(){
                        console.log('EVENT: added_to_cart');
                    });
 
                })(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
            </script>
        <?php
    endif;
}

Здесь вы можете видеть хук добавления jQuery кода в футер. Обратите внимание, что в функции имеется условный оператор Woocommerce для ее интеграции только на архивных страницах (без единичной записи!).

Суть метода в использовании триггера added_to_cart, который запускается после клика пользователя по кнопке «Купить».

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

Обычный Javascript для кнопки купить

Я выбрал этот способ, т.к все отлично и без проблем работает. В коде будет 2 варианта внедрения скрипта, чуть ниже объясню чем они отличаются.

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_shop() || is_product_category() || is_product_tag() ): 
        ?>
            <script type="text/javascript">
				jQuery(document).ready(function($){
				    $('.add_to_cart_button').click(function(){
				    	// alert("category add");
				    	// ваш_код
				    });
				});
            </script>
        <?php
    endif;
 
    if ( is_product() ): 
        ?>
            <script type="text/javascript">
				jQuery(document).ready(function($){
				    $('.single_add_to_cart_button').on('click', function() { 
				        // alert("single add");
				        // ваш_код
				    });
				});
            </script>
        <?php
    endif;
}

И там, и там, мы обрабатываем событие нажатия на кнопку добавления в корзину. Обратите внимание, что на разных страницах у них разные классы — add_to_cart_button и single_add_to_cart_button (у вас могут быть другие).

Так вот второй вариант лучше, поскольку он позволяет в одной функции “привязать” несколько событий к нескольким элементам, а не плодить новые функции. Не знаю с чем это связано, но работает именно так. 

Хук woocommerce_add_to_cart

Здесь, в принципе, информации не особо много. Применить метод можете следующим образом.

add_action('woocommerce_add_to_cart', 'custome_add_to_cart');
function custome_add_to_cart() {
    global $woocommerce;
.... ваши действия ...
}

Очевидно, что он создавался не для JS-событий аналитики, а просто позволяет решать какие-то задачи, связанные с магазином/каталогом товаров.

Опять же тут есть важный момент по редиректу в корзину, если вы все же хотите работать с Javascript-событиям (информация может не отобразится, т.к. сразу будет выполняться перенаправление пользователя).

Опция отключается в настройках плагина, если что. 

Событие при оформлении заказа через хук woocommerce_thankyou

Насколько я понимаю, хук woocommerce_thankyou выполняется при появлении страницы “Спасибо вашу покупку”. А по логике работы магазина она отобразится только после успешного совершения заказа, поэтому нам подходит.

add_action('woocommerce_thankyou', 'my_thankyou_event', 10, 1);
function my_thankyou_event( $order_id ) {
    if ( ! $order_id )
        return; ?>
 
   	<script type="text/javascript">
   		// alert("thank you");
   		// ваш_код
    </script>
<?php 
}

Дальше — больше. 

JavaScript-валидация до создания заказа

Методика немного отличается от того, что мне вообще сегодня нужно было сделать, но может оказаться полезной в другой ситуации. Здесь вы «вклиниваетесь» в процесс заказа, после успешной валидации всех полей, но до фактического его совершения.

Зачем это нужно? – добавить свои какие-то кастомные проверки и манипуляции. Тут найдено 2 примера реализации, но подход у них одинаковый и состоит из 3х шагов.

• Hooking After Validation but Before Order Create in Woocommerce Checkout.
• Hooking into WooCommerce’s checkout JS events.

По второй ссылке сделаю скриншот на всякий случай, если вдруг сайт-источник перестанет существовать.

Ну, и вишенка на торте…

Разные Javascript триггеры для Woocommerce

В этой теме около 20-ти триггеров плагина, срабатывающих в тех или иных ситуациях. Здесь используется такая же методика, как и в первом примере. Общая конструкция выглядит так:

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 для страницы оплаты:

$( 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' );

События для корзины (cart):

$( 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 ] );

Единичная страница товара:

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

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

$( 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 метод оплаты:

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

Надеюсь, информация будет вам полезна. Если есть что добавить про Javascript-событиям, пишите в комментариях.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 13, средний балл: 4,31 из 7)

Загрузка...

Категории: WooCommerce;
Теги: вордпресс веб-разработка, интернет-магазин, корзина WooCommerce, решение задач wordpress, сниппеты.