search

WebDevStudios / wp-search-with-algolia

Improve search on your site. Autocomplete is included, along with full control over look, feel and relevance.
https://wordpress.org/plugins/wp-search-with-algolia/
146 stars 55 forks source link

Feature/272 autocomplete upgrade #370

Open tw2113 opened 1 year ago

tw2113 commented 1 year ago

I named the branch wrong, it should be "feature/232-autocomplete-upgrade", so this should be for #232

Upgrade our available options for Algolia Autocomplete

With this feature, we will not be forcing everyone to upgrade their Autocomplete version, but we will start the process of offering the ability to.

Due to the detail that Algolia Autocomplete version 1.x and higher changes from listening to all specified form inputs, to requesting a dedicated div to render in, we can't blanket update everyone. Every user wanting to upgrade will need to amend their theme and website to have something like <div id="autocomplete"></div> or similar selector. This is where Algolia will render the autocomplete search field. The ID does not matter so much, as much as a valid selector in general. I have added filterability for this detail, as you'll see in the code.

With this PR, to help with some separation, there is a new assets directory that stores the frontend assets for:

  1. AlgoliaSearch Javascript Client
  2. Autocomplete.js 1.x
  3. Autocomplete Theme classic 1.x
  4. instantsearch.js

Autocomplete.js 0.38.x will at present time be left in the original js location, as well as the other libraries. We can remove the duplicates from version control if really desired.

Choosing Autocomplete version

There is a new setting on the "Autocomplete" settings page that lets users choose between "Legacy" aka our current 0.38.x version, or "Modern", which is presently at version 1.11.x. This option defaults to "Legacy" and upon admin loading, should populate the option with that default value, preventing accidental breaking changes.

What assets and template file(s) gets loaded depends on the selected setting.

Template changes

The plugin has a new autocomplete-modern.php file, as well as a new algolia-autocomplete-modern.css stylesheet file. The template file has been updated to match the structure and style that Autocomplete 1.11.x expects, and I aimed to replicate the look and feel of the dropdown as much as possible from our legacy. The stylesheet file is largely retained but the selectors are updated to match what comes in.

Autocomplete config changes

I have gone ahead and added a new input_selector_modern property with its own WordPress filter for customization. It does default to '#autocomplete' where that gets passed into the configuration object for Autocomplete in the template file.

Let me know what your thoughts are, anything you would like changed, anything you think could be changed but needs further discussion, and whatnot.

Hopefully this pushes us over the proverbial edge to help our users start leveraging modern Autocomplete functionality, without having to leave them scratching their heads with a blank slate.

tw2113 commented 1 year ago

This PR needs this re-added somehow

<?php
do_action( 'algolia_autocomplete_after_hit' );
?>
tw2113 commented 11 months ago

Let's also look into adding any of the UX tracking/analytics/etc features that come with Autocomplete modern into the new template file, even if we have them commented out. Just placing things in the correct spot for users to see, would be a big step up for someone coming into the plugin, and wanting those features.