From d6d2d9ceef2e95b604ac4ebdc054cad44a8440b1 Mon Sep 17 00:00:00 2001 From: IT Fixcomart Date: Mon, 31 Oct 2022 16:31:56 +0700 Subject: Product detail and header --- src/pages/_app.js | 7 ++ src/pages/index.js | 12 +++ src/pages/shop/product/[slug].js | 172 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+) create mode 100644 src/pages/_app.js create mode 100644 src/pages/index.js create mode 100644 src/pages/shop/product/[slug].js (limited to 'src/pages') diff --git a/src/pages/_app.js b/src/pages/_app.js new file mode 100644 index 00000000..1e1cec92 --- /dev/null +++ b/src/pages/_app.js @@ -0,0 +1,7 @@ +import '../styles/globals.css' + +function MyApp({ Component, pageProps }) { + return +} + +export default MyApp diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 00000000..57f96ec9 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,12 @@ +import { useEffect, useState } from "react"; +import Header from "../components/header"; + +export default function Home() { + const [product, setProduct] = useState({}); + + return ( + <> +
+ + ) +} diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js new file mode 100644 index 00000000..519f8160 --- /dev/null +++ b/src/pages/shop/product/[slug].js @@ -0,0 +1,172 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import Header from "../../../components/header"; +import ProductCard from "../../../components/productCard"; +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 'swiper/css'; + + +export async function getServerSideProps(context) { + const { slug } = context.query; + let product = await getOdoo('/api/v1/product/' + getId(slug)); + product = product[0]; + + const similarProducts = await getOdoo(`/api/v1/product/${getId(slug)}/similar?limit=20`); + + return {props: {product, similarProducts}}; +} + +export default function ProductDetail({product, similarProducts}) { + const router = useRouter(); + const { slug } = router.query; + const [selectedVariant, setSelectedVariant] = useState(""); + const [quantity, setQuantity] = useState("1"); + const [activeVariant, setActiveVariant] = useState({ + id: product.id, + code: product.code, + price: product.lowest_price, + stock: product.stock_total, + weight: product.weight, + attributes: '', + }); + + useEffect(() => { + if (product.variants.length == 1) { + setSelectedVariant(product.variants[0].id); + } + }, [product.variants]); + + useEffect(() => { + if (selectedVariant != '') { + let newActiveVariant = product.variants.filter((variant) => { + return variant.id == selectedVariant; + }); + + if (newActiveVariant.length == 1) { + newActiveVariant = newActiveVariant[0]; + setActiveVariant({ + id: newActiveVariant.id, + code: newActiveVariant.code, + price: newActiveVariant.price, + stock: newActiveVariant.stock, + weight: newActiveVariant.weight, + attributes: newActiveVariant.attributes.join(', '), + }); + } + } + }, [selectedVariant]) + + let onchangeVariant = (e) => { + setSelectedVariant(e.target.value); + setQuantity("1"); + } + + let addToCart = () => { + return true; + } + + return ( + <> + + {product.name + '- Indoteknik'} + +
+
+ {product.name} + + {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)} /> +
+
+ +
+ + +
+ +
+

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

+
+
+ +
+

Deskripsi Produk

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

Produk Lainnya

+ + {similarProducts.products.map((product, index) => ())} + +
+ +
+ + ); +} \ No newline at end of file -- cgit v1.2.3