Notices after AJAX add to cart

Hello,

Following the post will help you to get the desired feature.
https://stackoverflow.com/questions/60115043/woocommerce-added-to-cart-message-notification-text

Unfortunately this will not help. This just alters the text. My problem is that messages are generated (at least the errors), but not displayed.

Current plan is to use the woocommerce_add_to_cart_fragments filter to add the notices html using this function.

function ace_ajax_add_to_cart_add_fragments() {

// Exclude Checkout Page
if (is_checkout()) {
return;
}

// Exclude Cart Page
if (is_cart()) {
return;
}

// Exclude Single Product Page
if (is_product()) {
return;
}

ob_start();

woocommerce_output_all_notices();
$notices_html = ob_get_clean();
$htmlelement = “.woocommerce-notices-wrapper”;

$fragments = array ($htmlelement => $notices_html);

//wc_clear_notices(); // should probably be uncommented

return $fragments;
}
add_filter( ‘woocommerce_add_to_cart_fragments’, ‘ace_ajax_add_to_cart_add_fragments’ );`

Still have to figure out how to add the notices to the filter on specific pages only. Using it on the cart page / checkout page and single product page causes the notices to disappear: they were already displayed and overwritten by the fragment refresh Ajax call that no longer contains notices. Code above is not working yet with respect to the exclusions.

Hello,

I would request you to please consult with a professional developer, that’s really out of our scope.

You can try to edit this file and then minify, but also call the file through the child theme, but yes, consulting or hiring a pro developer would be the best option in this case: https://github.com/oceanwp/oceanwp/blob/vanilla-js-fs/assets/js/wp-plugins/woocommerce/woo-ajax-add-to-cart.js

Are you really saying that I should consult a professional developer for such a basic feature as displaying notices?

In the meantime I have already found a solution. I have abandoned my first idea of adding the notices to the fragments to be updated. This did partially work, but in some cases the notices were removed by a second AJAX call of the fragments without the notices (as they were cleared). So I created a separate ajax call that will get the messages. This might not be the best solution, but it’s quite simple and it works.

JS:

/**
	 * Setup AJAX call refreshing notices
	 */
	var $notices_refresh = {
		url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_notices' ),
		type: 'GET', // might deliver cached data
		timeout: wc_cart_fragments_params.request_timeout,
		success: function( data ) {
			if ( data && data.notices ) {

				// Remove existing notices
				$( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();	
				// Add new notices
				$('.woocommerce-notices-wrapper:first').prepend(data.notices);

				$( document.body ).trigger( 'wc_notices_refreshed' );
			}
		},
		error: function() {
			$( document.body ).trigger( 'wc_notices_ajax_error' );
		}
	};

	/* Named callback for refreshing notices */
	function refresh_notices() {
		$.ajax( $notices_refresh );
	}

PHP

/**
 * Setup function that will send notices to frontend
 */

add_action('wc_ajax_get_notices', 'get_notices');  

function get_notices(){
	$data['notices'] = wc_print_notices(true) ;
	wp_send_json( $data );
	wc_clear_notices();
};

Ran across the same issue today. Found that when needing to fail woocommerce_add_to_cart_validation the notices that are generated are not displayed when the ajax add to cart functionality is enabled.

I’m going to look at your solution now.

A tip for the new players ??

In your solution, you’ll need to do the above for the standard implementations in OceanWP ajax add to cart. It’s being triggered after their add to cart ajax call.

$( document ).ready(function() {

    // required to refresh woocommerce notices for OceanWP ajax add to cart.
    $("body").on("added_to_cart", function() {

      refresh_notices();

    });

  });

This would be so easy for these guys to implement in the theme!

That you for sharing the solution. I have passed these details to the concerned dev team to look into it and we will try to add these in upcoming updates.

@codeconnectptyltd
What I did was calling the function (in add-to-cart.js) if the add-to-cart call returns an error (:

// Trigger event.
			$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

			e.data.addToCartHandler.addRequest({
				type: 'POST',
				url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
				data: data,
				success: function( response ) {
					if ( ! response ) {
						return;
					}
					
					// Redirect after error (optional), errors will be displayed on the product page
					if ( response.error && response.product_url ) {
						window.location = response.product_url;
						return;
					}

					if (response.error) {
						refresh_notices();

						$thisbutton.removeClass( 'loading' );	
						return; // to prevent firing the added_to_cart trigger
					}

					// Redirect to cart option (adjusted so it will not redirect after error)
					if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' && !response.error) {
						window.location = wc_add_to_cart_params.cart_url;
						return;
					}
					
					// display notices on success?					

					// Trigger event so themes can refresh other areas (adjusted so it will not trigger after error).
					if ( !response.error) {
						$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
					}
					
				},
				dataType: 'json'
			});
		}
	};

You’re right. Your solution will do the job but requires editing the WooCommerce source files and this is a big no no for me. I’m opening a ticket with the developers.