为什么当我通过AJAX加载Woocommerce产品时，我失去了功能

Question

我正在尝试使用AJAX在自定义帖子类型模板上创建产品过滤器。我能够填充产品，但是例如当可变产品加载时，我会失去根据选择产品的变化来更新价格的功能，以及添加到购物车的能力。如何完成不会丢失核心Woocommerce功能的产品过滤器？

AJAX代码：

$(document).on('click','.wc_categories_tab_container' , function(){
var value = $(this).find('.wc_categories_tab').attr('parent_term_id');
var name = 'cabinet_categories';
var url = window.location.href;
$.ajax({
    type:'POST',
    url: wc_add_to_cart.ajaxurl,
    data:{ action:'cabinet_product', 'term':value, 'taxonomy':name },
    beforeSend: function(){
        $('.wc_products_archive').html('LOADING PRODUCTS PLEASE WAIT');
    },
    success: function( data ) {
        $('.wc_products_archive').html(data);
    },
    error: function(errorThrown){
      alert(errorThrown);
    }

});

});

PHP功能：

function cabinet_product(){

if (isset($_POST['taxonomy'])) {
include($_SERVER["DOCUMENT_ROOT"] . "/wp-blog-header.php");
?>
<ul class="products">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12,
            'tax_query' => array(
                array(
                    'taxonomy' => $_POST['taxonomy'],
                    'field' => 'term_id',
                    'terms' => $_POST['term']
                ),
            ),
        );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
    $('.single_add_to_cart_button').addClass('product_type_variable');
});
</script>
<?php

}
    wp_die();
}

add_action( 'wp_ajax_cabinet_product', 'cabinet_product' );
add_action( 'wp_ajax_nopriv_cabinet_product', 'cabinet_product' );