From 8ee5432961a5b73e8e5c42af2eda05621723c9e7 Mon Sep 17 00:00:00 2001 From: IT Fixcomart Date: Fri, 11 Nov 2022 18:02:11 +0700 Subject: Connect to solr (search product), header component with title, fix product card layout, show product search result --- src/pages/404.js | 24 +++++ src/pages/api/shop/search.js | 71 ++++++++++++++ src/pages/index.js | 2 +- src/pages/shop/product/[slug].js | 202 ++++++++++++++++----------------------- src/pages/shop/search.js | 46 +++++++++ 5 files changed, 227 insertions(+), 118 deletions(-) create mode 100644 src/pages/404.js create mode 100644 src/pages/api/shop/search.js create mode 100644 src/pages/shop/search.js (limited to 'src/pages') diff --git a/src/pages/404.js b/src/pages/404.js new file mode 100644 index 00000000..83993f61 --- /dev/null +++ b/src/pages/404.js @@ -0,0 +1,24 @@ +import Image from "next/image"; +import Link from "next/link"; +import Header from "../components/Header"; +import PageNotFoundImage from "../images/page-not-found.png"; + +export default function PageNotFound() { + return ( + <> +
+
+ Halaman Tidak Ditemukan - Indoteknik +

Halaman tidak ditemukan

+
+ + Kembali ke beranda + + + Tanya admin + +
+
+ + ); +} \ No newline at end of file diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js new file mode 100644 index 00000000..3c3a1766 --- /dev/null +++ b/src/pages/api/shop/search.js @@ -0,0 +1,71 @@ +import axios from "axios"; + +const productResponseMap = (products) => { + return products.map((product) => { + let productMapped = { + id: product.product_id ? product.product_id[0] : '', + image: product.image ? product.image[0] : '', + code: product.default_code ? product.default_code[0] : '', + name: product.product_name ? product.product_name[0] : '', + lowest_price: { + price: product.price ? product.price[0] : 0, + price_discount: product.price_discount ? product.price_discount[0] : 0, + discount_percentage: product.discount ? product.discount[0] : 0, + }, + variant_total: product.variant_total ? product.variant_total[0] : 0, + stock_total: product.stock_total ? product.stock_total[0] : 0, + weight: product.weight ? product.weight[0] : 0, + manufacture: {}, + categories: [], + }; + + if (product.manufacture_id && product.brand) { + productMapped.manufacture = { + id: product.manufacture_id ? product.manufacture_id[0] : '', + name: product.brand ? product.brand[0] : '', + }; + } + + productMapped.categories = [ + { + id: product.category_id ? product.category_id[0] : '', + name: product.category_name ? product.category_name[0] : '', + } + ]; + + return productMapped; + }); +} + +export default async function handler(req, res) { + const { + q, + page = 1 + } = req.query; + + let limit = 30; + let offset = (page - 1) * limit; + + let parameter = [ + `facet.query=${q}`, + 'facet=true', + 'indent=true', + 'q.op=AND', + `q=${q}`, + 'facet.field=brand_str', + 'facet.field=category_name_str', + `start=${offset}`, + `rows=${limit}`, + ].join('&'); + + let result = await axios(process.env.SOLR_HOST + '/solr/products/select?' + parameter); + try { + result.data.response.products = productResponseMap(result.data.response.docs); + result.data.responseHeader.params.start = parseInt(result.data.responseHeader.params.start); + result.data.responseHeader.params.rows = parseInt(result.data.responseHeader.params.rows); + delete result.data.response.docs; + res.status(200).json(result.data); + } catch (error) { + res.status(400).json({ error: error.message }); + } +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 40b36dc2..9d26d8ee 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -44,7 +44,7 @@ export default function Home() { return ( <> -
+
{ heroBanners?.map((banner, index) => ( diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index f50d5037..e601d8c0 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -1,17 +1,13 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; -import ProductCard from "../../../components/ProductCard"; import Header from "../../../components/Header"; import { getOdoo } from "../../../helpers/apiOdoo"; import { createSlug, getId } from "../../../helpers/slug"; import currencyFormat from "../../../helpers/currencyFormat"; -import Head from "next/head"; -import { Swiper, SwiperSlide } from "swiper/react"; import { LazyLoadImage } from "react-lazy-load-image-component"; -import ImagePlaceholderIcon from "../../../icons/image-placeholder.svg"; -import "swiper/css"; import "react-lazy-load-image-component/src/effects/blur.css"; +import ProductSlider from "../../../components/product/ProductSlider"; export async function getServerSideProps(context) { const { slug } = context.query; @@ -83,126 +79,98 @@ export default function ProductDetail({product}) { return ( <> - - {product.name + '- Indoteknik'} - -
-
- - - {product.manufacture.name || '-'} - -

{product.name}{activeVariant.attributes != '' ? ' - ' + activeVariant.attributes : ''}

- - {product.variant_total > 1 && selectedVariant == "" ? ( -

Harga mulai dari:

- ) : ''} - - {product.lowest_price.discount_percentage > 0 ? ( -
- {activeVariant.price.discount_percentage}% -

{currencyFormat(activeVariant.price.price)}

-
- ) : ''} - - {product.lowest_price.price > 0 ? ( -

{currencyFormat(activeVariant.price.price_discount)}

- ) : ( -

Dapatkan harga terbaik, hubungi kami.

- )} - -
-
- - -
-
- - setQuantity(e.target.value)} /> -
-
- -
- - -
+
+
+ + +
+ + {product.manufacture.name ?? '-'} + +

{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}

+ + {product.variant_total > 1 && !selectedVariant ? ( +

Harga mulai dari:

+ ) : ''} -
-

Detail Produk

-
-

Jumlah Varian

-

{product.variant_total} Varian

-
-
-

Nomor SKU

-

SKU-{activeVariant.id}

+ {product.lowest_price.discount_percentage > 0 ? ( +
+ {activeVariant.price.discount_percentage}% +

{currencyFormat(activeVariant.price.price)}

+
+ ) : ''} + + {product.lowest_price.price > 0 ? ( +

{currencyFormat(activeVariant.price.price_discount)}

+ ) : ( +

Dapatkan harga terbaik, hubungi kami.

+ )} + +
+
+ + +
+
+ + setQuantity(e.target.value)} /> +
-
-

Part Number

-

{activeVariant.code}

+ +
+ +
-
-

Stok

-

- {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} -

+ +
+

Detail Produk

+
+

Jumlah Varian

+

{product.variant_total} Varian

+
+
+

Nomor SKU

+

SKU-{activeVariant.id}

+
+
+

Part Number

+

{activeVariant.code}

+
+
+

Stok

+

+ {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} +

+
+
+

Berat Barang

+

{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG

+
-
-

Berat Barang

-

{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG

+ +
+

Deskripsi Produk

+
/g, '') : 'Belum ada deskripsi produk.')}}>
-
-
-

Deskripsi Produk

-
/g, '') : 'Belum ada deskripsi produk.')}}>
-
+
+

Produk Lainnya

+ +
-
-

Produk Lainnya

- - {similarProducts?.products?.map((product, index) => ())} - - {similarProducts == null ? ( -
-
-
- -
-
-
-
-
-
- Loading... -
-
-
- -
-
-
-
-
-
- Loading... -
-
- ) : ''}
- -
+
); } \ No newline at end of file diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js new file mode 100644 index 00000000..6e6839be --- /dev/null +++ b/src/pages/shop/search.js @@ -0,0 +1,46 @@ +import axios from "axios"; +import Link from "next/link"; +import { useEffect, useState } from "react"; +import Header from "../../components/Header"; +import ProductCard from "../../components/ProductCard"; + +export async function getServerSideProps(context) { + const { q, page = 1 } = context.query; + let searchResults = await axios(`http://${context.req.headers.host}/api/shop/search?q=${q}&page=${page}`); + searchResults = searchResults.data; + return { props: { searchResults, q } }; +} + +export default function ShopSearch({ searchResults, q, page = 1 }) { + const pageTotal = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows); + + return ( + <> +
+
+
+

Produk

+
+ Menampilkan  + {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows} +  dari  + {searchResults.response.numFound} +  produk untuk pencarian {q} +
+
+ {searchResults.response.products.map((product) => ( + + ))} +
+
+ {[...Array(pageTotal)].map((v, i) => ( + + {i + 1} + + ))} +
+
+
+ + ) +} \ No newline at end of file -- cgit v1.2.3