1 min read

Redirection

A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like help, shipping costs, my account, where a link to a section in the website will be more helpful than the set of results returned.

Props

Name	Description	Type	Default
`mode`	The redirection mode. Auto for auto redirection and manual for an user interaction.	`string`	`'auto'`
`delayInSeconds`	The waiting time in seconds until the redirection is made.	`number`	`0`

Slots

Name	Description	Bindings (name - type - description)
`default`

Events

This component emits the following events:

UserClickedARedirection (opens new window) after the user clicks the redirection button.
UserClickedAbortARedirection (opens new window) after the user clicks the abort redirection button.

Play with the component

In this example, a query has been searched in the search input resulting in a case where the response has a redirection.

A text box appears bellow the search box indicating that you're going to be redirected to another web page.

This component has two modes:

Auto mode means that the redirection will occur after a certain number of seconds passed as a property.
If the value is 0 the redirection will be instantly.
Manual mode means that the user have to click the redirect button or nothing will happen.

Type any term in the input field to try it out!

<template>
  <Redirection #default="{ redirection, redirect, abortRedirect }">
    <span>In a few seconds you're going to be redirected!</span>
    <span>{{ redirection.url }}</span>
    <button @click="redirection">Redirect now!</button>
    <button @click="abortRedirect">Abort redirection!</button>
  </Redirection>
</template>
<script>
  import { Redirection } from '@empathyco/x-components/search';
  export default {
    name: 'RedirectionDemo',
    components: {
      Redirection
    }
  };
</script>

Extending the component

Components behaviour can be changed, in this example the mode of the component will be manual forcing the user to accept the redirection

<template>
  <Redirection #default="{ redirection, redirect }">
    <span>{{ redirection.url }}</span>
    <button @click="redirect">Redirect now!</button>
  </Redirection>
</template>
<script>
  import { Redirection } from '@empathyco/x-components/search';
  export default {
    name: 'RedirectionDemo',
    components: {
      Redirection
    },
    data() {
      return {
        mode: 'manual'
      };
    }
  };
</script>