ACF Integration

We’d like to introduce you to our brand new series! Here we are planning to write about how FiboSearch integrates with other WordPress plugins, themes and other third-party tools. We are aware that every plugin you install affects how your shop runs. It is our best intention to make FiboSearch integrate with any and every tool that you intend to use. Let us explain, in detail, how we accomplish this and what drives those integrations.

To kickstart our series, we are going to explain our approach to integrating FiboSearch with Advanced Custom Fields (ACF in short). ACF has at least one million active users, many of whom also use our plugin. Thanks to our tremendous support we have great insight into what kind of functionality they require from FiboSearch. Some recurring requests include:

• is it possible to allow users to search products via ACF field content?
• how to display values from custom fields within instant search autosuggestions?

We will describe our approach step by step. The agenda:

1. FiboSearch + ACF basics
2. Really tight fit
3. Recap

We hope that you will be encouraged to at least try out those features if you happen to be both a FiboSearch and ACF user.

FiboSearch + ACF basics

To begin, let us answer a question that our clients ask most often. Is it possible to allow customers to search for products via custom ACF field content? The answer is: sure, they can! Here is our approach.

Let’s assume that your shop is smooth, up and running, with up-to-date versions of WooCommerce, ACF and FiboSearch Pro. What you need to do first is add a simple ACF field. For the sake of simplicity we are going to use our favourite example: an online bookstore.

• Our first custom field will be an ISBN number:

The ISBN number is a unique, international number that is assigned to a particular edition of a book Find out more about ISBN . So, it is very convenient for customers to search your shop just by typing ISBNs. After adding an ACF field, you can assign an ISBN number to every item in your store.

• Our next step is to actually attach the number to an item. Let’s take the classic Alice in Wonderland by Lewis Caroll. The item was already in our store, but now we will be able to add a custom field containing the ISBN:

Great! Now our product is ready to be searched by its unique ISBN. One last step is to enable FiboSearch index ISBNs so that users can search for corresponding products. This is where you can see the close integration between ACF and FiboSearch.

Let’s open the WooCommerce panel and navigate to the FiboSearch tab. Please, make sure that you have checked the Show advanced settings box!

• From there, navigate to Search config
• Select Search in custom fields
• When you click on the text box, a list will pop up. You will see a number of available options, your custom fields included
• For now, let’s only select ACF -> ISBN. The selection should appear in the field above with a slightly grey background, like this: Important notice: for all changes in the FiboSearch settings, please remember to click “Save changes” at the bottom of the settings page.

You can repeat this procedure with any number of custom ACF fields. This is as simple and elegant as it gets. We hope that you’ll find this feature useful. It works great for shops ranging from bookstores, car parts, digital files repositories, and in any other branch that requires custom data added with ACFs.

We want to underline two important points before we move on. First, please remember that every time you make these adjustments to your store, the search index needs to be rebuilt. This happens automatically in the background, but the process is sometimes lengthy and can take a few minutes. This is especially relevant for larger
e-commerces with thousands of products. The changes you make in FiboSearch will be not immediately visible from the front end of your store. Please make sure that the process is finished and your search index is up to date. Here’s how you can verify this:

As mentioned above, the process itself is automatic and will run in background even if you accidentally close the tabs in your browser.

What’s more, at this point neither you nor your customers will be able to see ISBN numbers within autosuggestions presented in the search bar. At this point, it is only possible to search your shop by ISBNs and find corresponding products. What’s even more awesome with FiboSearch Pro and ACF integration is that users can see this additional data in the search bar. We will describe this in the second part of this tutorial in a moment.

For now, let’s see what happens when a customer only knows the book title:

In this case, FiboSearch is set up to offer an autocomplete suggestion with a minimum of three characters typed and restricted to present only three suggestions at a time (moreover, our shop has only three records that contain the phrase starting with “Ali*”). We searched for the book “Alice in Wonderland” and the search engine gave us the most promising results from the store.

Likewise, if we want to search via our custom “ISBN number” field, we also have to type at least three characters. Moreover, we can now search via ISBNs, by adding ACFs and ISBNs to our books. Let’s see this works in practice:

Bingo! Our ISBN starts with the digits “978-” and our shop includes only one corresponding item. Of course, the more numbers are given, the more precise the results will be. This is especially relevant for major e-commerces with thousands of items. Many products will share some data, like a piece of ISBN/EAN code, a specific part of the name, etc. Please remember that you can add as many ACFs as you like, giving your customers more freedom to choose how they want to search for your products. At the same time, the results will be more precise, making your shop stand out from the competition, helping you become a go-to place for customers from your branch.

Really tight fit

Our ultimate goal for adding ACFs and any other custom data is to eventually present it to the customers at the front end. But beforehand we have to examine another type of integration between ACF and FiboSearch. Some of you might be already familiar with the ability to display extra text in search suggestions. We described this thoroughly in our documentation (find out how to display extra text in search suggestions). Here’s a quick recap:

• you can display a few things within the search bar autosuggestion: product name, image, SKU, short description, and price
• you can also use ACF to create a custom field and display it as additional info in the search box;
• data that can be presented includes: custom fields, custom taxonomies, product attributes 

To help you better understand what can be achieved with this integration, let’s go to The Bookstore Online once again. 

In the first part of this tutorial we added a custom field that allows you to assign an ISBN to a book — please refer back if you’ve just started reading from this point. We made sure that our store is searchable by this feature too. But in most cases this is not enough. At this point we will ensure that the ACF data is visible for your customers.

Here’s a quick recap of our front end. It is now both searchable by title and ISBN, but without any ACF data present:

Now let’s finish up by presenting the data from the ACF in the search bar. To begin with, we have to do some coding. We assume that you use a child theme in your shop — we strongly encourage you to do so! If you have never used one, please read this tutorial on the official WP.org webpage. If this topic is a complete novelty for you, please contact the support team for the theme you use on your site. 

First, we need to add custom snippets to the WordPress site. Some snippets must be running in special WordPress SHORTINIT mode and some as normal WordPress snippets e.g. in functions.php file. Every snippet includes comments telling you in which mode you should run it. From this point we will work on two directories:

• a new, empty file fibosearch.php in the root directory of  your child theme Once again, we strongly encourage you to use the child theme for every store and/or webpage that you develop in WordPress. – paste the snippet there – this one will be used for [SHORTINIT MODE]
• functions.php in your child theme or via the CodeSnippet plugin – this one will be used for [NORMAL MODE] 

Next, we want to link ISBN codes to our products. To do so, add this snippet to functions.php in your child theme or use the CodeSnippet plugin.

add_filter( 'dgwt/wcas/tnt/indexer/readable/product/data', function ( $data, $product_id, $product ) {

    $value = $product->getCustomField( 'isbn' );

    if ( ! empty( $value ) ) {
        $data['meta']['isbn'] = $value;
    }

    return $data;
}, 10, 3 );

This snippet allows you to save ISBN code in the memory, which will come in handy later for searching.

Finally, let’s add this custom snippet to the fibosearch.php. This enables us to read ISBN codes from the storage while searching and then display it within autosuggestions.

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/product', function ( $data, $suggestion ) {

    if ( ! empty( $suggestion->meta['isbn'] ) ) {
        $data['content_after'] = '<br />ISBN: ' . $suggestion->meta['isbn'];
    }

    return $data;
}, 10, 2 );

Perfect! Now we’re ready not only to search our store by ISBNs, but also present them within autosuggestions. This is how it looks in our bookstore example:

First, let’s search by the title:

And, last but not least, searching by the ISBN number:

Aaaaand hey presto! As you can see, in both cases autosuggestions contain ISBNs added using ACF. You can use this feature to your heart’s content and finally describe your products the way you want to.

Recap

To sum up, it’s safe to say that FiboSearch Pro fully integrates with ACF. Here’s a recapitulation of the features you can use:

• indicate which fields should be indexed by FiboSearch;
• add any kind of ACF that might be the most suitable for your store – FiboSearch Pro supports ACFs such as Text, Text Area, Number, Wysiwyg Editor, Message, Accordion, Repeater, Table and Flexible Content;
• allow customers to search your store by data from the custom fields;
• display data from custom fields within the search bar’s autosuggestions.

Once again, feel free to dive into the details in our documentation on how to display extra text in search suggestions and how to search for brands. If you have any suggestions of what can be improved in terms of integration between FiboSearch Pro and ACF, give us a shout!

Kind regards

FiboSearch Team