![\"Afosto\"](\"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png?w=268\"){kind=logo}
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/@afosto/instant-search-widget.svg\")
\n ![\"License\"](\"https://img.shields.io/badge/license-MIT-informational\"){kind=icon}
\nThis library is an Afosto instant search javascript widget. With this widget you can easily implement Afosto instant search on your website.\n
\n\n## Installation\n\n### Yarn / NPM\n\n```sh\n# Install with Yarn\nyarn add @afosto/instant-search-widget\n\n# Install with NPM\nnpm install @afosto/instant-search-widget\n```\n\n\n### Browser\n\nThis library supports the **last two** versions of major browsers (Chrome, Edge, Firefox, Safari).\n\n```html\n\n\n\n\n\n```\n\n## Getting started\n\n> To use the widget you will need an Afosto Instant Search search engine. Don't have one yet? Sign up on [Afosto.com](https://afosto.com/register/) and follow [the guides in our documentation](https://afosto.com/docs/apps/instant-search/). \n\nFirst you initialize the Afosto search widget with your **search engine key**. This search engine key can be found in the Afosto app.\n\n### ES6\n\n```js\nimport { AfostoInstantSearchWidget } from '@afosto/instant-search-widget';\nimport '@afosto/instant-search-widget/dist/afosto-instant-search-widget.min.css';\n\nAfostoInstantSearchWidget.init('my-search-engine-key');\n```\n\n### CJS\n\n```js\nconst { AfostoInstantSearchWidget } = require('@afosto/instant-search-widget');\n\nAfostoInstantSearchWidget.init('my-search-engine-key');\n```\n\n### Browser\n\n```html\n\n```\n\n## Usage\n\nAdd an element to your website with a data attribute as shown below.\n\n```html\n\n```\n\n## I18n\n\nThe 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.\n\n**Important: Load the i18n locale files after the widget.**\n\n### ES6\n\n```js\nimport { AfostoInstantSearchWidget } from '@afosto/instant-search-widget';\nimport nl from '@afosto/instant-search-widget/i18n/nl';\nimport en from '@afosto/instant-search-widget/i18n/en';\n\nAfostoInstantSearchWidget.addMessages('nl', nl);\nAfostoInstantSearchWidget.addMessages('en', en);\n```\n\n### Browser\n\n```html\n\n\n\n```\n\nCurrently supported languages: `de`, `en` (default), `es`, `fr` and `nl`.\n\n### Configure locale\n\nSetup the locale on widget initialization.\n\n```js\n// Set the locale for the widget. For this to work properly you need to include the i18n locale files.\n\nAfostoInstantSearchWidget.init('my-search-engine-key', {\n locale: 'en',\n});\n```\n\nOr change the locale of the widget dynamically.\n\n```js\nAfostoInstantSearchWidget.setLocale('en');\n```\n\n### Custom messages\n\nIf you would like to use your own translation messages, use the addMessages functionality.\n\n**Note:** For the available messages check the [DEFAULT_TRANSLATIONS](https://github.com/afosto/instant-search-widget/blob/master/src/constants.js#L7) constant.\n\n```js\n// Don't forget to pay attention to the variables in the translation messages.\n\nAfostoInstantSearchWidget.addMessages('en', {\n close: 'Close',\n filters: {\n closeFilters: 'Close',\n noResults: 'No results',\n reset: 'Clear filters',\n showMore: 'Show more',\n showLess: 'Show less',\n title: 'Filters',\n },\n hitsPerPage: {\n optionsLabel: '{value} results',\n },\n search: {\n placeholder: 'Search...',\n resetTitle: 'Clear your search query.',\n submitTitle: 'Submit your search query.',\n },\n stats: {\n resultsLabel: '{value} results found',\n },\n});\n```\n\n### Initial search state\nIt is possible to set an initial search state. With it, you can define the initial state of filters and the query.\nFor a reference of the available options within the searchState, check the [documentation](https://www.algolia.com/doc/api-reference/widgets/ui-state/react/).\n\n```js\nAfostoInstantSearchWidget.init('my-search-engine-key', {\n searchState: {\n // set te initial query to 'phone'\n query: 'phone',\n // set the brand filter to initial option 'Apple' \n refinementList: {\n brand: ['Apple'],\n },\n // set the range filter price to initial range between 20 and 500\n range: {\n price: {\n min: 20,\n max: 500\n }\n },\n },\n});\n```\n\n### Customizing the design\n\nThe widget is fully customizable with CSS. The layout is built with CSS grid and grid-areas. That means you can move parts of the widget to different place or hide them completely. Check out this article for more explanation on how to customize the widget: [Lightning fast search widget with Afosto Instant Search](https://medium.com/afosto/lightning-fast-search-widget-with-afosto-instant-search-d9391b01ec02)\n\nYou can also check this demo from the article. It has a different layout and a dark theme. \n[Afosto Instant Search Widget customization demo](https://codepen.io/gijsbotje/pen/oNppGqj)\n\n## Built with Afosto Instant Search Widget\n\nhttps://plantcareforbeginners.com/ \nhttps://www.dekorenbeurs.nl/\n\n## Compatibility\n\n- Node >= 14\n\n## License\n\nThis project is licensed under the terms of the [MIT license](https://github.com/afosto/instant-search-client/blob/master/LICENSE).\n","readmeFilename":"README.md"}