Handle updating the URL

resources/views/livewire/utility/url-handler.blade.php

@@ -0,0 +1,12 @@
+<div>
+    @script
+    <script>
+        document.addEventListener('livewire:initialized', () => {
+            Livewire.on('update-url', ({ newUrl }) => {
+                console.log('updateUrl', newUrl);
+                history.pushState(null, '', newUrl);
+            });
+        });
+    </script>
+    @endscript
+</div>

src/Http/Livewire/LfUrlHandler.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace Reach\StatamicLivewireFilters\Http\Livewire;
+
+use Livewire\Component;
+
+class LfUrlHandler extends Component
+{
+    public function render()
+    {
+        return view('statamic-livewire-filters::livewire.utility.url-handler');
+    }
+}

src/Http/Livewire/LivewireCollection.php

@@ -64,6 +64,7 @@ public function sortUpdated($sort)
             return;
         }
         $this->params['sort'] = $sort;
+
     }
 
     protected function queryString()
@@ -95,6 +96,9 @@ public function entries()
 
         $entries = $this->runHooks('livewire-fetched-entries', $entries);
 
+        // Update the URL if using custom query string
+        $this->updateCustomQueryStringUrl();
+
         if ($this->paginate) {
             return $this->withPagination('entries', $entries);
         }

src/Http/Livewire/Traits/HandleParams.php

@@ -197,7 +197,46 @@ protected function handlePresetParams()
         }
     }
 
-    protected function dispatchParamsUpdated()
+    protected function updateCustomQueryStringUrl(): void
+    {
+        if (config('statamic-livewire-filters.custom_query_string') === false) {
+            return;
+        }
+
+        $aliases = array_flip(array_merge(
+            [
+                'sort' => 'sort',
+                'page' => 'page',
+            ],
+            config('statamic-livewire-filters.custom_query_string_aliases', [])
+        ));
+
+        $prefix = config('statamic-livewire-filters.custom_query_string', 'filters');
+
+        // Only include params that have aliases configured
+        $segments = collect($this->params)
+            ->filter(fn ($value, $key) => isset($aliases[$key]))
+            ->map(function ($value, $key) use ($aliases) {
+                $urlKey = $aliases[$key];
+
+                // Convert pipe-separated values to comma-separated
+                $urlValue = str_contains($value, '|')
+                    ? str_replace('|', ',', $value)
+                    : $value;
+
+                return [$urlKey, $urlValue];
+            })
+            ->flatten()
+            ->values();
+
+        $path = $segments->isEmpty()
+            ? ''
+            : $prefix.'/'.$segments->implode('/');
+
+        $this->dispatch('update-url', newUrl: url($path));
+    }
+
+    protected function dispatchParamsUpdated(): void
     {
         if (config('statamic-livewire-filters.enable_filter_values_count')) {
             $this->dispatch('params-updated', $this->params);

src/ServiceProvider.php

@@ -11,6 +11,7 @@
 use Reach\StatamicLivewireFilters\Http\Livewire\LfSort;
 use Reach\StatamicLivewireFilters\Http\Livewire\LfTags;
 use Reach\StatamicLivewireFilters\Http\Livewire\LfTextFilter;
+use Reach\StatamicLivewireFilters\Http\Livewire\LfUrlHandler;
 use Reach\StatamicLivewireFilters\Http\Livewire\LivewireCollection as LivewireCollectionComponent;
 use Reach\StatamicLivewireFilters\Http\Middleware\HandleFiltersQueryString;
 use Statamic\Providers\AddonServiceProvider;
@@ -46,6 +47,7 @@ public function bootAddon()
         Livewire::component('lf-select-filter', LfSelectFilter::class);
         Livewire::component('lf-sort', LfSort::class);
         Livewire::component('lf-tags', LfTags::class);
+        Livewire::component('lf-url-handler', LfUrlHandler::class);
 
         $this->loadTranslationsFrom(__DIR__.'/../resources/lang', 'statamic-livewire-filters');