Testing Algolia on staging site – questions

Hi Kevin.

To answer the quick question, you’d want to edit this block of the instantsearch.php template file:

https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/instantsearch.php#L82-L105

Before you go touch the file from the plugin folder, make sure you set yourself up to safely override the template files:

https://github.com/WebDevStudios/wp-search-with-algolia/wiki/Customize-Templates

Much like you can do with WooCommerce template files, you can do with our 2 template files, by placing a copy in your active theme and those will be found first.

The instantsearch.php file is largely just a template that we load that has some standard pre-set Instantsearch.js code/widgets, and all of Algolia’s documentation should apply to most of the file. We ship with InstantSearch version 4.x still, so any documentation for Instantsearch 5.x isn’t applicable yet.

Hope that helps point you in the right direction on how/where to edit things to fit your site’s needs.

Got you, thank you @tw2113 I will give it a try!

One other question – on our pages, we heavily rely on ACF plugin as a kind of content block builder – we use their flexible layout feature basically. Is it possible, and how would I go about ensuring the content that is in an ACF field on say our homepage is included in the Algolia index?

If it’s all parts that have gone through the the_content(), then it already should be getting indexed.

Otherwise, information like what’s found at https://github.com/WebDevStudios/wp-search-with-algolia/wiki/Advanced-Custom-Fields will be useful. There it’ll show how to get parts stored in custom fields into the index as well as how to make those shared attributes searchable.

@tw2113 thanks so much for your help so far! Really appreciate it.

On our content pages the ACF stuff is quite complicated in that we have a Flexible block builder that allows editors to construct pages in the way they want, a bit like Elementor for example. But on those pages we don’t have any Gutenburg content editor content so I’m thinking what I’ll do is by using the filters you gave me, I’ll just parse the ACF fields and throw the content into $attributes['content'] that would work OK wouldn’t it? I could just loop through all the blocks that way and pull out the titles and text into that? Do you think that would be the best approach? What about structuring as HTML would I need to do that?

@the_lar You can see how the plugin does content preparation over at https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/includes/indices/class-algolia-searchable-posts-index.php#L140-L172

Most specifically with https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/includes/class-algolia-utils.php#L143-L157 and https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/includes/class-algolia-utils.php#L159-L204

Ideally everything like shortcodes and the like would be parsed already so that the entirety of the to-be-read text content is exposed for indexing.

I don’t really have an answer for a “best” route, just answers as best I can to get the content in the indexed objects for consideration by Algolia queries.

Hi @tw2113 – I’ve made progress but wonder if you can just help me over the line for the last little bit?

I’m basically cycling through the ACF blocks and sending a new attribute for acf_content to Algolia.

I have added a word winklepicker to one of the ACF fields because I know that it doesn’t appear elsewhere on the site (I’m pretty certain).

So I can see that my acf_content and that word is in Algolia’s index:

And I’ve followed your code on the page you linked and added the following to my filters.php file:

function my_posts_index_settings( array $settings ) {

    // Make Algolia search the 'bio' field when searching for results.
    // Using ordered instead of unordered will make words matching in the beginning of the attribute score higher.
    // @see https://www.algolia.com/doc/api-reference/api-parameters/searchableAttributes/
    $settings['searchableAttributes'][] = 'unordered(acf_content)';

    // Make Algolia return a pre-computed snippet of 50 chars as part of the result set.
    // @see https://www.algolia.com/doc/api-reference/api-parameters/#highlighting-snippeting
    $settings['attributesToSnippet'][] = 'acf_content:50';

    // Always return the value we are filtering.
    return $settings;
}
add_filter( 'algolia_posts_page_index_settings', '\App\my_posts_index_settings' );

I then pushed my settings for Pages (it’s the homepage that has the word winklepicker on it)

So when I type ‘winklepicker’ into my search bar, my homepage is the only result – which is great, so that part works. The issue I have is that it’s not displaying the snippet with the matched word highlighted:

If it helps, here is the response I am getting in the Firefox console:

{
  "hits": [
    {
      "post_id": 25,
      "post_type": "page",
      "post_type_label": "Pages",
      "post_title": "Home",
      "post_excerpt": "",
      "post_date": 1564497883,
      "post_date_formatted": "30th July 2019",
      "post_modified": 1695330788,
      "comment_count": 0,
      "menu_order": 0,
      "post_author": {
        "user_id": 1,
        "display_name": "4x4Admin",
        "user_url": "",
        "user_login": "4x4Admin"
      },
      "images": {
        "thumbnail": {
          "url": "https://4x4tyres.localhost/app/uploads/2019/12/hp-feature-1-150x150.jpg",
          "width": 150,
          "height": 150
        }
      },
      "permalink": "https://4x4tyres.localhost/",
      "post_mime_type": "",
      "taxonomies": [],
      "taxonomies_hierarchical": [],
      "is_sticky": 0,
      "acf_content": "Wheel and tyre packages\nTransform your vehicle’s looks and performance, and save time and hassle. Our packages come assembled, balanced and ready to fit to your winklepicker.\n\nSearch for steel wheels\nTransform the looks and performance of your 4×4, van or SUV with new alloy or steel wheels from leading brands. Buy with confidence from the experts. Choose fitting near you or fast delivery to your door.\n\nAbout 4x4 Tyres\nWe’re the UK’s leading dedicated 4×4 and off road wheel and tyre specialist. We source the best brands from around the world, giving you unrivalled choice backed up by expert advice and support. Our most popular tyre brands include BFGoodrich, Cooper, General, Insa Turbo and Falken. Our most popular wheel brands include Tuff Torque, DV8 Works, Challenger, Urban, Kahn and Navis. Every day we help customers get the perfect looks and performance for their 4x4s, vans and SUVs including Land Rover, Defender, Discovery, Range Rover, VW Transporter, Hilux, Amarok, L200 and Navara. Choose between expert fitting at over 300 locations, or fast mail order straight to your door. And you’ll always get our expert advice and outstanding service.\n\n",
      "content": "We are forward thinking, service driven, wheel and tyre specialists who have been trading for 15 years and have collectively over 100 years of specialist 4x4 knowledge. Our team brings together a blend of expertise and experience from a diverse knowledge base of both on and off-road performance vehicles. Having such an eclectic team with varying automotive backgrounds we are able to offer our customers the very best advice.",
      "record_index": 0,
      "objectID": "25-0",
      "_snippetResult": {
        "content": {
          "value": "We are forward thinking, service driven, wheel and tyre specialists …",
          "matchLevel": "none"
        }
      },
      "_highlightResult": {
        "post_title": {
          "value": "Home",
          "matchLevel": "none",
          "matchedWords": []
        },
        "acf_content": {
          "value": "Wheel and tyre packages\nTransform your vehicle’s looks and performance, and save time and hassle. Our packages come assembled, balanced and ready to fit to your __ais-highlight__winklepicker__/ais-highlight__.\n\nSearch for steel wheels\nTransform the looks and performance of your 4×4, van or SUV with new alloy or steel wheels from leading brands. Buy with confidence from the experts. Choose fitting near you or fast delivery to your door.\n\nAbout 4x4 Tyres\nWe’re the UK’s leading dedicated 4×4 and off road wheel and tyre specialist. We source the best brands from around the world, giving you unrivalled choice backed up by expert advice and support. Our most popular tyre brands include BFGoodrich, Cooper, General, Insa Turbo and Falken. Our most popular wheel brands include Tuff Torque, DV8 Works, Challenger, Urban, Kahn and Navis. Every day we help customers get the perfect looks and performance for their 4x4s, vans and SUVs including Land Rover, Defender, Discovery, Range Rover, VW Transporter, Hilux, Amarok, L200 and Navara. Choose between expert fitting at over 300 locations, or fast mail order straight to your door. And you’ll always get our expert advice and outstanding service.\n\n",
          "matchLevel": "full",
          "fullyHighlighted": false,
          "matchedWords": [
            "winklepicker"
          ]
        },
        "content": {
          "value": "We are forward thinking, service driven, wheel and tyre specialists who have been trading for 15 years and have collectively over 100 years of specialist 4x4 knowledge. Our team brings together a blend of expertise and experience from a diverse knowledge base of both on and off-road performance vehicles. Having such an eclectic team with varying automotive backgrounds we are able to offer our customers the very best advice.",
          "matchLevel": "none",
          "matchedWords": []
        }
      }
    }
  ],
  "nbHits": 1,
  "page": 0,
  "nbPages": 1,
  "hitsPerPage": 5,
  "exhaustiveNbHits": true,
  "exhaustiveTypo": true,
  "exhaustive": {
    "nbHits": true,
    "typo": true
  },
  "query": "winklepicker",
  "params": "query=winklepicker&hitsPerPage=5&attributesToSnippet=%5B%22content%3A10%22%5D&highlightPreTag=__ais-highlight__&highlightPostTag=__%2Fais-highlight__",
  "renderingContent": {},
  "processingTimeMS": 1,
  "processingTimingsMS": {
    "_request": {
      "roundTrip": 21
    }
  }
}

Hopefully you can see why this isn’t quite working?

Cheers again for helping!

I think it may be a 2 part thing here.

First adding the attribute to the “attributesToSnippet” section at https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/autocomplete.php#L109-L116

I believe you should be able to change lines 111-113 to:

attributesToSnippet: [
	'content:10',
	'acf_content:10'
],

That should set it up to be available in the templating, where you’d want to look into adding it to

https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/autocomplete.php#L21-L36

How to best include in the output, is kind of up to you, but follow the code example used already with data._snippetResult['content']

Brill, that works perfectly, thank you @tw2113 ??

Welcome.