Das Ladesymbol „Font Awesome' wird in der WooCommerce-Administratorliste nicht angezeigt

Question

Aktualisieren Sie die Lagerbestandsmenge in der von WooCommerce verwalteten Produktliste basierend auf einem benutzerdefinierten Eingabefeld. Hier ist meine vorherige Antwort auf eine meiner Fragen.

Der folgende Code fügt der Mengenspalte eine benutzerdefinierte Schaltfläche hinzu, die beim Drücken die Menge aktualisiert und die aktuelle Menge aktualisiert. Ich habe versucht, einen Lade-Spinner hinzuzufügen, nachdem ich die Taste gedrückt habe, aber er wird nicht geladen.

Dies ist der Code aus der functions.php-Datei:

// 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');

Die Font-Awesome-Bibliothek wurde ebenfalls importiert, wenn die Schaltfläche gedrückt wird, verschwindet die Schaltfläche und es erscheint ein leeres Feld.

Answer 1

您没有使用正确的CSS库链接，并且您还应该将该功能限制为仅管理产品列表。将最后一个函数替换为：

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

经过测试并有效。

这里是 Font Awesome 的所有 CDN 正确链接。