Add Shop module at end of Location page

With linked poster if existing, otherwise with all products

src/components/organisms/ShopModule.svelte

@@ -25,7 +25,7 @@
     export let url: string = '/shop'
     export let enabled: boolean = true
 
-    if (textBottom !== null && textBottom !== undefined) {
+    if (textBottom !== null) {
         textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
     }
 

src/routes/[country]/[location]/index.svelte

@@ -20,10 +20,14 @@
     import House from '$components/molecules/House.svelte'
     import Pagination from '$components/molecules/Pagination.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule.svelte'
 
     export let location: any
     export let photos: any[]
     export let totalPhotos: number
+    export let product: any
+
+    console.log(product)
 
     dayjs.extend(relativeTime)
 
@@ -285,25 +289,41 @@
             {/each}
         </section>
 
-        <section class="location-page__next">
+        <section class="location-page__next container">
-            <div class="container">
+            <Pagination
-                <Pagination
+                ended={ended}
-                    ended={ended}
+                current={currentPhotosAmount}
-                    current={currentPhotosAmount}
+                total={totalPhotos}
-                    total={totalPhotos}
+                on:click={!ended && loadMorePhotos}
-                    on:click={!ended && loadMorePhotos}
+            >
-                >
+                {#if !ended}
-                    {#if !ended}
+                    <p class="more">See more photos</p>
-                        <p class="more">See more photos</p>
+                {:else}
-                    {:else}
+                    <p>You've seen it all!</p>
-                        <p>You've seen it all!</p>
-                    {/if}
-                </Pagination>
-
-                {#if ended}
-                    <NewsletterModule theme="light" />
                 {/if}
-            </div>
+            </Pagination>
+
+            {#if ended}
+                <div class="grid-modules">
+                    <div class="container grid">
+                        <div class="wrap">
+                            {#if location.has_poster}
+                                <ShopModule
+                                    title="Poster available"
+                                    text="Houses of {location.name} is available as a poster on our shop."
+                                    images={product.photos_product}
+                                    textBottom={null}
+                                    buttonText="Buy"
+                                    url="/shop/poster-{location.slug}"
+                                />
+                            {:else}
+                                <ShopModule />
+                            {/if}
+                            <NewsletterModule theme="light" />
+                        </div>
+                    </div>
+                </div>
+            {/if}
         </section>
     {:else}
         <div class="location-page__message">

src/routes/[country]/[location]/index.ts

@@ -63,9 +63,18 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
                 total_published: photo_aggregated (filter: { location: { slug: { _eq: "${slug}" }}}) {
                     count { location }
                 }
+
+                # Shop product
+                product (filter: { location: { slug: { _eq: "${slug}" }}}) {
+                    photos_product {
+                        directus_files_id {
+                            id
+                        }
+                   }
+                }
             }
         `)
-        const { data: { location: location, photos, total_published }} = res
+        const { data: { location: location, photos, total_published, product }} = res
 
         if (params.country !== location[0].country.slug || !location.length) {
             return { status: 404 }
@@ -74,8 +83,9 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
         return {
             body: {
                 location: location[0],
-                photos: photos,
+                photos,
                 totalPhotos: photos.length ? total_published[0].count.location : 0,
+                product: product[0],
             }
         }
     } catch (error) {

src/style/layout/_modules.scss

@@ -1,8 +1,8 @@
 .grid-modules {
-    margin-bottom: 40px;
+    padding-bottom: 40px;
 
     @include bp (sm) {
-        margin-bottom: 72px;
+        padding-bottom: 72px;
     }
 
     .wrap {

src/style/molecules/_pagination.scss

@@ -27,7 +27,7 @@
 
         span {
             display: inline-block;
-            margin: 0 -10px;
+            margin: 0 -12px;
         }
     }
 

src/style/pages/_location.scss

@@ -212,25 +212,29 @@
 
     // Next photos section
     &__next {
-        margin-top: 135px;
+        margin-top: 136px;
-        padding: 72px 0 56px;
+        padding: 72px 0 40px;
-        background-color: $color-tertiary;
+        background: $color-tertiary;
-        text-align: center;
 
         @include bp (sm) {
             margin-top: calc(-1 * clamp(64px, 8vw, 120px));
             padding-top: 240px;
-            padding-bottom: 104px;
+            padding-bottom: 72px;
+        }
+
+        // Pagination
+        :global(.pagination) {
+            margin-bottom: 72px;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-bottom: 104px;
+            }
         }
 
         // Newsletter block
-        :global(.newsletter) {
+        .grid-modules {
-            max-width: 600px;
+            padding-bottom: 0;
-            margin: 56px auto 0;
-
-            @include bp (sm) {
-                margin-top: 72px;
-            }
         }
     }