PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
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>