RedirectUrl widget

Overview

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.

Phtml template file examples using 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]
• [url]

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