How to integrate a faceted search UI in WordPress and WooCommerce

Introduction

Faceted search has revolutionized the way people search for products on an e-commerce website. It allows users to refine their search options and quickly find what they are looking for. In this blog post, we will discuss how you can integrate a faceted search UI in WordPress and WooCommerce.

Faceted Search UI Integration in WordPress

To start with, you need to add the necessary code to your theme files. Below is an example of a PHP client that retrieves data from your website and sends it to the JavaScript client:

function faceted_search_filter_get_data_ws() {
    global $wp_query;

    $fsws_data = array(
        'total_results' => $wp_query->found_posts,
        'total_pages' => $wp_query->max_num_pages,
        'products' => array()
    );

    if ($wp_query->have_posts()) {
        while ($wp_query->have_posts()) {
            $wp_query->the_post();

            $product = wc_get_product(get_the_ID());

            $fsws_data['products'][] = array(
                'id' => $product->get_id(),
                'title' => $product->get_name(),
                'permalink' => get_permalink(),
                'image' => wp_get_attachment_image_src($product->get_image_id(), 'thumbnail')[0],
                'price' => $product->get_sale_price() ? $product->get_sale_price() : $product->get_regular_price()
            );
        }
    }

    wp_reset_postdata();

    wp_send_json($fsws_data);
}

Now, you need to add the JavaScript client to your theme files. Below is an example of a JavaScript client that displays the faceted search UI:

$(document).ready(function () {
    var searchInput = $('#search-input');
    var searchButton = $('#search-button');
    var resultsContainer = $('#results-container');
    var url = '<!--?php echo admin_url('admin-ajax.php'); ?-->';

    searchButton.click(function () {
        var data = {
            action: 'faceted_search_filter_get_data_ws',
            s: searchInput.val()
        };

        $.get(url, data, function (response) {
            var html = '';

            $.each(response.products, function (index, productData) {
                html += '<div class="product"><a href="' + productData.permalink + '"><img src="' + productData.image + '" alt="' + productData.title + '"><h5>' + productData.title + '</h5></a></div>';
            });

            resultsContainer.html(html);
        });
    });
});

This should allow you to display a basic faceted search UI on your WordPress website.

Faceted Search UI Integration in WooCommerce

If you are using WooCommerce, you might want to modify the code to include product attributes as search filters. Here is an example of how to add a filter for the product category:

function faceted_search_filter_get_data_ws() {
    global $wp_query;

    $fsws_data = array(
        'total_results' => $wp_query->found_posts,
        'total_pages' => $wp_query->max_num_pages,
        'products' => array(),
        'product_categories' => array()
    );

    if (isset($_GET['product_category'])) {
        $wp_query->set('tax_query', array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => $_GET['product_category']
            )
        ));
    }

    if ($wp_query->have_posts()) {
        while ($wp_query->have_posts()) {
            $wp_query->the_post();

            $product = wc_get_product(get_the_ID());

            if (!in_array($product->get_category_ids()[0], $fsws_data['product_categories'])) {
                $fsws_data['product_categories'][] = array(
                    'id' => $product->get_category_ids()[0],
                    'name' => get_term_by('id', $product->get_category_ids()[0], 'product_cat')->name,
                    'selected' => isset($_GET['product_category']) && $_GET['product_category'] == get_term_by('id', $product->get_category_ids()[0], 'product_cat')->slug
                );
            }

            $fsws_data['products'][] = array(
                'id' => $product->get_id(),
                'title' => $product->get_name(),
                'permalink' => get_permalink(),
                'image' => wp_get_attachment_image_src($product->get_image_id(), 'thumbnail')[0],
                'price' => $product->get_sale_price() ? $product->get_sale_price() : $product->get_regular_price()
            );
        }
    }

    wp_reset_postdata();

    wp_send_json($fsws_data);
}

This code modifies the product query to take into account the product category passed as a parameter in the URL and returns the product categories as search filters in the response. You can modify this code to include other product attributes as search filters.

How WPSOLR Can Help

WPSOLR is a premium plugin that provides faceted search functionality for WordPress and WooCommerce. It allows you to integrate a faceted search UI with advanced search features such as autocomplete, typo-tolerance, and multilingual search. WPSOLR also supports indexing and searching metadata, custom fields, taxonomies, and attachments. It is a powerful plugin that can help you improve the search experience on your website and increase your conversions.

Conclusion

In this blog post, we have discussed how to integrate a faceted search UI in WordPress and WooCommerce. We have provided examples of PHP and JavaScript code that can be used to create a basic faceted search UI and modify it to include product attributes as search filters. We have also mentioned how WPSOLR can help you improve the search experience on your website. We hope that this post has been helpful and that you can use this knowledge to make your website’s search functionality more user-friendly and efficient.