Оповещение “Товар добавлен в корзину” в 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.

JavaScript PHP WooCommerce WordPress

Источник: https://www.kobzarev.com/wordpress/woocommerce-added-to-cart-modal/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: