用 WooCommerce 上的 JS Sweet Alert 替换“已添加到购物车”通知

Posted 2023-02-24

【中文标题】用 WooCommerce 上的 JS Sweet Alert 替换“已添加到购物车”通知

【英文标题】：Replace "added to cart" notice with JS Sweet Alert on WooCommerce

【发布时间】：2019-07-20 00:50:54

【问题描述】：

我已删除 WooCommerce 提供的标准“已添加到购物车”消息。然后我添加了下面使用 Sweet Alert 的代码。我们的想法是删除所有“已添加到购物车”的消息并仅使用甜蜜警报。

基于@LoicTheAztec 的“JS alert on ajax add to cart for specific product category count in Woocommerce” 答案代码，我的代码适用于添加的第一个产品，但不适用于以下产品。 所以它工作正常当购物车为空以及添加第一个产品时。

这是我正在使用的代码：

// remove add to cart woocommerce message
add_filter('wc_add_to_cart_message_html', '__return_null');

// Wordpress Ajax php
add_action('wp_ajax_nopriv_checking_items', 'atc_sweet_message');
add_action('wp_ajax_checking_items', 'atc_sweet_message');

function atc_sweet_message() 
    if (isset($_POST['id']) && $_POST['id'] > 0) 
        $count = 0;
        $product_id = $_POST['id'];
        foreach(WC()-> cart-> get_cart() as $cart_item) 
            $count += $cart_item['quantity'];
        
    
    echo $count;
    die();


// jQuery Ajax
add_action('wp_footer', 'item_count_check');
function item_count_check() 
    if (is_checkout())
        return; 
    ?> 
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    jQuery( function($) 
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) 
            $.ajax(
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: 
                    'action': 'checking_items',
                    'id'    : $button.data( 'product_id' )
                ,
                success: function (response) 
                    if(response == 1 )
                        const toast = swal.mixin(
                            toast: true,
                            showConfirmButton: false,
                            timer: 3000
                        );
                        toast(
                            type: 'success',
                            title: 'Product Added To Cart'
                        )
                    
                
            );
        );
    );
    </script>
    <?php

我尝试删除 if(response == 1 ) 没有成功。对此的任何意见表示赞赏。

【问题讨论】：

@LoicTheAztec，既然你帮助了我的另一个问题，你介意看看这个吗？

【参考方案1】：

您的 Wordpress Ajax PHP 函数代码中存在一些小错误。请尝试以下操作：

// remove add to cart woocommerce message
add_filter('wc_add_to_cart_message_html', '__return_null');

// Wordpress Ajax PHP
add_action('wp_ajax_nopriv_item_added', 'addedtocart_sweet_message');
add_action('wp_ajax_item_added', 'addedtocart_sweet_message');
function addedtocart_sweet_message() 
    echo isset($_POST['id']) && $_POST['id'] > 0 ? (int) esc_attr($_POST['id']) : false;
    die();


// jQuery Ajax
add_action('wp_footer', 'item_count_check');
function item_count_check() 
    if (is_checkout())
        return;
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    jQuery( function($) 
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) 
            var $pid = $button.data('product_id');

            $.ajax(
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: 
                    'action': 'item_added',
                    'id'    : $pid
                ,
                success: function (response) 
                    if(response == $pid)
                        const toast = swal.mixin(
                            toast: true,
                            showConfirmButton: false,
                            timer: 3000
                        );
                        toast(
                            type: 'success',
                            title: 'Product Added To Cart'
                        )
                    
                
            );
        );
    );
    </script>
    <?php

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

它现在适用于添加到购物车项目的所有 ajax （而不仅仅是第一个）。

【讨论】：

谢谢！只有一个“问题”，如果它可以称为“问题”，那么在产品页面上添加产品到购物车时页面会“重新加载”和“闪烁”。此外，如果在产品页面上，则不会显示该消息。除此之外，它完美无缺。

@FreddieMcCollough 该代码与“Ajax 添加到购物车按钮”一起工作，因此它不能在单个产品页面上工作......当产品添加到购物车时，页面会重新加载，并且没有added_to_cart jQuery 事件处于活动状态，因为这只是 PHP。

好的，我明白了。我尝试为 add_filter('wc_add_to_cart_message_html', '__return_null'); 过滤器添加一个 if 语句，使其仅在商店中运行（如果！is_product），但这不起作用。

@FreddieMcCollough 但请记住，在产品单页中，有相关产品和加售产品可以有 ajax 添加到购物车按钮（如果是简单产品）。