✨ Add data to Shop page

src/routes/shop/__layout.svelte

@@ -3,16 +3,18 @@
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import PosterProduct from '$components/organisms/PosterProduct.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
 
     export let shop: any
     export let locations: any
+    export let posters: any
+    export let product: any
 </script>
 
 <Metas
-    title="Houses Of"
+    title="Shop – Houses Of"
     description=""
     image=""
 />
@@ -34,7 +36,7 @@
                 <nav>
                     <ul>
                         {#each locations as { name, slug }}
-                            <li>
+                            <li class:is-active={slug === product.location.slug}>
                                 <a href="/shop/poster-{slug}">{name}</a>
                             </li>
                         {/each}
@@ -59,22 +61,17 @@
     </section>
 
     <section class="shop-page__about grid">
-        <p class="description text-normal">
-            Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.
-        </p>
+        <p class="description text-normal">{shop.about}</p>
     </section>
 
-    <PosterProduct />
+    <PosterLayout {product} />
 
     <section class="shop-page__posters grid">
         <h3>View all of our available posters</h3>
         <div class="set">
-            <Poster slug="melbourne" />
-            <Poster slug="melbourne" />
-            <Poster slug="melbourne" />
-            <Poster slug="melbourne" />
-            <Poster slug="melbourne" />
-            <Poster slug="melbourne" />
+            {#each posters as { location }}
+                <Poster slug={location.slug} />
+            {/each}
         </div>
         <div class="subscribe">
             <p>Subscribe to be notified when new posters become available</p>
@@ -88,11 +85,13 @@
 
 <script context="module" lang="ts">
     import { fetchAPI } from '$utils/api'
+    import { getRandomElement } from '$utils/functions'
 
     export async function load ({ page, fetch, session, stuff }) {
         const res = await fetchAPI(`
             query {
                 shop {
+                    about
                     page_heroimage { id }
                 }
 
@@ -103,15 +102,53 @@
                     name
                     slug
                 }
+
+                posters: product {
+                    name
+                    type
+                    description
+                    details
+                    location {
+                        name
+                        slug
+                    }
+                    photos_product {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                    photos_preview {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                }
             }
         `)
 
         const { data } = res
 
+        /**
+         * Define product
+         */
+        let product: any
+
+        if (!page.params.type && !page.params.name) {
+            // Get a random product
+            product = data.posters[getRandomElement(data.posters)]
+        } else {
+            // Get the current product from slug
+            product = data.posters.find(({ location }: any) => location.slug === page.params.name)
+        }
+
         return {
             props: {
                 shop: data.shop,
                 locations: data.location,
+                posters: data.posters,
+                product,
             }
         }
     }