Make Shop module content dynamic

pnpm-lock.yaml

@@ -141,7 +141,7 @@ packages:
     peerDependencies:
       svelte: ^3.43.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.26_svelte@3.43.1+vite@2.6.5
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.27_svelte@3.43.1+vite@2.6.5
       cheap-watch: 1.0.4
       sade: 1.7.4
       svelte: 3.43.1
@@ -154,8 +154,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.0-next.26_svelte@3.43.1+vite@2.6.5:
-    resolution: {integrity: sha512-+Rx3IBa4disskQmr+0/Rh+NYavkM6Vi8BnkTGjKnblawysw4INXkq2WEQBp8luGpUZEkjwczdL9Z9Q2hISvIeA==}
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.27_svelte@3.43.1+vite@2.6.5:
+    resolution: {integrity: sha512-hiau09LA/5eGGFTxXtRPIxKmWw8By8t+Vw+uvgKYeUf+4zJLe/Q5yX3Przf2CmW0J6fPi4NWWIeYsLrOd78a2w==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       diff-match-patch: ^1.0.5

src/components/organisms/Shop.svelte

@@ -2,8 +2,9 @@
     import { getContext } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
 
-    const { location } = getContext('global')
+    const { location, shop } = getContext('global')
 
     const locationsWithPoster = location
         .filter((loc: any) => loc.has_poster)
@@ -14,14 +15,16 @@
     <div class="content">
         <div class="shop__image">
             <img src="/images/poster-display.jpg" alt="">
+            <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
         </div>
+
         <div class="shop__content">
-            <h3 class="title-medium">Browse our products</h3>
-            <p class="text-small">Discover our graphic posters and prints of your favouite locations.</p>
+            <h3 class="title-medium">{shop.module_title}</h3>
+            <p class="text-small">{shop.module_text}</p>
             <Button
-                class="button--pink"
-                text="Shop"
                 url="/shop"
+                text="Shop"
+                class="button--pink"
             />
             <p class="detail">
                 Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.

src/routes/__layout.svelte

@@ -78,9 +78,15 @@
                     limit_new
                     instagram
                     footer_links
+                    newsletter_subtitle
                     newsletter_url
                     newsletter_text
-                    newsletter_subtitle
+                }
+
+                shop {
+                    module_title
+                    module_text
+                    module_image { id title }
                 }
 
                 # Count