[wip] 🔥 Integrate Swell into the shop

Create a custom and internal API for fetching and updating content to Swell Admin API (using swell-node)

src/routes/shop/__layout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { cartOpen } from '$utils/store'
     import { onMount } from 'svelte'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -15,6 +14,7 @@
     export let locations: any
     export let posters: any
     export let product: any
+    export let productShop: any
 
     let navEl: HTMLElement, introEl: HTMLElement
     let navObserver: IntersectionObserver
@@ -47,10 +47,8 @@
 />
 
 <main class="shop-page">
-    {#if $cartOpen}
-        <Cart />
-    {/if}
-    <section class="shop-page__intro">
+    <Cart />
+
     <section class="shop-page__intro" bind:this={introEl}>
         <a href="/" class="back">
             Back to Houses Of
@@ -110,7 +108,10 @@
         <p class="description text-normal">{shop.about}</p>
     </section>
 
-    <PosterLayout {product} />
+    <PosterLayout
+        product={product}
+        productShop={productShop}
+    />
 
     <section class="shop-page__posters grid">
         <h3>View all of our available posters</h3>
@@ -137,6 +138,10 @@
     import { getRandomElement } from '$utils/functions'
 
     export async function load ({ page, fetch, session, stuff }) {
+        // Init Swell
+        // swell.init(import.meta.env.VITE_SWELL_STORE_ID, import.meta.env.VITE_SWELL_API_TOKEN)
+
+        // Get content from API
         const res = await fetchAPI(`
             query {
                 shop {
@@ -161,6 +166,7 @@
                         name
                         slug
                     }
+                    product_id
                     photos_product {
                         directus_files_id {
                             id
@@ -182,22 +188,36 @@
         /**
          * Define product
          */
-        let product: any
-
-        if (!page.params.type && !page.params.name) {
+        const productAPI = (!page.params.type && !page.params.name)
             // Get a random product
-            product = data.posters[getRandomElement(data.posters)]
-        } else {
+            ? data.posters[getRandomElement(data.posters)]
             // Get the current product from slug
-            product = data.posters.find(({ location }: any) => location.slug === page.params.name)
+            : data.posters.find(({ location }: any) => location.slug === page.params.name)
+
+        /**
+         * Get product data from Swell
+         */
+        let productShopRes: any
+
+        const productShop = await fetch('/api/swell', {
+            method: 'POST',
+            body: JSON.stringify({
+                action: 'getProduct',
+                productId: productAPI.product_id,
+            })
+        })
+        if (productShop) {
+            productShopRes = await productShop.json()
         }
 
+
         return {
             props: {
                 shop: data.shop,
                 locations: data.location,
                 posters: data.posters,
-                product,
+                product: productAPI,
+                productShop: productShopRes,
             }
         }
     }