Динамічні оновлення сторінок за допомогою фрагментів Laravel Blade

Blade Fragments дозволяють часткове оновлення сторінки, повертаючи конкретні секції шаблонів. Це ідеальне рішення для використання з htmx або Turbo фреймворками.

# Використання Blade Fragments

Основне визначення і використання фрагмента:

// У вашому Blade шаблоні
@fragment('notification-list')
    <div class="notifications">
        @foreach($notifications as $notification)
            <div class="alert">
                {{ $notification->message }}
            </div>
        @endforeach
    </div>
@endfragment
 
// У вашому контролері
return view('dashboard')
    ->fragment('notification-list');

# Реалізація у реальному житті

Приклад роботи системи сповіщень:

<?php

namespace App\Http\Controllers;

use App\Models\Notification;
use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function store(Request $request)
    {
        $notification = Notification::create([
            'user_id' => auth()->id(),
            'message' => $request->message,
            'type' => $request->type
        ]);

        if ($request->hasHeader('HX-Request')) {
            return view('notifications.index', [
                'notifications' => auth()->user()->notifications()->latest()->get()
            ])->fragmentIf(
                $request->hasHeader('HX-Request'),
                'notification-list'
            );
        }

        return back();
    }

    public function clear(Request $request)
    {
        auth()->user()->notifications()->delete();

        return view('notifications.index', [
            'notifications' => collect()
        ])->fragment('notification-list');
    }
}

Структура шаблону:

<!-- notifications/index.blade.php -->
<div class="container">
    @fragment('notification-list')
        <div class="notification-wrapper">
            @forelse($notifications as $notification)
                <div class="alert alert-{{ $notification->type }}">
                    {{ $notification->message }}
                    <span class="timestamp">
                        {{ $notification->created_at->diffForHumans() }}
                    </span>
                </div>
            @empty
                <p>Немає сповіщень</p>
            @endforelse
        </div>
    @endfragment
</div>

Blade Fragments демонструють прихильність Laravel до сучасної інтерактивної веб-розробки, пропонуючи серверне рішення, яке бездоганно інтегрується з методами прогресивного покращення, зберігаючи при цьому простоту, яку очікують розробники