Ajax Product filter by category “no product found”

I know this is a big question but i’m struggling with this for too long without any improvements because I know very little things about coding.

I’m trying to create a “simple” ajax product filter by category and I’ve seen different tutorials and surely messed up everything trying to implement this to an existing wordpress theme.

I started by listing the links of my parent product categories in my archive page, and this seems to work well:

$category = get_queried_object();
$categories = get_terms( $category->taxonomy,
    array( 'parent' => $category->term_id,
                             )
);

foreach($categories as $cat) : ?>
    <li class="archive-filter__item">
    <a data-category="<?= $cat->term_id; ?>" href="<?= get_term_link($cat->term_id); ?>"><?= $cat->name; ?></a>
    </li>
<?php endforeach; ?>

Then I create (I think) a jQuery to listen the click on that link, get the data from it and output in the section below:

(function($) {

$(document).ready(function(){
    $(document).on('click', '.archive-filter__item > a', function(e){
        e.preventDefault();

    var category = $(this).data('category');


$.ajax({
    url: wpAjax.ajaxUrl,
    data: {action: 'filter', category: category },
    success: function(result) {
        $('.archive-list').html(result);

        return false;
    }
});
});
});})(jQuery);

Then I create an “example.php” file to output the function, where the loop is the same of my theme’s archive page (after the WPQuery):

    <?php

use PikartOmbraDependencyInjectionService;
use PikartOmbraShopShopTemplateHelper;
use PikartOmbraThemeOptionsThemeOption;
use PikartWpThemeCoreShopShopUtil;

add_action( 'wp_ajax_nopriv_filter', 'filter_ajax' );
add_action( 'wp_ajax_filter', 'filter_ajax' );

function filter_ajax() {

    $category = $_POST['category'];

    $args = array (
    'post_type' => 'product',
    );

    if(isset($category)) {
        $args['category'] = array($category);
    }

    $query = new WP_Query($args); 


    if ( ShopTemplateHelper::woocommerceProductLoop() ) {

        do_action( 'woocommerce_before_shop_loop' );

        woocommerce_product_loop_start();

        if ( $query->wc_get_loop_prop( 'total' ) ) {
            while ( $query->have_posts() ) {
                $query->the_post();

                do_action( 'woocommerce_shop_loop' );

                wc_get_template_part( 'content', 'product' );
            }
        }

        woocommerce_product_loop_end();

        do_action( 'woocommerce_after_shop_loop' );

    }  else {


        do_action( 'woocommerce_no_products_found' );

    }



  die();
}

I enqueued the scripts with:

function load_scripts() {

wp_enqueue_script('ajax', get_template_directory_uri() . '/assets/js/scripts3.js', array('jquery'), NULL, true);

wp_localize_script('ajax' , 'wpAjax', 
    array('ajaxUrl' => admin_url('admin-ajax.php'))
);
}add_action( 'wp_enqueue_scripts', 'load_scripts' );

And added this to my theme’s functions.php:

require_once get_template_directory() . '/includes/src/scripts.php';
require_once get_template_directory() . '/includes/src/example.php';

Well, all I can get from this is that when I click on the category link it outputs in the correct section the ‘woocommerce_no_product_found’ function of the loop.

I really can’t understand where the error is, if it’s in the jquery or in the “example.php” file.

Can anyone help me figure it out? You’ll have all my love <3

Sorry for my bad english. Thank you!