使用 JQuery 获取 WooCommerce 购物篮的内容答案

【问题标题】：Getting the contents of a WooCommerce basket with JQuery使用 JQuery 获取 WooCommerce 购物篮的内容
【发布时间】：2021-07-29 03:09:55
【问题描述】：

我最近一直在使用 WooCommerce，我想知道是否可以通过 JavaScript 或 JQuery 获取购物车商品

我知道您可以使用 PHP 函数来检索购物车的内容，但目前我无法访问网站的后端。

我在这里发现了一个类似的问题：WooCommerce cookies and sessions - Get the current products in cart

在会话中有一个 wc_fragment 包含购物车的 HTML。


{"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<a href=\"https://shop.co.uk/basket/?remove_item=5a48ab5b7a7d18cb26168d874821d031&#038;_wpnonce=3bccfbac25\" class=\"remove remove_from_cart_button\" aria-label=\"Remove this item\" data-product_id=\"12765\" data-cart_item_key=\"5a48ab5b7a7d18cb26168d874821d031\" data-product_sku=\"\">&times;</a>\t\t\t\t\t\t\t\t\t\t\t<a href=\"https://shop.co.uk/product/?attribute_pa_quantity=1-drink\">\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</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"quantity\">1 &times; <span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&pound;</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\">&pound;</span>1.50</span>\t</p>\n\n\t\n\t<p class=\"woocommerce-mini-cart__buttons buttons\"><a href=\"https://shop.co.uk/basket/\" class=\"button wc-forward\">View basket</a><a href=\"https://shop.co.uk/checkout/\" class=\"button checkout wc-forward\">Checkout</a></p>\n\n\t\n\n</div>"}

可以从中提取元素吗？

【问题讨论】：

标签： php wordpress woocommerce

【解决方案1】：

我已经为您找到了解决方案。也许有更好的，但我会这样做。

首先创建一个自定义的JS文件并注册。还要添加一个自定义 ajaxurl（以防你还没有这样做）：

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' )
        ]
    );
}

现在添加一个 AJAX 端点：

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();
    }
}

如果购物车可用，这将返回购物车的内容。现在在你的 JS 函数中调用它。在我的情况下，直接在 document.ready 方法中进行测试：

(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 );

这将返回例如：

077e29b11be80ab57e1a2ecabb7da330：{键： “077e29b11be80ab57e1a2ecabb7da330”，product_id：249，variation_id：0，变化：数组（0），数量：1，...}

我认为您需要添加一些空检查，但总的来说这是一个可行的解决方案。

【讨论】：