WP Manifestindependent plugin directory
manifest / integrations / wp-performance-meilisearch

WP Performance Search Meilisearch

Meilisearch implementation for WordPress

by wpperformance · github.com/wpperformance/wp-performance-meilisearch

★ 1stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/wpperformance/wp-performance-meilisearch/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/wpperformance/wp-performance-meilisearch ↗

Meilisearch implementation for WordPress

WP-CLI

This plugin add a wp-cli command for save all post

wp meilisearch reindex_post

update filterable fields

wp meilisearch update_filterable

Hook

Update index of meilisearch when a post has added, updated or deleted

Config

Add in wp-config.php :

define('MEILISEARCH_URL', 'XXX');
define('MEILISEARCH_KEY_PUBLIC', 'XXX');
define('MEILISEARCH_KEY_SECRET', 'XXX');

JS

npm add @meilisearch/instant-meilisearch instantsearch.js

The vars MEILISEARCH_URL, MEILISEARCH_KEY_PUBLIC and MEILISEARCH_APP_INDEX are shared across the page for use in javascript script.

Example of use :

<div id="searchbox"></div>
<div id="hits"></div>
<div id="tags-list"></div>

or pattern

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"anchor":"searchbox","layout":{"type":"constrained","className": "wp-search-algolia"}} -->
  <div id="searchbox" class="wp-block-group"></div>
  <!-- /wp:group -->

  <!-- wp:group {"anchor":"tag-list","layout":{"type":"constrained", "className": "tag-list"}} -->
  <div id="tag-list" class="wp-block-group"></div>
  <!-- /wp:group -->

  <!-- wp:group {"anchor":"hits","layout":{"type":"constrained", "className": "search-hits"}} -->
  <div id="hits" class="wp-block-group"></div>
  <!-- /wp:group -->
</div>
<!-- /wp:group -->
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import instantsearch from 'instantsearch.js'
import { searchBox, hits, refinementList } from 'instantsearch.js/es/widgets'

const initSearch = () => {
  const search = instantsearch({
    indexName: MEILISEARCH_APP_INDEX,
    numberLocale: 'fr',
    searchClient: instantMeiliSearch(MEILISEARCH_URL, MEILISEARCH_KEY_PUBLIC),
    searchFunction(helper) {
      // Ensure we only trigger a search when there's a query
      if (helper.state.query && helper.state.query !== '') {
        document.getElementById('hits').removeAttribute('hidden')
        helper.search()
      } else {
        document.getElementById('hits').setAttribute('hidden', true)
      }
    },
  })

  search.addWidgets([
    searchBox({
      container: '#searchbox',
    }),
    refinementList({
      container: '#tag-list',
      attribute: 'tags',
      limit: 5,
      showMore: true,
    }),
    hits({
      container: '#hits',
      templates: {
        item: `
      <article>
        <a href="{{ url }}">
          <strong>
            {{#helpers.highlight}}
              { "attribute": "title", "highlightedTagName": "mark" }
            {{/helpers.highlight}}
          </strong>
        </a>
        {{#content}}
          <p>{{#helpers.highlight}}{ "attribute": "excerpt", "highlightedTagName": "mark" }{{/helpers.highlight}}</p>
        {{/content}}
      </article>
    `,
      },
    }),
  ])

  search.start()
}

export default initSearch

Doc