Create props for ShopModule content

Allows to customize content if for a specific one for instance

src/components/organisms/ShopModule.svelte

@@ -8,12 +8,6 @@
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
-    interface Location {
-        slug: string
-        name: string
-        has_poster: boolean
-    }
-
     const { locations, shop } = getContext('global')
     const locationsWithPoster = locations
         // Filter locations with posters only
@@ -23,22 +17,43 @@
         // Return name only
         .map((loc: Location) => loc.name)
 
+    export let images: any[] = shop.module_images
+    export let title: string = shop.module_title
+    export let text: string = shop.module_text
+    export let textBottom: string = undefined
+    export let buttonText: string = 'Shop'
+    export let url: string = '/shop'
+    export let enabled: boolean = true
+
+    if (textBottom !== null && textBottom !== undefined) {
+        textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
+    }
+
+    interface Location {
+        slug: string
+        name: string
+        has_poster: boolean
+    }
 
     // Image rotation
     let imagesLoop: ReturnType<typeof setTimeout>
     let currentImageIndex = 0
 
     const incrementCurrentImageIndex = () => {
-        currentImageIndex = currentImageIndex === shop.module_images.length - 1 ? 0 : currentImageIndex + 1
+        currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
         imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
     }
 
     onMount(() => {
-        incrementCurrentImageIndex()
+        if (images.length > 1) {
+            incrementCurrentImageIndex()
+        }
 
         return () => {
             // Clear rotating words timeout
-            clearTimeout(imagesLoop)
+            if (imagesLoop) {
+                clearTimeout(imagesLoop)
+            }
         }
     })
 </script>
@@ -46,9 +61,9 @@
 <div class="shop shadow-box-dark">
     <div class="content">
         <div class="shop__images">
-            {#if shop.module_images}
-            <a href="/shop" title="Visit our shop" sveltekit:noscroll sveltekit:prefetch>
-                {#each shop.module_images as { directus_files_id: { id, title }}, index}
+            {#if images}
+            <a href={enabled ? url : undefined} title="Visit our shop" sveltekit:noscroll sveltekit:prefetch>
+                {#each images as { directus_files_id: { id, title }}, index}
                     <Image
                         class={index === currentImageIndex ? 'is-visible' : null}
                         {id}
@@ -65,14 +80,14 @@
         </div>
 
         <div class="shop__content">
-            <h2 class="title-medium">{shop.module_title}</h2>
-            <p class="text-small">{shop.module_text}</p>
-            {#if shop.enabled}
-                <Button url="/shop" text="Shop" color="pinklight" />
+            <h2 class="title-medium">{title}</h2>
+            <p class="text-small">{text}</p>
+            {#if enabled}
+                <Button {url} text={buttonText} color="pinklight" />
+            {/if}
+            {#if textBottom}
+                <p class="detail">{textBottom}</p>
             {/if}
-            <p class="detail">
-                Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.
-            </p>
         </div>
     </div>
 </div>

src/style/organisms/_shop.scss

@@ -18,12 +18,19 @@
         }
     }
 
+
     // Images
     &__images {
         position: relative;
         overflow: hidden;
         min-height: 256px;
 
+        a {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
         :global(picture) {
             position: absolute;
             top: 0;
@@ -34,6 +41,9 @@
             transform: scale3d(1.075, 1.075, 1.075);
             transition: opacity 0.8s, transform 1.6s var(--ease-quart);
         }
+        :global(img) {
+            object-position: center 32%;
+        }
 
         :global(.is-visible) {
             opacity: 1;