Use layout groups

src/routes/(shop)/shop/+page.server.ts

@@ -0,0 +1,56 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+import { getRandomItem } from '$utils/functions'
+import { fetchSwell } from '$utils/functions/shopServer'
+
+export const load: PageServerLoad = async ({ setHeaders }) => {
+    try {
+        // Get content from API
+        const data = await fetchAPI(`query {
+            posters: product (
+                filter: { status: { _eq: "published" }}
+            ) {
+                name
+                type
+                description
+                details
+                location {
+                    name
+                    slug
+                }
+                product_id
+                photos_product {
+                    directus_files_id {
+                        id
+                        title
+                    }
+                }
+                photos_preview {
+                    directus_files_id {
+                        id
+                        title
+                    }
+                }
+            }
+        }`)
+
+        if (data) {
+            const randomPoster: any = getRandomItem(data.data.posters)
+
+            // Fetch Swell API for product
+            const shopProduct: any = await fetchSwell(`/products/${randomPoster.product_id}`)
+
+            if (shopProduct) {
+                setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=86399' })
+
+                return {
+                    product: randomPoster,
+                    shopProduct,
+                }
+            }
+        }
+    } catch (err) {
+        throw error(500, err.message)
+    }
+}