You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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>

Result

RedirectUrl Button Example