Getting the contents of a WooCommerce basket with JQuery - php

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":"<div class=\"widget_shopping_cart_content\">\n\n\t<ul class=\"woocommerce-mini-cart cart_list product_list_widget \">\n\t\t\t\t\t\t<li class=\"woocommerce-mini-cart-item mini_cart_item\">\n\t\t\t\t\t×\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<img width=\"800\" height=\"450\" src=\"https://cdn2.co.uk/app/uploads/Overlapped-800x450.jpg\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"\" />Raspberry Drinking Yogurt - 1 drink\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"quantity\">1 × <span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">£</span>1.50</span></span>\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\n\t<p class=\"woocommerce-mini-cart__total total\">\n\t\t<strong>Subtotal:</strong> <span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">£</span>1.50</span>\t</p>\n\n\t\n\t<p class=\"woocommerce-mini-cart__buttons buttons\">View basketCheckout</p>\n\n\t\n\n</div>"}
Would it be possible to extract the elements from this?

Answer 1

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.