✨ Add data to Shop page

src/components/layouts/PosterLayout.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { capitalizeFirstLetter } from '$utils/functions'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import Carousel from '$components/organisms/Carousel.svelte'
+
+    export let product: any
+
+
+    /**
+     * Preview photos specs
+     */
+    let lastPreviewPhoto: any = undefined
+    $: if (product.photos_preview.length) {
+        lastPreviewPhoto = product.photos_preview[product.photos_preview.length - 1].directus_files_id
+    }
+    const photosPreview = [
+        {
+            sizes: {
+                small: { width: 275 },
+                medium: { width: 500 },
+                large: { width: 800 },
+            },
+            ratio: 0.75,
+        },
+        {
+            sizes: {
+                small: { width: 200 },
+                medium: { width: 300 },
+                large: { width: 400 },
+            },
+            ratio: 0.8,
+        },
+        {
+            sizes: {
+                small: { width: 200 },
+                medium: { width: 300 },
+                large: { width: 400 },
+            },
+            ratio: 1.28,
+        },
+        {
+            sizes: {
+                small: { width: 450 },
+                medium: { width: 700 },
+                large: { width: 1000 },
+            },
+            ratio: 0.68,
+        },
+    ]
+</script>
+
+<section class="poster-layout grid">
+    <h2 class="title-huge">
+        {product.location.name}
+    </h2>
+
+    <aside class="poster-layout__buy">
+        <div class="poster-layout__info">
+            <dl>
+                <dt>{capitalizeFirstLetter(product.type)}</dt>
+                <dd>{product.name} – 30€</dd>
+            </dl>
+            <Button
+                text="Add to cart"
+                color="pink"
+            />
+        </div>
+
+        <Carousel
+            class="shadow-box-dark"
+            slides={product.photos_product.map(({ directus_files_id }) => ({
+                id: directus_files_id.id,
+                alt: directus_files_id.title,
+            }))}
+        />
+    </aside>
+
+    {#if product.photos_preview.length}
+        <div class="poster-layout__images grid container">
+            {#each product.photos_preview.slice(0, product.photos_preview.length - 1) as { directus_files_id}, index}
+                <Image
+                    class="image image--{index + 1} photo shadow-box-light"
+                    id={directus_files_id.id}
+                    sizeKey="photo-list"
+                    sizes={photosPreview[index].sizes}
+                    ratio={photosPreview[index].ratio}
+                    alt={directus_files_id.title}
+                />
+            {/each}
+        </div>
+    {/if}
+
+    <div class="poster-layout__about grid">
+        <div class="text container">
+            {#if product.description}
+                <p>{product.description}</p>
+            {/if}
+            {#if product.details}
+                <p class="details">{product.details}</p>
+            {/if}
+        </div>
+    </div>
+
+    {#if lastPreviewPhoto}
+        <Image
+            class="image image--4 photo shadow-box-light"
+            id={lastPreviewPhoto.id}
+            sizeKey="photo-grid"
+            sizes={photosPreview[photosPreview.length - 1].sizes}
+            ratio={photosPreview[photosPreview.length - 1].ratio}
+            alt={lastPreviewPhoto.title}
+        />
+    {/if}
+</section>

src/components/molecules/Poster.svelte

@@ -10,7 +10,7 @@
         <Button
             size="xsmall"
             url="/shop/poster-{slug}"
-            text="View poster"
+            text="View"
         />
         <Button
             type="button"

src/components/organisms/PosterProduct.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-    import Button from '$components/atoms/Button.svelte'
-    import Image from '$components/atoms/Image.svelte'
-</script>
-
-<div class="poster-product grid">
-    <h2 class="title-huge">Melbourne</h2>
-
-    <div class="poster-product__buy">
-        <div class="info">
-            <dl>
-                <dt>Poster</dt>
-                <dd>Houses Of Melbourne – 30€</dd>
-            </dl>
-            <Button
-                text="Add to cart"
-                color="pink"
-            />
-        </div>
-        <img src="/images/poster-display.jpg" alt="">
-    </div>
-
-    <div class="poster-product__images grid container">
-        <picture class="image image--first photo shadow-box-light">
-            <img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
-        </picture>
-        <picture class="image image--second photo shadow-box-light">
-            <img src="https://picsum.photos/324/259" width={324} height={259} alt="blob">
-        </picture>
-        <picture class="image image--third photo shadow-box-light">
-            <img src="https://picsum.photos/324/416" width={324} height={416} alt="blob">
-        </picture>
-    </div>
-
-    <div class="poster-product__about grid">
-        <div class="text container">
-            <p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
-            <p class="details">
-                Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
-            </p>
-        </div>
-    </div>
-
-    <div class="poster-product__image grid container">
-        <picture class="image image--fourth photo shadow-box-light">
-            <img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
-        </picture>
-    </div>
-</div>