-
Notifications
You must be signed in to change notification settings - Fork 329
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add redirect url plugin (#1082)
The new Redirect URL plugin is used in conjunction with the dashboard / merchandising studio rule consequence "redirect to a url". It adds an item visually when a redirect matches, and a handler for onSubmit + onSelect to navigate to that URL. Co-authored-by: Haroen Viaene <hello@haroen.me> Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>
- Loading branch information
1 parent
8048442
commit a4f112d
Showing
45 changed files
with
1,403 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# Autocomplete Redirect URL example | ||
|
||
This example helps you quickly bootstrap a basic Autocomplete with redirect functionality enabled. | ||
|
||
<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete redirect URL example" /></p> | ||
|
||
## Demo | ||
|
||
[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/redirect-url) | ||
|
||
## How to run this example locally | ||
|
||
### 1. Clone this repository | ||
|
||
```sh | ||
git clone git@github.com:algolia/autocomplete.git | ||
``` | ||
|
||
### 2. Install the dependencies and run the server | ||
|
||
```sh | ||
yarn | ||
yarn workspace @algolia/autocomplete-example-redirect-url start | ||
``` | ||
|
||
Alternatively, you may use npm: | ||
|
||
```sh | ||
cd examples/redirect-url | ||
npm install | ||
npm start | ||
``` | ||
|
||
Open <http://localhost:1234> to see your app. | ||
|
||
## Additional resources | ||
Learn more [how to get started with Autocomplete](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/getting-started/) in the Algolia documentation. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'; | ||
import { createRedirectUrlPlugin } from '@algolia/autocomplete-plugin-redirect-url'; | ||
import algoliasearch from 'algoliasearch/lite'; | ||
|
||
import '@algolia/autocomplete-theme-classic'; | ||
|
||
const appId = 'latency'; | ||
const apiKey = '6be0576ff61c053d5f9a3225e2a90f76'; | ||
const searchClient = algoliasearch(appId, apiKey); | ||
|
||
autocomplete<{ name: string }>({ | ||
container: '#autocomplete', | ||
placeholder: 'Search', | ||
openOnFocus: true, | ||
plugins: [createRedirectUrlPlugin()], | ||
getSources({ query }) { | ||
return [ | ||
{ | ||
sourceId: 'demo-source', | ||
templates: { | ||
item(params) { | ||
const { item, html } = params; | ||
return html`<a class="aa-ItemLink">${item.name}</a>`; | ||
}, | ||
}, | ||
getItemInputValue({ item }) { | ||
return item.name; | ||
}, | ||
getItems() { | ||
return getAlgoliaResults({ | ||
searchClient, | ||
queries: [ | ||
{ | ||
indexName: 'instant_search', | ||
query, | ||
params: { | ||
ruleContexts: ['enable-redirect-url'], // note: only needed for this demo data | ||
hitsPerPage: 10, | ||
}, | ||
}, | ||
], | ||
}); | ||
}, | ||
}, | ||
]; | ||
}, | ||
}); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import * as preact from 'preact'; | ||
|
||
// Parcel picks the `source` field of the monorepo packages and thus doesn't | ||
// apply the Babel config. We therefore need to manually override the constants | ||
// in the app, as well as the React pragmas. | ||
// See https://twitter.com/devongovett/status/1134231234605830144 | ||
(global as any).__DEV__ = process.env.NODE_ENV !== 'production'; | ||
(global as any).__TEST__ = false; | ||
(global as any).h = preact.h; | ||
(global as any).React = preact; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
||
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> | ||
<link rel="stylesheet" href="style.css" /> | ||
|
||
<title>Redirect URL | Autocomplete</title> | ||
</head> | ||
|
||
<body> | ||
<div class="container"> | ||
<div id="autocomplete"></div> | ||
</div> | ||
|
||
<script type="module" src="env.ts"></script> | ||
<script type="module" src="app.tsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
{ | ||
"name": "@algolia/autocomplete-example-redirect-url", | ||
"description": "Autocomplete example for Redirect URL plugin", | ||
"version": "1.7.4", | ||
"private": true, | ||
"license": "MIT", | ||
"scripts": { | ||
"build": "parcel build index.html", | ||
"start": "parcel index.html" | ||
}, | ||
"dependencies": { | ||
"@algolia/autocomplete-js": "1.7.4", | ||
"@algolia/autocomplete-plugin-redirect-url": "1.7.4", | ||
"@algolia/autocomplete-theme-classic": "1.7.4", | ||
"algoliasearch": "4.14.3", | ||
"preact": "10.5.13" | ||
}, | ||
"devDependencies": { | ||
"parcel": "2.8.2" | ||
}, | ||
"keywords": [ | ||
"algolia", | ||
"autocomplete", | ||
"javascript" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
background-color: rgb(244, 244, 249); | ||
color: rgb(65, 65, 65); | ||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
padding: 1rem; | ||
} | ||
|
||
.container { | ||
margin: 0 auto; | ||
max-width: 640px; | ||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.