在"added_to_cart"上获取产品属性WooCommerce单一产品页面上的JS事件 [英] Get product properties on "added_to_cart" JS events on WooCommerce single product page

问题描述

我正在学习如何使用'add_to_cart'javascript事件，以便可以通过javascript警报(例如SweetAlert2)显示添加的产品信息.

我正在使用

我没有任何产品信息.

有人知道为什么'added_to_cart'javascript事件无法提取产品信息吗?

我已启用添加到购物车"按钮的AJAX.

解决方案

这不是单个产品页面的正常添加到购物车.这是供Ajax在产品循环中添加到购物车中的页面，例如商店页面，归档页面，相关产品……

请注意，通过Ajax添加到购物车的产品不会重新加载页面.

该代码在最新的WooCommerce版本上仍然可以完美运行:

这里是带有"Sweet Alert 2"的示例.在ajax上显示产品名称添加到购物车:

 //将一些产品数据添加到添加到购物车"中js事件的"added_to_cart"按钮add_action('woocommerce_loop_add_to_cart_link'，'filter_wc_loop_add_to_cart_link'，10，3);函数filter_wc_loop_add_to_cart_link($ button_html，$ product，$ args){if($ product-> supports('ajax_add_to_cart')){$ search_string ='数据产品_sku';//插入自定义产品数据作为数据标签$ replace_string = sprintf('data-product_name ='％s'data-product_price =％s"data-currency =％s"％s'，$ product-> get_name()，//产品名称wc_get_price_to_display($ product)，//显示的价格get_woocommerce_currency()，//货币$ search_string);$ button_html = str_replace($ search_string，$ replace_string，$ button_html);}返回$ button_html;}//将处理事件的jQuery代码获取所需的产品数据add_action('wp_footer'，'added_to_cart_js_event');函数add_to_cart_js_event(){?>< script src =" https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"</script>< script type =文本/javascript">(函数($){$(document.body).on('added_to_cart'，function(event，fragment，cart_hash，button){var product_id = button.data('product_id')，//获取产品IDproduct_qty = button.data('quantity')，//获取数量product_sku = button.data('product_sku')，//获取产品skuproduct_name = button.data('product_name')，//获取产品名称product_price = button.data('product_price')，//获取产品价格货币= button.data('currency');//获取货币//用于测试:在控制台日志上查看所有产品可用的数据(将被删除)console.log(button.data());const toast = swal.mixin({吐司:是的，showConfirmButton:否，计时器:10000});吐司({类型:成功"，标题:产品"'+ product_name +'"添加到购物车'});});})(jQuery);</script><?php} 

代码进入您的活动子主题(或活动主题)的functions.php文件中.经过测试，可以正常工作.

I am learning how to use the 'added_to_cart' javascript event so that I can display added product information through javascript alert (e.g. SweetAlert2).

I am using Get specific WooCommerce product data on "added_to_cart" javascript event answer code (just removed from jQuery the bianoTrack() function) in my WooCommerce test website, setup with 3 products (i.e. 2 simple and 1 variation).

In my Chrome developer JS console, here is what I get:

I don't see any product information.

Does anyone know why the 'added_to_cart' javascript event is not able to pickup the product information?

I have enabled AJAX for Add to Cart button.

解决方案

This is not for single product page normal add to cart. It's for Ajax add to cart on product loops as shop pages, archive pages, related products…

Note that products added via Ajax add to cart doesn't reload the page.

The code still works perfectly on last WooCommerce version:

Here is an example with a "Sweet Alert 2" displaying the product name on ajax add to cart:

// Add some product data to "add to cart" button for 'added_to_cart' js event
add_action( 'woocommerce_loop_add_to_cart_link', 'filter_wc_loop_add_to_cart_link', 10, 3 );
function filter_wc_loop_add_to_cart_link( $button_html, $product, $args ) {
    if( $product->supports( 'ajax_add_to_cart' ) ) {
        $search_string  = 'data-product_sku';

        // Insert custom product data as data tags
        $replace_string = sprintf(
            'data-product_name="%s" data-product_price="%s" data-currency="%s" %s',
            $product->get_name(), // product name
            wc_get_price_to_display( $product ), // Displayed price
            get_woocommerce_currency(), // currency
            $search_string
        );

        $button_html = str_replace($search_string, $replace_string, $button_html);
    }
    return $button_html;
}

// The jQuery code that will handle the event getting the required  product data
add_action( 'wp_footer', 'added_to_cart_js_event' );
function added_to_cart_js_event(){
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    (function($){
        $(document.body).on('added_to_cart', function( event, fragments, cart_hash, button ) {
            var product_id    = button.data('product_id'),   // Get the product id
                product_qty   = button.data('quantity'),     // Get the quantity
                product_sku   = button.data('product_sku'),  // Get the product sku
                product_name  = button.data('product_name'), // Get the product name
                product_price = button.data('product_price'), // Get the product price
                currency      = button.data('currency');     // Get the currency

            // For testing: View all product available data on console log (to be removed)
            console.log( button.data() );

            const toast = swal.mixin({
                toast: true,
                showConfirmButton: false,
                timer: 10000
            });
            toast({
                type: 'success',
                title: 'Product "'+product_name+'" added to Cart'
            });
        });
    })(jQuery);
    </script>
    <?php
}

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

这篇关于在"added_to_cart"上获取产品属性WooCommerce单一产品页面上的JS事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！