Flasher Sweetalert Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require php-flasher/flasher-sweetalert
   

   Ensure php-flasher/core (v2.5.1+) is installed as a dependency.

2. Publish Configuration (if needed):

   php artisan vendor:publish --provider="PHPFlasher\Flasher\FlasherServiceProvider" --tag="config"
   

   Modify config/flasher.php to set default SweetAlert options (e.g., default_timer, default_toast).

3. First Use Case: Replace a basic flash message in a controller:

   use PHPFlasher\Flasher\Facades\Flasher;
   
   public function updateProfile(Request $request) {
       $request->user()->update($request->validated());
       Flasher::success('Profile updated successfully!')->toast()->timer(3000);
       return redirect()->back();
   }
   

Implementation Patterns

Core Workflows

1. Controller Integration: Use Flasher facade for type-safe notifications:

   Flasher::error('Validation failed', ['timer' => 5000])->toast();
   Flasher::warning('Action requires confirmation')->modal();
   

2. Blade Rendering: Add this to your resources/views/layouts/app.blade.php:

   @flasher
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   

3. Dynamic Options: Chain methods for clarity:

   Flasher::success('Data saved')
       ->title('Success!')
       ->position('top-end')
       ->timer(2000)
       ->toast();
   

4. Conditional Flashing:

   if ($user->isAdmin()) {
       Flasher::info('Admin actions logged')->timer(4000);
   }
   

Advanced Patterns

• Custom Types: Extend the package via service providers:

  Flasher::extend('custom', function ($message, $options) {
      return Flasher::make('custom', $message, $options)
          ->icon('fas fa-robot')
          ->timer(3000);
  });
  

• API Responses: Combine with Laravel’s response()->json():

  return response()->json([
      'status' => 'success',
      'data'   => $data,
  ])->withFlasher(Flasher::success('Operation completed'));
  

• Queue Delayed Flashes: Use Laravel queues to defer notifications:

  Flasher::queue(Flasher::error('Payment failed'), now()->addMinutes(5));
  

Gotchas and Tips

Common Pitfalls

1. Missing SweetAlert2 JS:

   • Symptom: Flashes appear but disappear instantly.
   • Fix: Ensure the CDN or local JS file is loaded after your app’s JS bundle.

2. Type Mismatch Errors:

   • Symptom: TypeError when passing invalid options (e.g., timer as a string).
   • Fix: Use type-hinted methods:

     Flasher::success('Message')->timer(3000); // Correct
     Flasher::success('Message')->timer('3000'); // Throws error
     

3. Configuration Overrides:

   • Gotcha: Global config in flasher.php may override per-flash settings.
   • Tip: Use Flasher::make()->overrideConfig(['timer' => 0]) to bypass defaults.

4. Modal Confirmation Handling:

   • Symptom: Confirmation buttons don’t trigger actions.
   • Tip: Use SweetAlert2’s preConfirm or attach JS handlers:

     document.addEventListener('flasher:confirm', (e) => {
         if (e.detail.type === 'success') {
             window.location.href = '/dashboard';
         }
     });
     

Debugging Tips

• Inspect Rendered HTML: Check if the @flasher directive outputs the correct data structure. Use:

  dd(Flasher::getMessages());
  

• Disable Auto-Close: Set timer: 0 in options to debug modal behavior without auto-dismissal.

• Clear Flashes: Reset all flashes in a route:

  Flasher::clear();
  

Extension Points

1. Custom Icons: Override default icons via config:

   'icons' => [
       'success' => 'fas fa-check-circle',
       'error'   => 'fas fa-exclamation-triangle',
   ],
   

2. Localization: Extend the package to support multi-language messages:

   Flasher::setLocale('es');
   Flasher::error(__('messages.error.default'));
   

3. Dark Mode: Add a darkMode option to options:

   Flasher::success('Message')->darkMode(true);
   

   Then extend the JS template to include:

   SweetAlert2.extend({
       darkMode: false,
       template: `
           <div class="swal2-popup ${this.darkMode ? 'swal2-dark' : ''}">
               <!-- content -->
           </div>
       `
   });