Верх страницы
Обложка к записи Оповещение «Товар добавлен в корзину» в WooCommerce
Время для прочтения: 0 мин. 32 сек.

Оповещение «Товар добавлен в корзину» в WooCommerce

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

Снппет можно добавить в любой имеющийся у вас в дочерней теме скрипт:

jQuery( function( $ ) {
    // Цепляемся за событие adding_to_cart
    $( document.body ).on( 'adding_to_cart', function( event, button ) {
        // Выцепляем инициатора события (ссылка/кнопка)
        var $btn = $( button[0] );

        // Пытаемся найти в вёрстке название товара
        var product_title = $btn.parents( 'li.product' ).find( '.woocommerce-loop-product__title' ).text();

        if ( product_title ) {
            // Формируем шаблон попапа
            var tpl = '';
            tpl += '<p>Товар "' + product_title + '" добавлен в корзину</p>';
            tpl += '<div>';
            tpl += '<a class="button" onclick="jQuery.unblockUI();">Продолжить</a>';
            tpl += '<a href="/shop/cart/" class="button alt">Оформить</a>';
            tpl += '</div>';

            // Выводим шаблон в модальное окно.
            // Используем blockUI из WooCommerce
            $.blockUI({
                message: tpl,
                timeout: 4000,
                css: {
                    width: '300px',
                    border: 0,
                    padding: 30
                }
            } );
        }
    } );
} );

Также этот сниппет можно вставить на страницу при помощи хука wp_footer внутри файла functions.php вашей активной темы:

add_action(
    'wp_footer',
    function() {
        ?>
        <script>тут сниппет из примера выше</script>
        <?php
    }
);

Стили модального окна можно настроить по вашему вкусу, например в кастомайзере самого WordPress.

Комментарии
Подписаться
Уведомить о
guest

14 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Elena Korobova
2 лет назад

А как сделать так, чтобы это модальное окно не исчезало, перенаправляясь в корзину, а дожидалось реакции пользователя?

Олег
Олег
2 лет назад

Михаил, а как вообще удалить это сообщение? Ищу в интренете, все ссылаются на вкладку «Уведомления магазина» в настройках, но не могу её найти

сергей
сергей
2 лет назад

как сделать, что бы сообщение выводилось не во всплывающем модальном окне, а на самой странице в Категории товаров?

Владислав Годунов
2 лет назад

Правильнее будет цепляться за событие added_to_cart. Ведь adding, это всего лишь процесс добавления, об успешности он нам ничего не говорит. Параметры для события будут следующими:

$(document.body).on(
    'added_to_cart',
    function(event, fragments, cash, button) {}
);
Руслан
Руслан
1 год назад

а почему появляется колесо прокрутки пока окно открыто? какие то скрипты не успевают подгружаться?

Светлана
Светлана
1 год назад
Ответить на  Кобзарёв Михаил

У меня тоже колесо прокрутки, не могу понять в чем дело

Алексей
Алексей
6 дней назад

Михаил, спасибо за функцию. Подскажите, пожалуйста, по двум вопросам:

  1. А как сделать инициатором события ссылку? Вот здесь »   

 Выцепляем инициатора события (ссылка/кнопка)
    var $btn = $( button[0] );
2.Как можно задействовать эту функцию в разных местах? А именно, например, на главной и в каталоге? (на главной выведены популярные товары стандартным методом). Почему спрашиваю, получается вот эта строка:
    // Пытаемся найти в вёрстке название товара
    var product_title = $btn.parents( ‘li.product’ ).find( ‘.woocommerce-loop-product__title’ ).text();
Не будет срабатывать, т.к. в вышеупомянутых случаях разные классы у родителя и ссылки.

Алексей
Алексей
6 дней назад
Ответить на  Кобзарёв Михаил

Михаил, спасибо за ответ. Добавил, получилось так:

        var $btn = $( button[0] );
 
        // Пытаемся найти в вёрстке название товара
        var product_title = $btn.parents( 'li.product' ).find( '.woocommerce-loop-product__title' ).text();
		var product_title2 = $btn.parents( 'a.wc-block-grid__product-link' ).find( '.wc-block-grid__product-title' ).text();
 
        if ( product_title || product_title2) {
            // Формируем шаблон попапа
            var tpl = '';
            tpl += '<p>Товар "' + product_title + '" добавлен в корзину</p>';
            tpl += '<div>';
            tpl += '<a class="button" onclick="jQuery.unblockUI();">Продолжить</a>';
            tpl += '<a href="/shop/cart/" class="button alt">Оформить</a>';
            tpl += '</div>';

но второй вариант не срабатывает. Не пойму где ошибка. Подозреваю, что где-то в переменной product_title2, но где именно непонятно. Сама «плитка» товара имеет такой html:

<li class="wc-block-grid__product">
				<a href="/shop/otvod-45-d110-pe100/" class="wc-block-grid__product-link">
					<div class="wc-block-grid__product-image"><img width="300" height="300" src="/wp-content/uploads/Otvody455.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"></div>
					<div class="wc-block-grid__product-title">Электросварной отвод 45° d110 ПЭ100 SDR11</div>
				</a>
				
				<div class="wc-block-grid__product-price price"><span class="woocommerce-Price-amount amount"><bdi>3 454&nbsp;<span class="woocommerce-Price-currencySymbol"><span class="rur">р<span>уб.</span></span></span></bdi></span></div>
				
				<div class="wp-block-button wc-block-grid__product-add-to-cart"><a href="?add-to-cart=1092" aria-label="Добавить &quot;Электросварной отвод 45° d110 ПЭ100&quot; в корзину" data-quantity="1" data-product_id="1092" data-product_sku="" rel="nofollow" class="wp-block-button__link add_to_cart_button ajax_add_to_cart">В корзину</a></div>

</li>