Ikon pemuatan Font Hebat tidak dipaparkan dalam senarai pentadbir WooCommerce

Question

Kemas kini kuantiti inventori dalam senarai produk terurus WooCommerce berdasarkan medan input tersuai, berikut ialah jawapan saya sebelum ini untuk salah satu soalan saya.

Kod berikut menambah butang tersuai pada lajur kuantiti, yang apabila ditekan akan mengemas kini kuantiti dan menyegarkan kuantiti semasa. Cuba menambah pemutar pemuatan selepas menekan butang tetapi ia tidak dimuatkan.

Ini ialah kod daripada fail functions.php:

// Add input fields to stock status column// change default stock
add_filter('woocommerce_admin_stock_html', 'filter_woocommerce_admin_stock_html', 10, 2 );
function filter_woocommerce_admin_stock_html($stock_html, $product) {
    if ( $product->managing_stock() ) {
        return '';
    }
    return $stock_html;
}

// Add input fields to stock status column
add_action( 'manage_product_posts_custom_column', 'product_stock_quantity_column_content', 10, 2 );
function product_stock_quantity_column_content( $column, $product_id ) {
    if ( $column === 'is_in_stock' ) {
        global $product;

        if ( $product->managing_stock() ) {
            $stock_html = sprintf('<div style="margin-bottom:5px;width:120px">
            <input type="text" name="stock_qty-%d" value="%d" style="width:35px; padding: 5px; text-align: center; height: 30px;" inputmode="numeric">
            <button type="button" class="update-qty button button-primary" data-id="%d">&#8635;</button>
            </div><div class="stock-%d">', 
            $product_id, $product->get_stock_quantity('edit'), $product_id, $product_id, $product_id);

            if ( $product->is_on_backorder() ) {
                $stock_html .= '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
            } elseif ( $product->is_in_stock() ) {
                $stock_html .= '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
            } else {
                $stock_html .= '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
            }
            echo $stock_html .' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')</div>';
        }
    }     
}

// WP Admin Ajax receiver
add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity_ajax');
function update_stock_quantity_ajax() {
    if (isset($_POST['product_id']) && isset($_POST['update_qty'])) {
        $product = wc_get_product(intval($_POST['product_id']));

        $product->set_stock_quantity(intval($_POST['update_qty']));
        $id = $product->save();

        if ( $product->is_on_backorder() ) {
            $stock_html = '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
        } elseif ( $product->is_in_stock() ) {
            $stock_html = '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
        } else {
            $stock_html = '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
        }
        $stock_html .= ' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')';

        echo $stock_html;
    }
    wp_die(); // Exit silently (Always at the end to avoid an Error 500)
}

// jQuery Ajax
add_action('admin_footer', 'update_stock_quantity_js');
function update_stock_quantity_js() {
    global $pagenow, $typenow;

    if( 'edit.php' === $pagenow && 'product' === $typenow ) :
    ?>
    <script id="update-stock-qty" type="text/javascript">
        jQuery(function($) {
            $('body').on('click', 'button.update-qty', function() {
                const productID = $(this).data('id'),
                      updateQty = $('input[name=stock_qty-'+productID+']').val();
            
                // Add spinner icon to the button
                $(this).html('<i class="fa-solid fa-spinner fa-spin"></i>');
            
                $.ajax({
                    url:  '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                    type: 'POST',
                    data: {
                        'action':     'update_stock_quantity',
                        'product_id': productID,
                        'update_qty': updateQty,
                    },
                    success: function(response) {
                        if ( response ) {
                            const message = '<div class="message-'+productID+'">Success !</div>';
                            $('.stock-'+productID).html(response).after();
                            $('.stock-'+productID).prepend(message);
                            setTimeout(function(){
                                $('.message-'+productID).remove();
                            }, 5000);
                        }
                    },
                    error: function(error) {
                        if ( error ) {
                            const message = '<div class="message-'+productID+'">Error !</div>';
                            $('.stock-'+productID).prepend(message);
                            setTimeout(function(){
                                $('.message-'+productID).remove();
                            }, 5000);
                        }
                    },
                    complete: function() {
                        // Restore the button text (remove spinner icon)
                        $('button.update-qty').html('&#8635;');
                    }
                });
            });
        });
    </script>
    <?php
    endif;
}

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

Fon Pustaka Hebat juga telah diimport Sekarang apabila butang ditekan, butang akan hilang dan kotak kosong akan muncul.

Answer 1

Anda tidak menggunakan pautan perpustakaan CSS yang betul dan anda juga harus mengehadkan fungsi untuk mengurus senarai produk sahaja. Gantikan fungsi terakhir dengan:

add_action('admin_enqueue_scripts', 'enqueue_font_awesome_free6');
function enqueue_font_awesome_free6() {
    global $pagenow, $typenow;
    if ( $pagenow === 'edit.php' && $typenow === 'product' ) {
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
    }
}

Teruji dan berkesan.

Berikut ialah pautan yang betul kepada semua CDN untuk Font Awesome.