Merge pull request #1447 from w3bdesign/1445-urls-slug-on-product-and-category-pages

Remove id in urls

Author: w3bdesign

src/components/AlgoliaSearch/AlgoliaSearchBox.component.tsx

@@ -51,7 +51,7 @@ const AlgoliaSearchBox = () => {
             }}
           />
           {search && (
-            <div className="absolute">
+            <div className="absolute z-50 bg-white shadow-lg rounded-md mt-1 md:w-[18rem]">
               <Hits hitComponent={SearchResults} />
             </div>
           )}

src/components/AlgoliaSearch/SearchResults.component.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-
 import { trimmedStringToLength } from '@/utils/functions/functions';
 
 interface ISearchResultProps {
@@ -10,7 +9,7 @@ interface ISearchResultProps {
     sale_price: string;
     on_sale: boolean;
     short_description: string;
-    objectID: number;
+    slug: string;
   };
 }
 
@@ -23,7 +22,6 @@ interface ISearchResultProps {
  * @param {string} sale_price Price when on sale
  * @param {boolean} on_sale Is the product on sale? True or false
  * @param {string} short_description Short description of product
- * @param {number} objectID ID of product
  }
  */
 const SearchResults = ({
@@ -34,17 +32,12 @@ const SearchResults = ({
     sale_price,
     on_sale,
     short_description,
-    objectID,
   },
 }: ISearchResultProps) => {
-  // Replace empty spaces with dash (-)
-  const trimmedProductName = product_name.replace(/ /g, '-');
-
   return (
     <article className="cursor-pointer hit">
       <Link
-        href="/produkt/[post]"
-        as={`/produkt/${trimmedProductName}?id=${objectID}`}
+        href={`/produkt/${product_name.replace(/ /g, '-')}`}
         passHref
       >
         <div className="flex p-6 bg-white">

src/components/Product/DisplayProducts.component.tsx

@@ -23,7 +23,6 @@ interface Variations {
 
 interface RootObject {
   __typename: string;
-  databaseId: number;
   name: string;
   onSale: boolean;
   slug: string;
@@ -55,7 +54,6 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
       {products ? (
         products.map(
           ({
-            databaseId,
             name,
             price,
             regularPrice,
@@ -78,11 +76,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
 
             return (
               <div key={uuidv4()} className="group">
-                <Link
-                  href={`/produkt/${encodeURIComponent(
-                    slug,
-                  )}?id=${encodeURIComponent(databaseId)}`}
-                >
+                <Link href={`/produkt/${encodeURIComponent(slug)}`}>
                   <div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
                     {image ? (
                       <img
@@ -96,16 +90,14 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                         id="product-image"
                         className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
                         alt={name}
-                        src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
+                        src={
+                          process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
+                        }
                       />
                     )}
                   </div>
                 </Link>
-                <Link
-                  href={`/produkt/${encodeURIComponent(
-                    slug,
-                  )}?id=${encodeURIComponent(databaseId)}`}
-                >
+                <Link href={`/produkt/${encodeURIComponent(slug)}`}>
                   <span>
                     <div className="mt-4">
                       <p className="text-2xl font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
@@ -127,9 +119,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                       </span>
                     </div>
                   ) : (
-                    <span className="text-lg text-gray-900">
-                      {price}
-                    </span>
+                    <span className="text-lg text-gray-900">{price}</span>
                   )}
                 </div>
               </div>

src/components/Product/ProductCard.component.tsx

@@ -33,7 +33,7 @@ const ProductCard = ({
   return (
     <div className="group">
       <div className="aspect-[3/4] overflow-hidden bg-gray-100 relative">
-        <Link href={`/produkt/${slug}?id=${databaseId}`}>
+        <Link href={`/produkt/${slug}`}>
           {image?.sourceUrl ? (
             <Image
               src={image.sourceUrl}
@@ -51,7 +51,7 @@ const ProductCard = ({
         </Link>
       </div>
 
-      <Link href={`/produkt/${slug}?id=${databaseId}`}>
+      <Link href={`/produkt/${slug}`}>
         <div className="mt-4">
           <p className="text-2xl font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
             {name}

src/components/User/UserRegistration.component.tsx

@@ -36,8 +36,8 @@ const UserRegistration = () => {
       } else {
         throw new Error('Failed to register customer');
       }
-    } catch (err: unknown) {
-      console.error('Registration error');
+    } catch (error: unknown) {
+      console.error('Registration error:', error);
     }
   };
 

src/pages/produkt/[slug].tsx

@@ -48,11 +48,21 @@ const Produkt: NextPage = ({
 export default withRouter(Produkt);
 
 export const getServerSideProps: GetServerSideProps = async ({
-  query: { id },
+  params,
+  query,
+  res,
 }) => {
+  // Handle legacy URLs with ID parameter by removing it
+  if (query.id) {
+    res.setHeader('Location', `/produkt/${params?.slug}`);
+    res.statusCode = 301;
+    res.end();
+    return { props: {} };
+  }
+
   const { data, loading, networkStatus } = await client.query({
     query: GET_SINGLE_PRODUCT,
-    variables: { id },
+    variables: { slug: params?.slug },
   });
 
   return {

src/utils/gql/GQL_QUERIES.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_SINGLE_PRODUCT = gql`
-  query Product($id: ID!) {
-    product(id: $id, idType: DATABASE_ID) {
+  query Product($slug: ID!) {
+    product(id: $slug, idType: SLUG) {
       id
       databaseId
       averageRating