Question

我打算创建一个菜单来动态地对我的产品进行排序。每次选择排序方法（即按价格）时，我想刷新产品并在新的WP_Query中加载ajax。

到目前为止，我通过触发AJAX调用的按钮加载产品是成功的，但我的问题是，一旦产品加载，它们的正常功能就会出现一些问题。

产品是变量，通常当您选择了您喜欢的变量选项时，将输出价格。这不再发生，我想知道如何刷新变量产品的JS以便它可以工作。

这是我的functions.php的样子。

//Enqueue Ajax Scripts
function enqueue_product_show_ajax() {
    wp_register_script( 'product-show-ajax-js', get_template_directory_uri() .   '/js/product-show-ajax.js', array( 'jquery' ), '', true );
    wp_localize_script( 'product-show-ajax-js', 'product_show_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'product-show-ajax-js' );
}
add_action('wp_enqueue_scripts', 'enqueue_product_show_ajax');

function ajax_show_product() {

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        // Indicate the product category - in this case "Training"
        'product_cat' => 'training',
        'orderby' => '_price',
        'order' => 'desc'
    );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="product-node">
            <?php wc_get_template_part( 'content', 'single-product' ); ?>
            </div>
        <?php endwhile;
    }
    wp_reset_postdata();

    die();

}

//Add Ajax Actions
add_action('wp_ajax_show_product', 'ajax_show_product');
add_action('wp_ajax_nopriv_show_product', 'ajax_show_product');

这是我的product-show-ajax.js中的AJAX调用

$('.ajax').on('click', function(){
    show_products(); 
});

//Main ajax function
function show_products() {

    $.ajax({
        type: 'GET',
        url: product_show_ajax.ajax_url,
        data: {
            action: 'show_product',
        },
        beforeSend: function ()
        {
            //Eventually show a loader here
        },
        success: function(data)
        {
            //Eventually hide loader here
            $( '.product-container' ).html(data);;
        },
        error: function()
        {
            //If an ajax error has occured, do something here...
            $(".product-container").html('<p>There has been an error</p>');
        }
    });
}

所以回顾一下，我的问题是用于变量产品的WooCommerce特定JS没有运行，我猜是因为它是在产品之前加载的，所以当ajax函数显示产品时为他们加载的JS没有绑定到任何元素。

如何在产品加载后重新加载WooCommerce特定的JS？

全部谢谢！

通过AJAX加载WP_Query打破了WooCommerce Product JS

0 个答案: