Package Exports

@afosto/instant-search-widget
@afosto/instant-search-widget/dist/afosto-instant-search-widget.min.js
@afosto/instant-search-widget/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@afosto/instant-search-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Afosto Instant Search Widget

This library is an Afosto instant search javascript widget. With this widget you can easily implement Afosto instant search on your website.

Installation

Yarn / NPM

# Install with Yarn
yarn add @afosto/instant-search-widget

# Install with NPM
npm install @afosto/instant-search-widget

Browser

This library supports the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>

Getting started

First you initialize the Afosto search widget with your search engine key. This search engine key can be found in the Afosto app.

ES6

import AfostoInstantSearchWidget from '@afosto/instant-search-widget';

AfostoInstantSearchWidget.init('my-search-engine-key');

CJS

const AfostoInstantSearchWidget = require('@afosto/instant-search-widget');

AfostoInstantSearchWidget.init('my-search-engine-key');

Browser

<script>
    document.addEventListener('DOMContentLoaded', function() {
      AfostoInstantSearchWidget.init('my-search-engine-key');
    });
</script>

Usage

Add an element to your website with a data attribute as shown below.

<button data-af-instant-search>Toggle widget</button>

I18n

The default language used for this widget is English. To use other languages you need to include/import the i18n locale files or add custom messages.

Important: Load the i18n locale files after the widget.

ES6

import AfostoInstantSearchWidget from '@afosto/instant-search-widget';
import '@afosto/instant-search-widget/i18n/en';
import '@afosto/instant-search-widget/i18n/nl';

Browser

<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/i18n/en.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/i18n/nl.js"></script>

Configure locale

Setup the locale on widget initialization.

// Set the locale for the widget. For this to work properly you need to include the i18n locale files.

AfostoInstantSearchWidget.init('my-search-engine-key', {
  locale: 'en',
});

Or change the locale of the widget dynamically.

AfostoInstantSearchWidget.setLocale('en');

Custom messages

If you would like to use your own translation messages, use the addMessages functionality.

Note: For the available messages check the DEFAULT_TRANSLATIONS constant.

// Don't forget to pay attention to the variables in the translation messages.

AfostoInstantSearchWidget.addMessages('en', {
  close: 'Close',
  filters: {
    noResults: 'No results',
    reset: 'Clear filters',
    showMore: 'Show more',
    showLess: 'Show less',
  },
  hitsPerPage: {
    optionsLabel: '{value} results',
  },
  search: {
    placeholder: 'Search...',
  },
  stats: {
    resultsLabel: '{value} results found',
  },
});

Compatibility

Node >= 14

License

This project is licensed under the terms of the MIT license.