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/shop/product/[slug].js | 202 ++++++++++++++++----------------------- src/pages/shop/search.js | 46 +++++++++ 2 files changed, 131 insertions(+), 117 deletions(-) create mode 100644 src/pages/shop/search.js (limited to 'src/pages/shop') 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