category

2 files changed, 44 insertions, 3 deletions

diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index 9f34362c..eddedd24 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
+import { createSlug } from '@/core/utils/slug'
 import { useEffect, useState } from 'react'
 
 const Category = () => {
@@ -32,7 +33,7 @@ const Category = () => {
         {categories.map((category) => (
           <div key={category.id}>
             <Link
-              href={`/shop/search?category=${category.name}`}
+              href={createSlug('/shop/category/', category.name, category.id)}
               className='category-mega-box__parent'
             >
               {category.name}
@@ -42,7 +43,7 @@ const Category = () => {
                 {category.childs.map((child1Category) => (
                   <div key={child1Category.id}>
                     <Link
-                      href={`/shop/search?category=${child1Category.name}`}
+                      href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
                       className='category-mega-box__child-one mb-4'
                     >
                       {child1Category.name}
@@ -50,7 +51,7 @@ const Category = () => {
                     <div className='flex flex-col gap-y-3'>
                       {child1Category.childs.map((child2Category) => (
                         <Link
-                          href={`/shop/search?category=${child2Category.name}`}
+                        href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
                           className='category-mega-box__child-two'
                           key={child2Category.id}
                         >
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
new file mode 100644
index 00000000..2c5d9f3e
--- /dev/null
+++ b/src/pages/shop/category/[slug].jsx
@@ -0,0 +1,40 @@
+import dynamic from 'next/dynamic'
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
+import { useRouter } from 'next/router'
+import _ from 'lodash'
+import Seo from '@/core/components/Seo'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
+
+export default function CategoryDetail() {
+  const router = useRouter()
+  const { slug = '' } = router.query
+
+  const categoryName = getNameFromSlug(slug)
+  const categoryId = getIdFromSlug(slug)
+  const query = {
+    fq: `manufacture_id_i:${categoryId}`
+  }
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Beli ${categoryName} di Indoteknik`}
+        description={`Jual ${categoryName} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`}
+        additionalMetaTags={[
+          {
+            property: 'keywords',
+            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`
+          }
+        ]}
+      />
+
+      {!_.isEmpty(router.query) && (
+        <ProductSearch
+          query={query}
+          prefixUrl={`/shop/category/${slug}`}
+        />
+      )}
+    </BasicLayout>
+  )
+}