✨ Invidiual product page

src/routes/vente/+page.server.ts

@@ -1,5 +1,4 @@
 import type { PageServerLoad } from './$types';
-import '$lib/server/db';
 import { collections } from '$lib/server/db';
 
 export const load: PageServerLoad = async () => {

src/routes/vente/[id]/+page.server.ts

@@ -0,0 +1,28 @@
+import type { PageServerLoad } from './$types';
+import { collections } from '$lib/server/db';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async (input) => {
+	const product = await collections.products.findOne({
+		_id: input.params.id,
+		state: { $ne: 'draft' }
+	});
+
+	if (!product) {
+		throw error(404, 'Produit non trouvé');
+	}
+
+	product.photos = await collections.pictures
+		.find({ productId: input.params.id })
+		.sort({ createdAt: 1 })
+		.toArray();
+
+	return {
+		product,
+		title: `${product.name} - ${product.price} €`,
+		description: product.description,
+		pictures: product.photos,
+		type: 'og:product',
+		price: product.price
+	};
+};

src/routes/vente/[id]/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+	import Picture from '$lib/components/Picture.svelte';
+	import type { PageData } from './$types';
+	import { marked } from 'marked';
+
+	export let data: PageData;
+
+	const product = data.product;
+	let photoIndex = 0;
+
+	function submit() {
+		alert(
+			"Cette partie de l'e-shop n'est pas encore implémentée. Veuillez prendre contact par mail (contact@bergereenchantee.fr), téléphone (07 74 52 11 15) ou instagram."
+		);
+	}
+</script>
+
+<Container>
+	<article class="flex my-8 lg:my-16 flex-wrap lg:flex-nowrap">
+		<div class="grow lg:basis-0 justify-center items-center flex flex-col">
+			<!-- svelte-ignore security-anchor-rel-noreferrer -->
+			<a href="/photos/raw/{product.photos[photoIndex].storage[0]._id}" target="_blank">
+				<Picture
+					picture={product.photos[photoIndex]}
+					title="Cliquez pour voir la photo entière"
+					class="max-w-full max-h-md lg:max-h-xl rounded-3xl"
+				/>
+			</a>
+			{#if product.photos.length > 1}
+				<div style="gap: 0.5rem" class="flex justify-start w-full ml-8 mt-2">
+					{#each product.photos as photo, i}
+						<Picture
+							picture={photo}
+							style="border-color: #865716"
+							class="w-16 h-16 object-cover cursor-pointer box-border {i === photoIndex
+								? 'border border-4'
+								: ''} rounded-md"
+							on:click={() => (photoIndex = i)}
+						/>
+					{/each}
+				</div>
+			{/if}
+		</div>
+		<div class="grow lg:basis-0 lg:px-8 mt-6 lg:m-t0">
+			<h1 class="text-oxford text-4xl">{product.name}</h1>
+
+			<div class="mt-4 flex items-center">
+				<span class="font-bold text-2xl mr-2">{product.price} €</span> (+ frais de livraison hors Finistère)
+			</div>
+			<div class="marked leading-6">
+				{@html marked(product.description)}
+			</div>
+
+			<form action="post">
+				<button
+					type="submit"
+					on:click|preventDefault={submit}
+					class="mt-4 text-xl leading-6 py-3 px-6 bg-oxford border-0 shadow text-white rounded-md cursor-pointer"
+				>
+					Acheter
+				</button>
+			</form>
+		</div>
+	</article>
+</Container>