Как перехватить количество товара из корзины Woocommerce и вывести в уведомление?

Question

[Владимир]

В данном посте рассматривалось, как сделать уведомление о том, что товар добавлен в корзину -> https://qna.habr.com/q/700268

Код:

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

Необходимо показывать не только product_title но и кол-во товара в корзине.

Т.е. при первом нажатии "Добавлен товар "Название" х1"
При втором нажатии "Добавлен товар "Название" х2" и т.д

Comments

[Дмитрий Кузнецов]

Правилами сервиса запрещено использовать изображения в качестве кода. Исправьте это, иначе ваш вопрос удалят.

[Владимир]

Дмитрий Кузнецов, исправил, спасибо

Answer 1

[Макс]

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();
        var product_qty = $btn.parents('li.product').find('.input-text.qty.text').val();

        if (product_title && product_qty) {
            // Формируем шаблон попапа
            var tpl = '';
            tpl += '<p>' + product_qty + ' шт. товара "' + 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
                }
            });
        }
    });
});

Comments

[Владимир]

Добрый день, да я пробовал сделать так. По примеру перехвата названия товара, но выдает undefined.

По идее можно искать кол-во в мини корзине, т.к. в карточке товара нет поля количества. Но все равно не определяет. Посмотрите на примере - sushiwin-partners.ru