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).

<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css" />

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

Getting started

To use the widget you will need an Afosto Instant Search search engine. Don't have one yet? Sign up on Afosto.com and follow the guides in our documentation.

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';
import '@afosto/instant-search-widget/dist/afosto-instant-search-widget.min.css';

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 nl from '@afosto/instant-search-widget/i18n/nl';
import en from '@afosto/instant-search-widget/i18n/en';

AfostoInstantSearchWidget.addMessages('nl', nl);
AfostoInstantSearchWidget.addMessages('en', en);

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',
    title: 'Filters',
  },
  hitsPerPage: {
    optionsLabel: '{value} results',
  },
  search: {
    placeholder: 'Search...',
    resetTitle: 'Clear your search query.',
    submitTitle: 'Submit your search query.',
  },
  stats: {
    resultsLabel: '{value} results found',
  },
});

Compatibility

Node >= 14

License

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