Shortcode Filter Product Category And Product

shortcode.php

<?php
//Product_home_filter_function
function product_home_filter_function() {
    ob_start();
    //Get category outside loop
    $terms = get_terms( 'product_category' );

    $select_categories = '';
    $script_product1 = '';
    $script_product2 = '';

    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
        foreach ( $terms as $term ) {
            $category_name = $term->name;
            $category_slug = $term->slug;

            $select_categories .= '<option value="'.$category_slug.'">'.$category_name.'</option>';
           	
           	$script_product1 .= "'".$category_slug."': {";
       	    $script_product2 .= "'all': {";

		   	$args = array(
		        'post_type' => 'product',
		        'posts_per_page' => '-1'
		    );
		    $loop = new WP_Query($args);
		    $test_content = '';
		    while($loop->have_posts()): $loop->the_post();
		        $id = get_the_ID();
		        $title = get_the_title();
		        $post = get_post($id); 
		        $slug = $post->post_name;
		        
                //Get category in loop
		        $categories = get_the_terms( $id, 'product_category' );
		        foreach ($categories as $key => $value) {
		        	$category_product = $value->name;
					
                    //Filter only Products of 1 product_category
					if ($category_name == $category_product) {
						$script_product1 .= htmlspecialchars_decode("'".$slug."': '".$title."',"); 
					}
                    //All Products and product_category
					$script_product2 .= htmlspecialchars_decode("'".$slug."': '".$title."',");
		        }

		    endwhile;
		    wp_reset_query();
		    $script_product1 .= "},";
		    $script_product2 .= "},";
        }
    }

    
    ?>
    <form class="homepage-product-search nobottommargin">
        <div class="select_filter">
            <select name="homepage_product_search_markets" id="homepage-product-search-markets">
                <option value="">Need</option>
                <?php 
                echo $select_categories;
                ?>
            </select>
        </div>
        <div class="select_filter">
            <select name="homepage_product_search_products" id="homepage-product-search-products">
                <option value="">Product</option>
                
                <?php 
                $args = array(
                    'post_type' => 'product',
                    'posts_per_page' => '-1'
                );
                $loop = new WP_Query($args);
                $test_content = '';
                while($loop->have_posts()): $loop->the_post();
                    $id = get_the_ID();
                    $title = get_the_title();
                    $post = get_post($id); 
                    $slug = $post->post_name;
                    echo '<option value="'.$slug.'">'.$title.'</option>';

                    $test_content .= $title;
                endwhile;
                wp_reset_query();
                ?>

            </select>
        </div>
        <div>
            <input class="btn btn-lg" type="submit" value="View Details" />
        </div>
    </form>
    <script type="text/javascript">
        jQuery('#homepage-product-search-markets').on('change', function() {
            var markets = {<?php echo $script_product1; ?><?php echo $script_product2; ?>};
            var $select = jQuery('#homepage-product-search-products option:gt(0)')
            $select.remove();
    
            var options = '';
            if (this.value) {
                options = markets[this.value];
            } else {
                options = markets['all'];
            }
    
            for (var id in options) {
                jQuery('#homepage-product-search-products').append(jQuery("<option></option>").attr("value", id).text(options[id]));
            }
        });
    
        jQuery('form.homepage-product-search').submit(function( event ) {
            event.preventDefault();
    
            var $inputs = jQuery('form.homepage-product-search :input');
            var values = {};
    
            $inputs.each(function() {
                values[this.name] = jQuery(this).val();
            })
    
            var market = values['homepage_product_search_markets'];
            var product = values['homepage_product_search_products'];
    
            if ( product ) {
                window.location.href = "/"+product;
            }
    
            return false;
        });
    </script>
    <?php
    wp_reset_postdata();
    return ob_get_clean();
}