Getting the contents of a WooCommerce basket with JQuery

Question

I've been working with WooCommerce recently and I was wondering if it was possible to get cart items via JavaScript or JQuery

I know you can use PHP functions to retrieve the contents of the cart but currently I do not have access to the backend of the site.

I've found a similar question here: WooCommerce cookies and sessions - Get the current products in cart

In the session there is a wc_fragment that contains the HTML of the cart.


{"div.widget_shopping_cart_content":"

	
						
					×											
							Raspberry Drinking Yogurt - 1 drink						
															1 × £1.50				
					

	
		Subtotal: £1.50	

	
	View basketCheckout

	

"}

Would it be possible to extract the elements from this?

user_10515503 · Answer

I've found a solution for you. Maybe there is a better one but's how I would do it.

First create a custom JS file and register it. Also add a custom ajaxurl (in case you don't did this already):

add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_action' );
function wp_enqueue_scripts_action() {
    wp_register_script( 'child-theme', get_stylesheet_directory_uri() . '/assets/child.js', [ 'jquery' ] );
    wp_enqueue_script( 'child-theme' );

    wp_localize_script( 'child-theme', 'child_theme', [
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        ]
    );
}

Now add an AJAX endpoint:

add_action( 'wp_ajax_get_cart_items', 'wp_ajax_get_cart_items_action' );
add_action( 'wp_ajax_nopriv_get_cart_items', 'wp_ajax_get_cart_items_action' );
function wp_ajax_get_cart_items_action() {
    $cart = WC()->cart;

    if ( $cart ) {
        wp_send_json_success( $cart->get_cart_contents() );
        /** @noinspection ForgottenDebugOutputInspection */
        wp_die();
    }
}

This will return the content of the cart in case a cart is available. Now call it inside your JS function. In my case for testing directly in the document.ready method:

(function ( $ ) {
    $( document ).ready( function () {
        let data = {
            action: 'get_cart_items'
        };

        $.post( child_theme.ajaxurl, data, function () {
        } ).done( function ( response ) {
            console.log( response );
        } ).fail( function ( response ) {
            console.log( 'Fail' );
        } );
    } );
})( jQuery );

This will return for example:

077e29b11be80ab57e1a2ecabb7da330: {key: "077e29b11be80ab57e1a2ecabb7da330", product_id: 249, variation_id: 0, variation: Array(0), quantity: 1, …}

I think you need to add some null checks but all in all its a working solution.

Getting the contents of a WooCommerce basket with JQuery

1 Answers