RedirectUrl widget
The RedirectUrl widget allows redirecting to an URL when an event triggers.
The RedirectUrl widget source is lib/web/mage/redirect-url.js.
Initialize the RedirectUrl widget
For information about how to initialize a widget in a JS component or .phtml
template, see the Initialize JavaScript topic.
Generally the RedirectUrl widget is instantiated like following:
1
$("#element").redirectUrl({url: 'http://example.com'});
Where:
#element
is the selector of the element for which RedirectUrl is initialized.
The following example shows a PHTML file using the script:
1
2
3
4
5
6
7
8
9
10
<script>
require([
'jquery',
'redirectUrl'
], function ($) {
'use strict';
$("#element").redirectUrl({url: 'http://example.com'});
});
</script>
Options
The RedirectUrl widget has the following options:
event
The event of the DOM element for which you want to carry out the redirect.
Type: String
Default value: click
url
The redirect URL.
Type: String
Default value: undefined
Code sample
The following example shows the button and after clicking on this button you will be redirected to the http://example.com
URL.
1
2
3
4
5
6
<button class="action primary"
data-mage-init='{"redirectUrl": {"event": "click", "url": "http://example.com"}}'
type="button"
title="Redirect Button">
<span>Redirect Button</span>
</button>