// Registration of styles and scripts
add_action('wp_enqueue_scripts', 'enqueue_custom_woocommerce_popup_script');
function enqueue_custom_woocommerce_popup_script() {
// Registering Styles
add_action('wp_head', 'custom_popup_css');
// Enabling inline-JS in the footer
add_action('wp_footer', 'custom_popup_js');
}
// CSS output function in head
function custom_popup_css() {
?>
.woo-add-to-cart-popup {
position: fixed;
top: 50px;
right: 20px;
background-color: #f8f8f8;
color: black;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
z-index: 9999;
transition: opacity 0.5s ease-in-out;
animation: slideInRight 0.5s forwards;
}
@keyframes slideInRight {
from {
transform: translateX(-10%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
jQuery(document).ready(function($) {
function showPopup(message) {
const popup = document.createElement("div");
popup.className = "woo-add-to-cart-popup";
popup.textContent = message;
document.body.appendChild(popup);
setTimeout(() => {
popup.style.opacity = "0"; // Smooth fade
setTimeout(() => {
document.body.removeChild(popup); // Removes the element completely after one second.
}, 500); // Waiting time after the start of smooth fading
}, 2000); // The message is displayed for 2 seconds.
}
$('body').on('added_to_cart', function(event, fragments, cart_hash, button) {
let product_name = ''; // Variable for storing the product name
// We check if we are on a single product page
if($(button).closest('.single-product')) {
// If yes, we extract the product name from the H1 heading
product_name = $('.single-product .product_title').text();
} else {
// Otherwise, we consider this to be a shop page.
product_name = $(button).closest('.product').find('.wd-entities-title').text();
}
// Additional check in case of missing text
if(!product_name || product_name.trim().length === 0) {
product_name = $(button).data('product_title') || '';
}
// Displaying a message about adding an item to the cart
showPopup(`"${product_name}" added to cart`);
});
});
Подробнее здесь: [url]https://stackoverflow.com/questions/79875121/woocommerce-notification-does-not-show-product-name[/url]
Я использую код, который отображает всплывающее уведомление о добавлении товара в корзину. [code] // Registration of styles and scripts add_action('wp_enqueue_scripts', 'enqueue_custom_woocommerce_popup_script');
function enqueue_custom_woocommerce_popup_script() { // Registering Styles add_action('wp_head', 'custom_popup_css');
// Enabling inline-JS in the footer add_action('wp_footer', 'custom_popup_js'); }
// CSS output function in head function custom_popup_css() { ?>
setTimeout(() => { popup.style.opacity = "0"; // Smooth fade setTimeout(() => { document.body.removeChild(popup); // Removes the element completely after one second. }, 500); // Waiting time after the start of smooth fading }, 2000); // The message is displayed for 2 seconds. }
$('body').on('added_to_cart', function(event, fragments, cart_hash, button) { let product_name = ''; // Variable for storing the product name
// We check if we are on a single product page if($(button).closest('.single-product')) { // If yes, we extract the product name from the H1 heading product_name = $('.single-product .product_title').text(); } else { // Otherwise, we consider this to be a shop page. product_name = $(button).closest('.product').find('.wd-entities-title').text(); }
// Additional check in case of missing text if(!product_name || product_name.trim().length === 0) { product_name = $(button).data('product_title') || ''; }
// Displaying a message about adding an item to the cart showPopup(`"${product_name}" added to cart`); }); });
Мобильная версия