Create Confirmation Widgets in Magento 2

The Magento confirmation widget is used to display a dialog box with a specified message, along with a confirmation button (i.e, OK) and a Cancel button. We can find the Magento confirmation widgets source file in the below path,

<Magento installed root directory>/vendor/magento/module-ui/view/base/web/js/modal/confirm.js

We can implement confirmation windows for both, Admin and storefront by using the confirmation widget.

Initialize Confirmation Widget:

The confirmation widget can be initialized in the following two methods,

Method 1:

The confirmation widget can be initialized with binding to a certain element.

Example HTML Code:

<a class="action delete" id="delete_image" href="<?php /* @escapeNotVerified */ echo $block->getDeleteUrl($_customer->getEntityId()); ?>">
    <span>
        <?php /* @escapeNotVerified */ echo __('Delete'); ?>
    </span>
</a>

Example JS Code:

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/confirm'
    ],
    function($, confirmation) {
        $('#delete_image').on('click', function(event){
            event.preventDefault;
            confirmation({
                title: 'Some title',
                content: 'Some content',
                actions: {
                    /**
                     * Callback always - called on all actions.
                     */
                    always: function () {},

                    /**
                     * Callback confirm.
                     */
                    confirm: function () {},

                    /**
                     * Callback cancel.
                     */
                    cancel: function () {}
                }
            });
        });
    });
</script>

Here, the confirmation widget will be initialized while clicking on the <a> tag, and after the widget initialized the modal pop-up window will open.

Method 2:

The confirmation widget can be initialized without binding to a certain element.

Example JS Code:

<script>
    require([
        'Magento_Ui/js/modal/confirm'
    ],
    function($, confirmation) {
        confirmation({
            title: 'Some title',
            content: 'Some content',
            actions: {
                /**
                 * Callback always - called on all actions.
                 */
                always: function () {},

                /**
                 * Callback confirm.
                 */
                confirm: function () {},

                /**
                 * Callback cancel.
                 */
                cancel: function () {}
            }
        });
    });
</script>

Here, the confirmation widget will be initialized while the page loading, and after the widget initialized the modal pop-up window will open.

Confirmation Widget Options:

  • title: the title of the confirmation pop-up window.
  • content: the content of the confirmation pop-up window.
  • actions: this is the confirmation widget callback, and it has the following three callback events,
    • confirm callback: it will be called when the confirmation button is clicked.
    • cancel callback: it will be called when the cancel button is clicked.
    • always callback: it will be called when both the confirmation button and the cancel button are clicked.

The Magento confirmation widget also has some other options,

  • autoOpen
  • clickableOverlay
  • focus

You can find the detail description about those options here

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *