First, pull in the package through Composer.
"require": {
"uxweb/sweet-alert": "~1.1"
}
If using Laravel 5, include the service provider within app/config/app.php
.
'providers' => [
'UxWeb\SweetAlert\SweetAlertServiceProvider'
];
And, for convenience, add a facade alias to this same file at the bottom:
'aliases' => [
'Alert' => 'UxWeb\SweetAlert\SweetAlert'
];
Note that this package works only by using the BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT".
Finally, you need to get the Sweet Alert library, you can so by:
Download the .js and .css from the website
Or through bower:
bower install sweetalert
Alert::message('Message', 'title')
Alert::info('Message', 'title')
Alert::success('Message', 'title')
Alert::error('Message', 'title')
Within your controllers, before you perform a redirect...
public function store()
{
Alert::message('Robots are working!');
return Redirect::home();
}
alert('Message')
alert()->message('Message')
alert()->success('Message', 'title')
alert()->error('Message', 'title')
Alternatively, you may reference the alert()
helper function, instead of the facade. Here's an example:
/**
* Destroy the user's session (logout).
*
* @return Response
*/
public function destroy()
{
Auth::logout();
alert()->success('You have been logged out.', 'Good bye!');
return home();
}
For a general information alert, just do: alert('Some message');
(same as alert->message('Some message');
).
By default, all alerts will dismiss after a sensible default number of seconds.
But no fear, if you need to specify a different time you can:
// -> Remember!, the number is set in milliseconds
alert('Hello World!')->autoclose(3000);
Also, if you need the alert to be persistent on the page until the user dismiss it by pressing the alert confirmation button:
// -> The text will appear in the button
alert('Hello World!')->persistent("Close this");
Finally, to display the alert in the browser, you may use (or modify) the view that is included with this package. Simply include it to your layout view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/sweetalert.css">
</head>
<body>
<div class="container">
<p>Welcome to my website...</p>
</div>
<script src="js/sweetalert.min.js"></script>
<!-- Include this after the sweet alert js file -->
@include('sweet::alert')
</body>
</html>
If you need to customize the alert message partial, run:
php artisan vendor:publish
The package view is located in the resources/views/vendor/sweet/
directory.
You can override/overwrite your sweet alert configuration to fit your needs.
You have access to the following configuration options to build a custom view:
Session::get('sweet_alert.text')
Session::get('sweet_alert.type')
Session::get('sweet_alert.title')
Session::get('sweet_alert.confirmButtonText')
Session::get('sweet_alert.showConfirmButton')
Session::get('sweet_alert.allowOutsideClick')
Session::get('sweet_alert.timer')
Please check the CONFIGURATION section in the website for all other options available.
@if (Session::has('sweet_alert.alert'))
<script>
swal({!! Session::get('sweet_alert.alert') !!});
</script>
@endif
The sweet_alert.alert
session key contains a JSON configuration object to pass it directly to Sweet Alert.
Note that {!! !!}
are used to output the json configuration object unescaped, it will not work with {{ }}
escaped output tags.
@if (Session::has('sweet_alert.alert'))
<script>
swal({
text: "{!! Session::get('sweet_alert.text') !!}",
title: "{!! Session::get('sweet_alert.title') !!}",
timer: {!! Session::get('sweet_alert.timer') !!},
type: "{!! Session::get('sweet_alert.type') !!}",
showConfirmButton: "{!! Session::get('sweet_alert.showConfirmButton') !!}",
confirmButtonText: "{!! Session::get('sweet_alert.confirmButtonText') !!}",
confirmButtonColor: "#AEDEF4"
// more options
});
</script>
@endif
Note that you must use ""
(double quotes) to wrap the values except for the timer option.
Alert::message('Welcome back!');
return Redirect::home();
Alert::message('Your profile is up to date', 'Wonderful!');
return Redirect::home();
Alert::message('Thanks for comment!')->persistent('Close');
return Redirect::home();
Alert::info('Email was sent!');
return Redirect::home();
Alert::error('Something went wrong', 'Oops!');
return Redirect::home();
Alert::success('Good job!');
return Redirect::home();
Alert::success('Good job!')->persistent("Close");
return Redirect::home();