在 WooCommerce Ajax 上获取产品 ID、名称和数量添加到购物车以显示通知

2021-12-22 00:00:00 jquery php wordpress woocommerce ajax

浏览了大量类似的问题，但目前都没有成功.

Browsed a load of similar questions with no success so far.

我想在常规页面上显示一个 WC 通知，命名添加到购物车的最后一个项目.

I want to display a WC notice naming the last item added to the cart on a regular page.

通知已启动并正在运行，但是，到目前为止，我无法识别添加到购物车的最后一件商品的 ID.

Notification is up and running, however, so far I was not able to identify the ID of last item added to the cart.

我已经试过了

    $items = WC()->cart->get_cart();
    $ids = array();
    foreach($items as $item => $values) {
        $_product = $values['data']->post;
        $ids[] = $_product->ID;
    }
    $last_product_id = end($ids);
    $added_product = wc_get_product( $last_product_id );
    $added_product_name = $added_product->get_title();

但据我所知，购物车内容在 AJAX 调用期间不会更新.获取产品ID的最简单方法应该是包含它的AJAX参数，但不能通过$_GET读取.

But as I've learned cart content does not get updated during AJAX calls. The easiest way to obtain the product ID should be the AJAX parameter containing it, but it cannot be read via $_GET.

有谁知道通过 WC hook/jQuery 添加的最后一个项目的产品 ID 的检索方法吗?

Does anyone know of a way to retrieve the product ID of the last item added via WC hook/jQuery?

推荐答案

对于 Ajax added_to_cart 委托事件.

For Ajax added_to_cart delegated event.

使用 jQuery，您可以轻松获取产品 ID、产品名称以及已通过 Ajax 加入购物车的产品数量.

Using jQuery you can get easily the product ID, the product name, and the quantity of a product that has been added to cart with Ajax.

在此代码示例中，使用 Sweet Alert 组件(SWAL 2)，当将产品添加到购物车时，我们会显示一个带有产品名称(及其 ID)的消息灯箱:

Here in this code example using Sweet Alert component (SWAL 2), when a product is added to cart, we display a message lightbox, with the product name (and its ID):

// Add the product name as data argument to Ajax add to cart buttons
add_filter( "woocommerce_loop_add_to_cart_args", "filter_wc_loop_add_to_cart_args", 20, 2 );
function filter_wc_loop_add_to_cart_args( $args, $product ) {
    if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) {
        $args['attributes']['data-product_name'] = $product->get_name();
    }
    return $args;
}

// On Ajax added to cart, shows a lightbox with the product name (and the product id)
add_action( 'wp_footer', 'ajax_added_to_cart_popup_script' );
function ajax_added_to_cart_popup_script() {
    ?>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <script type="text/javascript">
    jQuery( function($){
        // On "added_to_cart" live event
        $(document.body).on('added_to_cart', function( a, b, c, d ) {
            var prod_id   = d.data('product_id'), // Get the product name
                prod_qty  = d.data('quantity'), // Get the quantity
                prod_name = d.data('product_name'); // Get the product name

            Swal.fire({
                title: '<?php _e("Added to cart!"); ?>',
                text: prod_name+' ('+prod_id+')',
                showCancelButton: true,
                confirmButtonColor: '#000',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '<?php _e("View-cart"); ?>',
                cancelButtonText:  '<?php _e("Continue shopping"); ?>'
            }).then((result) => {
                if (result.value) {
                    window.location.href = '<?php echo wc_get_cart_url(); ?>';
                }
            });
        });
    });
    </script>
    <?php
}

代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

相关:

  • 针对特定的 Woocommerce 购物车项目计数，在 ajax 添加到购物车时显示甜蜜警报
  • Woocommerce:添加到购物车后的自定义 jquery 事件

相关文章