Встановлюємо 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