Add wrapper hack for turbo

Jade-GG · Jade-GG · commit 52b029e3f32d · 2024-10-29T11:11:59.000+01:00
diff --git a/resources/js/turbolinks.js b/resources/js/turbolinks.js
@@ -1,6 +1,22 @@
 import * as Turbo from '@hotwired/turbo'
+import { PageRenderer } from '@hotwired/turbo'
 
 import TurbolinksAdapter from 'vue-turbolinks'
 Vue.use(TurbolinksAdapter)
 
 Turbo.setProgressBarDelay(5)
+
+// Patch the internal Turbo renderer to use #turbo-wrapper as the root node instead of the body
+// This allows things placed in the body by scripts like GTM to persist
+Object.assign(PageRenderer.prototype, {
+    assignNewBody() {
+        const container = document.querySelector("#turbo-wrapper")
+        const newContainer = this.newElement.querySelector("#turbo-wrapper")
+
+        if (container && newContainer) {
+            container.replaceWith(newContainer)
+        } else {
+            document.body.replaceWith(this.newElement)
+        }
+    }
+})
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -26,30 +26,32 @@
     @config('design/head/includes')
 </head>
 <body class="text-neutral antialiased">
-    <div id="app" class="flex flex-col min-h-dvh">
-        @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.header')
-        @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.header')
-        <main>
-            @yield('content')
-        </main>
-        @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.footer')
-        @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.footer')
-        @stack('page_end')
-    </div>
+    <div id="turbo-wrapper" class="contents">
+        <div id="app" class="flex flex-col min-h-dvh">
+            @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.header')
+            @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.header')
+            <main>
+                @yield('content')
+            </main>
+            @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.footer')
+            @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.footer')
+            @stack('page_end')
+        </div>
 
-    <script>window.config = @json(config('frontend'));</script>
-    @if (session('notifications'))
-        <script async>
-            document.addEventListener('vue:loaded', function() {
-                @foreach (session('notifications') ?? [] as $notification)
-                    window.Notify('{{ $notification['message'] }}', '{{ $notification['type'] ?? 'success' }}')
-                @endforeach
-            });
-        </script>
-    @endif
-    @stack('foot')
-    <svg hidden class="hidden">
-        @stack('bladeicons')
-    </svg>
+        <script>window.config = @json(config('frontend'));</script>
+        @if (session('notifications'))
+            <script async>
+                document.addEventListener('vue:loaded', function() {
+                    @foreach (session('notifications') ?? [] as $notification)
+                        window.Notify('{{ $notification['message'] }}', '{{ $notification['type'] ?? 'success' }}')
+                    @endforeach
+                });
+            </script>
+        @endif
+        @stack('foot')
+        <svg hidden class="hidden">
+            @stack('bladeicons')
+        </svg>
+    </div>
 </body>
 </html>
