Оповещение «Товар добавлен в корзину» в 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.
А как сделать так, чтобы это модальное окно не исчезало, перенаправляясь в корзину, а дожидалось реакции пользователя?
Закомментировать 23 строку про timeout.
Михаил, а как вообще удалить это сообщение? Ищу в интренете, все ссылаются на вкладку «Уведомления магазина» в настройках, но не могу её найти
По умолчанию в магазине на WooCOmmerce их и нет. Если у вас они есть, это либо плагин, либо кастомный как как у меня выше.
как сделать, что бы сообщение выводилось не во всплывающем модальном окне, а на самой странице в Категории товаров?
Нужно использовать wc_add_notice.
Правильнее будет цепляться за событие
added_to_cart. Ведьadding, это всего лишь процесс добавления, об успешности он нам ничего не говорит. Параметры для события будут следующими:$(document.body).on( 'added_to_cart', function(event, fragments, cash, button) {} );Скорее всего такого хука раньше не было, так как иначе я бы заметил)))
а почему появляется колесо прокрутки пока окно открыто? какие то скрипты не успевают подгружаться?
Скорее всего, проблема в верстке вашей темы
У меня тоже колесо прокрутки, не могу понять в чем дело
Михаил, спасибо за функцию. Подскажите, пожалуйста, по двум вопросам:
Выцепляем инициатора события (ссылка/кнопка)
var $btn = $( button[0] );
2.Как можно задействовать эту функцию в разных местах? А именно, например, на главной и в каталоге? (на главной выведены популярные товары стандартным методом). Почему спрашиваю, получается вот эта строка:
// Пытаемся найти в вёрстке название товара
var product_title = $btn.parents( ‘li.product’ ).find( ‘.woocommerce-loop-product__title’ ).text();
Не будет срабатывать, т.к. в вышеупомянутых случаях разные классы у родителя и ссылки.
Что мешает добавить более одной строки для поиска title с вашими классами?
Михаил, спасибо за ответ. Добавил, получилось так:
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>
У меня вопрос, у меня мультиязычный сайт(ру и англ языки), использую Polylang, как сделать это всплывающее окно для двух языков? В программировании я не шарю, потому самому написать код будет проблемно.
Напишите мне в телеграм — попробую помочь