Changed slug routes to query params

src/helpers/toProduct.js

@@ -0,0 +1,11 @@
+import normalize from './normalize';
+import { parseName } from './parse';
+
+const toProduct = (product, currentProduct) => {
+  const url = new URL(window.location);
+  url.searchParams.set('product', normalize(parseName(product.name)));
+  window.history.pushState({}, '', url);
+  currentProduct.set(product)
+}
+
+export default toProduct;

src/lib/Feature.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { urlFor } from '$lib/sanityClient';
-	export let product;
+	import { productsView, currentProduct } from '$lib/stores';
 </script>
 
 <div class="content">
-	<p>{product.name}</p>
-	{#if product.image}
-		<img src={urlFor(product.image).url()} alt={product.name} />
+	<p>{$currentProduct.name}</p>
+	{#if $currentProduct.image}
+		<img src={urlFor($currentProduct.image).url()} alt={$currentProduct.name} />
 	{/if}
 </div>
 

src/lib/Grid.svelte

@@ -1,35 +1,21 @@
 <script>
 	import { urlFor } from './sanityClient';
 	import { currentProduct } from '$lib/stores.js';
-	import { parseName } from '$helpers/parse.js';
+	import toProduct from '$helpers/toProduct';
 	export let products;
+
+	const {container} = {
+		container: 'flex flex-wrap m-12 justify-start',
+	}
 </script>
 
-<div class="content">
+
+<div class={container}>
 	{#each products as product}
-		<li class="product">
-			<a on:click={currentProduct.set(product)} href={parseName(product.name)}>
+			<button on:click={() => toProduct(product, currentProduct)} >
 				{#if product.image}
-					<img src={urlFor(product.image).width(125).height(125).url()} alt={product.name} />
+					<img src={urlFor(product.image).width(150).url()} alt={product.name} />
 				{/if}
-			</a>
-		</li>
+			</button>
 	{/each}
 </div>
-
-<style>
-	.content {
-		width: calc(100% - 160px);
-		margin-left: 160px;
-		float: left;
-		margin-top: 48px;
-		padding: 0 32px;
-	}
-	.product {
-		display: inline;
-		float: left;
-		width: 125px;
-		height: 125px;
-		padding: 0px;
-	}
-</style>

src/lib/Layout/Products.svelte

@@ -1,19 +1,18 @@
 <script>
 	export let productsView;
 	export let currentProduct;
-	import { parseName } from '$helpers/parse';
+	import toProduct from '$helpers/toProduct';
 
-	const { container, productStyle, productTitle } = {
+	const { container, productStyle } = {
 		container: 'pt-4',
 		productList: 'flex flex-col items-start mt-10 text-sm',
-		productStyle: 'w-full text-left',
-		productTitle: 'pl-12 hover:bg-blue-300 text-sm'
+		productStyle: 'w-full text-left'
 	};
 </script>
 
 <div class={container}>
 	{#each productsView as product}
-		<a class={productStyle} on:click={currentProduct.set(product)} href={parseName(product.name)}>
+		<button class={productStyle} on:click={() => toProduct(product, currentProduct)}>
 			<p
 				class={`pl-12 hover:bg-blue-300 ${
 					$currentProduct && $currentProduct.name === product.name ? 'bg-blue-300' : ''
@@ -21,6 +20,6 @@
 			>
 				{product.name}
 			</p>
-		</a>
+		</button>
 	{/each}
 </div>

src/routes/[slug].js

@@ -1,23 +0,0 @@
-import { client } from '$lib/sanityClient';
-/** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get() {
-	const products = await client.fetch('*[_type == "product"]');
-	const tags = await client.fetch('*[_type == "tag"]');
-
-	const data = {
-		products,tags
-	}
-
-	if (data) {
-		return {
-			status: 200,
-			body: {
-				data: data
-			}
-		};
-	}
-
-	return {
-		status: 404
-	};
-}

src/routes/[slug].svelte

@@ -1,26 +0,0 @@
-<script>
-	import Feature from '$lib/Feature.svelte';
-	import NotFound from '$lib/NotFound.svelte';
-	import { page } from '$app/stores';
-	import { products, currentProduct, tags, productsView } from '$lib/stores';
-	import { parseSlug } from '$helpers/parse.js';
-	import normalize from '$helpers/normalize';
-	export let data;
-
-	products.set(data.products);
-	tags.set(data.tags);
-	productsView.set(data.products);
-
-	let currProd = $products.find(
-		(product) => normalize(product.name) === parseSlug($page.params.slug)
-	);
-	if (currProd) currentProduct.set(currProd);
-</script>
-
-<div class="container">
-	{#if currProd}
-		<Feature product={$currentProduct} />
-	{:else}
-		<NotFound />
-	{/if}
-</div>

src/routes/__layout.svelte

@@ -11,6 +11,9 @@
 
 	const reset = () => {
 		productsView.set($products);
+		const url = new URL(window.location);
+		window.history.pushState({}, '', url);
+		currentProduct.set({});
 		filters = { selectedCat: 0, selectedRating: 0 };
 	};
 
@@ -23,7 +26,7 @@
 <main class={main}>
 	<div class={sidebar}>
 		<Header {reset} />
-		{#if $page.url.pathname === '/'}
+		{#if !Object.keys($currentProduct).length}
 			<Search />
 			<Filters bind:filters {reset} />
 			<Sort />

src/routes/index.svelte

@@ -1,11 +1,33 @@
 <script>
 	import Grid from '$lib/Grid.svelte';
-	import { products, productsView, tags } from '$lib/stores';
+	import Feature from '$lib/Feature.svelte';
+	import { products, productsView, tags, currentProduct } from '$lib/stores';
+	import { browser } from '$app/env';
+	import normalize from '$helpers/normalize';
+	import {parseSlug} from '$helpers/parse';
+
 	export let data;
 	products.set(data.products);
 	tags.set(data.tags);
 
 	productsView.set(data.products);
+ 
+ if (browser && window.location.search) {
+	const params = new URLSearchParams(window.location.search)
+	const paramProd = params.get('product');
+
+	if (paramProd){ 
+		const foundProduct = $products.find(({name})=> normalize(name) === normalize(parseSlug(paramProd)))
+		if (foundProduct){
+			currentProduct.set(foundProduct)
+		} else {
+			const url = new URL(window.location.origin);
+
+			history.pushState({}, '', url);
+		}
+	}
+ }
+
 </script>
 
 <svelte:head>
@@ -13,5 +35,9 @@
 </svelte:head>
 
 <div>
+	{#if Object.keys($currentProduct).length}
+	<Feature />
+	{:else}
 	<Grid products={$productsView} />
+	{/if}
 </div>

src/routes/product.svelte

@@ -1,32 +0,0 @@
-<script>
-	import Feature from '$lib/Feature.svelte';
-	import { productsView, currentProduct } from '$lib/stores';
-	import normalize from '$helpers/normalize';
-
-	let currentProductIndex = $productsView.findIndex(
-		({name}) => normalize(name) === normalize($currentProduct.name)
-	);
-
-	function nextProduct() {
-		if (currentProductIndex < $productsView.length - 1) {
-			currentProductIndex++;
-		} else {
-			currentProductIndex = 0;
-		}
-		currentProduct.set($productsView[currentProductIndex]);
-	}
-
-	function prevProduct() {
-		console.log(currentProductIndex, $productsView.length);
-		if (currentProductIndex > 0) {
-			currentProductIndex--;
-		} else {
-			currentProductIndex = $productsView.length - 1;
-		}
-		currentProduct.set($productsView[currentProductIndex]);
-	}
-</script>
-
-<div class="container">
-	<Feature product={$currentProduct} {prevProduct} {nextProduct} />
-</div>