Yii2. Змінюємо вигляд стандартного діалогу confirm за допомогою sweetAlert

Встановлюємо sweetAlert за допомогою composer, для цього відкриваємо консоль, переходимо в папку з проєктом і запускаємо таку команду:

composer require --prefer-dist bower-asset/sweetalert "*"

Далі створюємо файл з ім'ям SweetAlertAsset.php поруч з AppAsset.php в папці assets вашого проєкту з наступним змістом:

<?php

namespace app\assets;

class SweetAlertAsset extends \yii\web\AssetBundle
{
    public $sourcePath = '@bower/sweetalert/dist';
    public $css = [
        'sweetalert.css',
    ];
    public $js = [
        'sweetalert.min.js'
    ];
}

Стандартний yii.confirm знаходиться в app/vendor/yiisoft/yii2/assets/yii.jsі виглядає наступним чином:

/**
* Displays a confirmation dialog.
* The default implementation simply displays a js confirmation dialog.
* You may override this by setting `yii.confirm`.
* @param message the confirmation message.
* @param ok a callback to be called when the user confirms the message
* @param cancel a callback to be called when the user cancels the confirmation
*/
confirm: function (message, ok, cancel) {
    if (confirm(message)) {
        !ok || ok();
    } else {
        !cancel || cancel();
    }
},

Нам необхідно перевизначити стандартний yii.confirm. Для цього створіть папку js (якщо її ще немає) у вашому проєкті @app/web/js, а в ній js файл yii.confirm.overrides.js з наступним вмістом:

/**
 * Override the default yii confirm dialog. This function is
 * called by yii when a confirmation is requested.
 *
 * @param string message the message to display
 * @param string ok callback triggered when confirmation is true
 * @param string cancelCallback callback triggered when cancelled
 */
yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
        title: message,
        type: 'warning',
        showCancelButton: true,
        closeOnConfirm: true,
        allowOutsideClick: true
    }, okCallback);
};

Далі додамо js файл у Yii2-asset-bundle. Для цього відкрийте assets/AppAsset.php, додайте до нього js файл yii.confirm.overrides.js та залежність SweetAlertAsset для підключення необхідних скриптів та стилів у проєкт. Файл assets/AppAsset.php будет выглядеть следующим образом:

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{

    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        //js який перевизначає yii.confirm
        'js/yii.confirm.overrides.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',

        //імпорт файлів SweetAlertAsset
        'app\assets\SweetAlertAsset',
    ];
}

На цьому все. Давайте перевіримо, відкриємо будь-який список управління записами та натиснемо видалити для виклику діалогу підтвердження. Як було раніше:

Зараз замість стандартного confirm:

Також це працюватиме під час використання кнопок у коді проєкту:

<?php

use yii\helpers\Html;

//...

echo Html::submitButton(
    'Кнопка',
    [
        'class' => 'btn',
        'data-confirm' => Yii::t('yii', 'Ви точно хочете це зробити?'),
    ]
);

Ось так легко можна поміняти стандартний діалог confirm в yii2