Cómo construir una función AJAX para HTML Select-Tag (menú desplegable)

Tengo un sitio de comparación de precios/productos. Mi sitio me muestra todos mis productos, arriba tengo un menú desplegable de selección, donde puedo ordenar los productos por precio, nombre, etc. El problema aquí es que, si cambio la opción Ordenar por, el sitio se actualiza. Quiero cambiar las opciones sin actualizar el sitio, para que pueda resolver con AJAX. El problema aquí es que soy muy nuevo en AJAX, JS, jQuery, Wordpress, PHP, así que no sé cómo compilar y agregar los códigos en mi sitio de wordpress :) Espero que alguien pueda ayudarme aquí, gracias chicos en avanzado. Aquí mis códigos:

  1. Así es como obtengo el filtro de selección de orden en mi sitio:
    // filter layout
                    if(isset($_GET['layout'])) {
                        $layout = $_GET['layout'];
                    }

                    if (have_posts()) :
                        if('1' == $userfilter)
                            get_template_part('parts/product/code', 'filter');
  1. Así que ese es el Filter-Function-Code.php
    <?php
/*
 * VARS
 */
global $layout, $args, $orderby, $order, $default_orderby;

$orderby = $default_orderby;

if ( isset( $_GET['orderby'] ) ) {
    $orderby = $_GET['orderby'];
} else {
    switch ( $orderby ) {
        case 'price' :
            if ( $order == 'asc' ) {
                $orderby = 'price-asc';
            } else {
                $orderby = 'price-desc';
            }
            break;

        case 'name' :
            if ( $order == 'asc' ) {
                $orderby = 'a-z';
            } else {
                $orderby = 'z-a';
            }
            break;
    }
}

if ( isset( $_GET['order'] ) ) {
    $order = $_GET['order'];
}
?>
<div class="result-filter">
    <div class="row">
        <div class="col-sm-6 hidden-xs">
            <ul class="list-inline">
                <li><span class="result-title"><?php _e( 'Ansicht:', 'affiliatetheme' ); ?></li>
                <li>
                    <a class="btn btn-link <?php echo( $layout == 'grid' ? 'active' : '' ); ?>" title="<?php _e( 'Gridansicht', 'affiliatetheme' ); ?>" data-value="grid" href="<?php echo requestUriAddGetParams( array( 'layout' => 'grid' ) ); ?>">
                        <i class="fas fa-th"></i>
                    </a>
                </li>
                <li>
                    <a class="btn btn-link <?php echo( $layout == 'list' ? 'active' : '' ); ?>" title="<?php _e( 'Listenansicht', 'affiliatetheme' ); ?>" data-value="list" href="<?php echo requestUriAddGetParams( array( 'layout' => 'list' ) ); ?>">
                        <i class="fas fa-bars"></i>
                    </a>
                </li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-6 orderby">
            <select name="orderby" id="orderby" onchange="" class="form-control">
                <option value="date" <?php selected( 'date', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Neuheiten', 'affiliatetheme' ); ?></option>
                <option value="rating" <?php selected( 'rating', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Beliebtheit', 'affiliatetheme' ); ?></option>
                <option value="price-asc" <?php selected( 'price-asc', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Preis (aufsteigend)', 'affiliatetheme' ); ?></option>
                <option value="price-desc" <?php selected( 'price-desc', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Preis (absteigend)', 'affiliatetheme' ); ?></option>
                <option value="a-z" <?php selected( 'a-z', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Name (aufsteigend)', 'affiliatetheme' ); ?></option>
                <option value="z-a" <?php selected( 'z-a', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Name (absteigend)', 'affiliatetheme' ); ?></option>
            </select>
        </div>
    </div>
</div>

<hr>
  1. También aquí el código HTML del menú desplegable:
    <div class="col-xs-12 col-sm-6 orderby">
            <select name="orderby" id="orderby" onchange="" class="form-control">
                <option value="date" selected="selected">Neuheiten</option>
                <option value="rating">Beliebtheit</option>
                <option value="price-asc">Preis (aufsteigend)</option>
                <option value="price-desc">Preis (absteigend)</option>
                <option value="a-z">Name (aufsteigend)</option>
                <option value="z-a">Name (absteigend)</option>
            </select>
        </div>

Hola chicos, tal vez alguien tenga una idea mejor con mi código JS para mi filtro. En la misma página donde tengo el OrderBy-Column. Tengo un filtro, donde el usuario puede filtrar productos por marca, precio, procesador, etc. Allí tuve el problema de que siempre, si elijo una opción de filtro, tengo que desplazarme hacia abajo y presionar "ahora filtrarlo" en la misma cama. Alguien me ayuda a resolverlo con este código:

<script>
let filterForm = document.querySelector("form.filterform");
if (null !== filterForm) {
    let waitS = setInterval(wait_sliders, 200);
    function wait_sliders() {
        if (null !== filterForm.querySelector(".slider-handle")) {

            // Listen new values
            let slides = filterForm.querySelectorAll('.slide');
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.type === "attributes") {
                        let values = mutation.target.value.split(',');
                        let spans = mutation.target.closest('.slide').querySelectorAll('span');
                        spans[0].innerText = values[0];
                        spans[spans.length - 1].innerText = values[1];
                    }
                });
            });
            
            slides.forEach(slide => {
                let el = slide.querySelector('.bt-slider');
                observer.observe(el, { attributes: true });
                
            });
            
            filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) => {
                let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
                for (let i = 0; i < event.length; i++) {
                    e.addEventListener(event[i], (e) => {
                        filterForm.querySelector('button[type="submit"]').click();
                    });
                }
            }),
                filterForm.querySelector('button[type="submit"]').click();
            clearInterval(waitS);
        }
    }
}
</script>       

Este código me muestra el resultado sin presionar el botón de filtrado y sin actualizar. El problema aquí es que si uso la función Seleccionar orden, actualiza el lado, me muestra durante 1 segundo. la vista correcta, pero este código Java cambia la vista nuevamente. ¿Alguien puede ayudarme a modificar el código JS tal vez para Select-OrderBy-Function? ¡Gracias de antemano!

Si falta algo, por favor dímelo, lo publicaré aquí.

Answer