Get a category of products from Swell

src/components/layouts/PosterLayout.svelte

@@ -8,7 +8,7 @@
     import Carousel from '$components/organisms/Carousel.svelte'
 
     export let product: any
-    export let productShop: any
+    export let shopProduct: any
 
 
     /**
@@ -66,7 +66,7 @@
         <div class="poster-layout__info">
             <dl>
                 <dt>{capitalizeFirstLetter(product.type)}</dt>
-                <dd>{productShop.name} – {productShop.price}€</dd>
+                <dd>{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
                 text="Add to cart"

src/routes/api/swell.ts

@@ -1,10 +1,11 @@
 import {
-    addToCart,
+    getProducts,
+    getProduct,
     createCart,
     fetchCart,
-    getProduct,
+    addToCart,
+    updateCartItem,
     removeCartItem,
-    updateCartItem
 } from '$utils/functions/swell'
 
 
@@ -28,6 +29,10 @@ export async function post ({ headers, query, body, params, ...rest }) {
 
         if (bodyParsed) {
             switch (action) {
+                case 'getProducts': {
+                    result = await getProducts(bodyParsed.category)
+                    break
+                }
                 case 'getProduct': {
                     result = await getProduct(productId)
                     break

src/routes/shop/__layout.svelte

@@ -17,12 +17,14 @@
     export let locations: any
     export let posters: any
     export let product: any
-    export let productShop: any
+    export let shopProduct: any
+    export let shopProducts: any
 
     let introEl: HTMLElement
     let navObserver: IntersectionObserver
     let scrolledPastIntro = false
 
+
     // Locations with an existing poster product
     $shopLocations = locations.filter(({ slug }: any) => {
         if (posters.find((poster: any) => poster.location.slug === slug)) {
@@ -84,7 +86,9 @@
                     <ul>
                         {#each $shopLocations as { name, slug }}
                             <li class:is-active={slug === product.location.slug}>
-                                <a href="/shop/poster-{slug}">{name}</a>
+                                <a href="/shop/poster-{slug}" sveltekit:noscroll sveltekit:prefetch>
+                                    {name}
+                                </a>
                             </li>
                         {/each}
                     </ul>
@@ -159,9 +163,6 @@
     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 {
@@ -206,6 +207,7 @@
 
         const { data } = res
 
+
         /**
          * Define product
          */
@@ -215,20 +217,32 @@
             // Get the current product from slug
             : data.posters.find(({ location }: any) => location.slug === page.params.name)
 
-        /**
-         * Get product data from Swell
-         */
-        let productShopRes: any
 
-        const productShop = await fetch('/api/swell', {
+        /**
+         * Get products data from Swell
+         */
+        let shopProducts: any
+        let shopProduct: any
+
+        const shopProductRes = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
-                action: 'getProduct',
-                productId: productAPI.product_id,
+                action: 'getProducts',
+                category: 'posters',
             })
         })
-        if (productShop) {
-            productShopRes = await productShop.json()
+        if (shopProductRes.ok) {
+            // Set all products
+            const { results } = await shopProductRes.json()
+            if (results) {
+                shopProducts = results
+            }
+
+            // Define current product
+            const product = results.find((result: any) => result.slug.includes(page.params.name))
+            if (product) {
+                shopProduct = product
+            }
         }
 
 
@@ -238,7 +252,8 @@
                 locations: data.location,
                 posters: data.posters,
                 product: productAPI,
-                productShop: productShopRes,
+                shopProducts,
+                shopProduct,
             }
         }
     }

src/utils/functions/swell.ts

@@ -5,6 +5,25 @@ swell.init(import.meta.env.VITE_SWELL_STORE_ID, import.meta.env.VITE_SWELL_API_T
 
 
 
+/**
+ * Fetch products
+ */
+export const getProducts = async (category?: string, limit: number = 25, page: number = 1) => {
+    const products = await swell.get('/products', {
+        where: {
+            active: true,
+        },
+        category,
+        limit,
+        page
+    })
+
+    if (products) {
+        return products
+    }
+}
+
+
 /**
  * Retrieve a product
  */