WordPress

ajax — Autouzupełnianie/automatyczne sugerowanie interfejsu użytkownika JQuery w WordPress

  • 25 stycznia, 2024
  • 2 min read
ajax — Autouzupełnianie/automatyczne sugerowanie interfejsu użytkownika JQuery w WordPress


Tworzę niestandardowy pasek wyszukiwania z rozwijaną kategorią w mojej witrynie wordpress woocommerce, ale automatyczna sugestia nie działa, wyświetlając tablicę odpowiedzi 0 w konsoli. Co jest nie tak z kodem? Jestem początkujący i nie mogłem zrozumieć.

To jest mój kod JQuery.

jQuery(document).ready(function ($) {
    // Autocomplete functionality
    $('#search-input').autocomplete({
        source: function(request, response) {
            $.ajax({
                type: 'POST',
                dataType: "json",
                url: custom_woocommerce_search_params.ajax_url,
                data: {
                    action: 'custom_woocommerce_auto_suggest',
                    search_query: request.term,
                    key1: 'value1',
                    key2: 'value2'
                },
                success: function(data) {
                    response(data);
                    console.log('Response:', data);
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        },
        minLength: 2, // Minimum characters before triggering autocomplete
        select: function(event, ui) {
                    // Handle selection here
        console.log('Selected Item:', ui.item.value);
        }
    });
});

A to mój kod php.

function custom_woocommerce_auto_suggest() {
    $search_query = sanitize_text_field($_POST['search_query']);

    $args = array(
        's' => $search_query,
        'post_type' => 'product',
        'posts_per_page' => 5,
        'tax_query' => array(
            'relation' => 'OR',
            array(
                'taxonomy' => 'product_cat',
                'field' => 'name',
                'terms' => $search_query,
            ),
        ),
        'meta_query' => array(
            'relation' => 'OR',
            array(
                'key' => '_sku',
                'value' => $search_query,
                'compare' => '%LIKE%',
            ),
            array(
                'key' => '_product_attributes',
                'value' => $search_query,
                'compare' => 'LIKE',
            ),
        ),
    );

    $query = new WP_Query($args);
    $suggestions = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $suggestions[] = get_the_title();
        }
        wp_reset_postdata();
    }

    echo wp_send_json($suggestions);

    wp_die();
}
add_action('wp_ajax_custom_woocommerce_auto_suggest', 'custom_woocommerce_auto_suggest');
add_action('wp_ajax_nopriv_custom_woocommerce_auto_suggest', 'custom_woocommerce_auto_suggest');

A oto skrypty kolejkowania.

// Enqueue necessary scripts and styles
function custom_woocommerce_search_scripts() {
    wp_enqueue_script('jquery-ui-autocomplete', ' array('jquery'), '1.12.1', true);
    wp_enqueue_script('custom-woocommerce-search', plugins_url('/js/custom-woocommerce-search.js', __FILE__), array('jquery'), '1.0', true);

    // Localize script with the category data
    $categories = get_terms('product_cat', array('hide_empty' => false));
    wp_localize_script('custom-woocommerce-search', 'custom_woocommerce_search_params', array(
        'categories' => $categories,
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'custom_woocommerce_search_scripts');


Źródło

Warto przeczytać!  Jak wyświetlać lub ukrywać widżety na określonych stronach WordPress