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/components/header.js | 68 ++++++++++++ src/components/productCard.js | 35 +++++++ src/helpers/apiOdoo.js | 21 ++++ src/helpers/currencyFormat.js | 8 ++ src/helpers/slug.js | 13 +++ src/icons/menu.svg | 5 + src/icons/search.svg | 4 + src/icons/shopping-cart.svg | 12 +++ src/pages/_app.js | 7 ++ src/pages/index.js | 12 +++ src/pages/shop/product/[slug].js | 172 ++++++++++++++++++++++++++++++ src/styles/globals.css | 220 +++++++++++++++++++++++++++++++++++++++ 12 files changed, 577 insertions(+) create mode 100644 src/components/header.js create mode 100644 src/components/productCard.js create mode 100644 src/helpers/apiOdoo.js create mode 100644 src/helpers/currencyFormat.js create mode 100644 src/helpers/slug.js create mode 100644 src/icons/menu.svg create mode 100644 src/icons/search.svg create mode 100644 src/icons/shopping-cart.svg create mode 100644 src/pages/_app.js create mode 100644 src/pages/index.js create mode 100644 src/pages/shop/product/[slug].js create mode 100644 src/styles/globals.css (limited to 'src') diff --git a/src/components/header.js b/src/components/header.js new file mode 100644 index 00000000..baebbd3a --- /dev/null +++ b/src/components/header.js @@ -0,0 +1,68 @@ +import Image from "next/image"; +import Link from "next/link"; +import ShoppingCartIcon from "../icons/shopping-cart.svg"; +import SearchIcon from "../icons/search.svg"; +import MenuIcon from "../icons/menu.svg"; +import { useState } from "react"; + + +export default function Header() { + const [isMenuActive, setIsMenuActive] = useState(false); + + const openMenu = () => setIsMenuActive(true); + const closeMenu = () => setIsMenuActive(false); + + return ( + <> +
+
+ Masuk + Daftar +
+
+ + Brand +
+ +
+ + + Blog +
+ +
+ + +
+
+ + +
+
+ + Logo Indoteknik + +
+ + + + +
+
+
+ + +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/productCard.js b/src/components/productCard.js new file mode 100644 index 00000000..dc292316 --- /dev/null +++ b/src/components/productCard.js @@ -0,0 +1,35 @@ +import Link from "next/link"; +import currencyFormat from "../helpers/currencyFormat"; +import { createSlug } from "../helpers/slug"; + +export default function productCard({ data }) { + let product = data; + return ( +
+ + {product.name} + +
+
+ {typeof product.manufacture.name !== undefined ? ( + {product.manufacture.name} + ) : ( + - + )} + + {product.name} + +
+
+ {product.lowest_price.discount_percentage > 0 ? ( +
+ {product.lowest_price.discount_percentage}% +

{currencyFormat(product.lowest_price.price)}

+
+ ) : ''} +

{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/helpers/apiOdoo.js b/src/helpers/apiOdoo.js new file mode 100644 index 00000000..632edf61 --- /dev/null +++ b/src/helpers/apiOdoo.js @@ -0,0 +1,21 @@ +const axios = require('axios'); + +const getOdoo = async (url) => { + try { + let res = await axios(process.env.DB_HOST + url, { + headers: { + db: process.env.DB_NAME, + username: process.env.DB_USER, + password: process.env.DB_PASS, + } + }); + + return res.data.result || []; + } catch (error) { + console.log(error); + } +} + +export { + getOdoo, +}; \ No newline at end of file diff --git a/src/helpers/currencyFormat.js b/src/helpers/currencyFormat.js new file mode 100644 index 00000000..dadeaec6 --- /dev/null +++ b/src/helpers/currencyFormat.js @@ -0,0 +1,8 @@ +export default function currencyFormat(value) { + const currency = new Intl.NumberFormat('id-ID', { + style: 'currency', + currency: 'IDR', + maximumFractionDigits: 0 + }); + return currency.format(value); +} \ No newline at end of file diff --git a/src/helpers/slug.js b/src/helpers/slug.js new file mode 100644 index 00000000..5a8db08f --- /dev/null +++ b/src/helpers/slug.js @@ -0,0 +1,13 @@ +const createSlug = (name, id) => { + return name.trim().replace(new RegExp(/[^A-Za-z0-9]/, 'g'), '-').toLowerCase() + '-' + id; +} + +const getId = (slug) => { + let id = slug.split('-'); + return id[id.length-1]; +} + +export { + createSlug, + getId +}; \ No newline at end of file diff --git a/src/icons/menu.svg b/src/icons/menu.svg new file mode 100644 index 00000000..f4ff45ad --- /dev/null +++ b/src/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/search.svg b/src/icons/search.svg new file mode 100644 index 00000000..6de1cdfa --- /dev/null +++ b/src/icons/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/shopping-cart.svg b/src/icons/shopping-cart.svg new file mode 100644 index 00000000..5c899876 --- /dev/null +++ b/src/icons/shopping-cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + 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 diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 00000000..763a6d39 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,220 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +html, body { + @apply max-w-full; + @apply text-base; + @apply text-gray-900; +} + +@layer base { + h1, .h1 { + @apply text-lg; + @apply font-semibold; + @apply text-gray-900; + } + + a { + @apply font-medium; + @apply text-yellow-900; + } +} + +@layer components { + .badge-red { + @apply text-xs; + @apply font-medium; + @apply px-1; + @apply py-0.5; + @apply rounded; + @apply bg-red-300; + @apply text-red-900; + } + + .badge-yellow { + @apply text-xs; + @apply font-medium; + @apply px-1; + @apply py-0.5; + @apply rounded; + @apply bg-yellow-300; + @apply text-yellow-900; + } + + .form-label { + @apply text-sm; + @apply mb-1; + @apply block; + } + + .form-input { + @apply p-3; + @apply rounded; + @apply border; + @apply border-gray-300; + @apply bg-transparent; + @apply w-full; + @apply leading-none; + } + + .btn-primary { + @apply p-3; + @apply bg-yellow-900; + @apply border-yellow-900; + @apply rounded; + @apply border; + @apply text-white; + @apply text-center; + @apply disabled:bg-yellow-700; + @apply disabled:border-yellow-700; + } + + .btn-light { + @apply p-3; + @apply bg-gray-100; + @apply border-gray-300; + @apply rounded; + @apply border; + @apply text-gray-900; + @apply text-center; + } + + .product-card { + @apply w-full; + @apply h-full; + @apply border; + @apply border-gray-300; + @apply rounded; + @apply relative; + @apply flex; + @apply flex-col; + } + + .product-card__image { + @apply w-full; + @apply h-[160px]; + @apply object-contain; + @apply object-center; + @apply border-b; + @apply border-gray-300; + } + + .product-card__description { + @apply p-2; + @apply pb-3; + @apply flex; + @apply flex-col; + @apply flex-1; + @apply justify-between; + } + + .product-card__title { + @apply text-sm; + @apply text-gray-900; + } + + .product-card__brand { + @apply text-sm; + } +} + +@layer utilities { + .wrap-line-ellipsis-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + + .wrap-line-ellipsis-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.menu-wrapper { + @apply fixed; + @apply top-0; + @apply left-0; + @apply bg-white; + @apply w-[85%]; + @apply h-full; + @apply z-[60]; + @apply py-4; + @apply px-4; + @apply overflow-y-auto; + @apply translate-x-[-100%]; + @apply ease-linear; + @apply duration-150; +} + +.menu-wrapper.active{ + @apply translate-x-0; +} + +.menu-overlay { + @apply fixed; + @apply top-0; + @apply left-0; + @apply w-full; + @apply h-full; + @apply z-[55]; + @apply bg-gray-900/60; +} + +.sticky-header { + @apply px-4; + @apply py-3; + @apply bg-white; + @apply border-b; + @apply sticky; + @apply top-0; + @apply shadow; + @apply z-50; +} + +.content-container { + @apply max-w-full; + @apply overflow-x-hidden; +} + +#indoteknik_toast { + @apply fixed; + @apply bottom-4; + @apply translate-y-[200%]; + @apply left-[50%]; + @apply translate-x-[-50%]; + @apply z-[100]; + @apply flex; + @apply items-center; + @apply p-4; + @apply mb-4; + @apply w-[90%]; + @apply text-gray-500; + @apply bg-white; + @apply border; + @apply border-gray-300; + @apply rounded-lg; + @apply shadow; + @apply ease-linear; + @apply duration-300; +} + +#indoteknik_toast.active { + @apply translate-y-0; +} + +.category-menu { + @apply hidden; +} + +.swiper-slide { + @apply !h-auto; +} \ No newline at end of file -- cgit v1.2.3