diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 09:12:14 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 09:12:14 +0700 |
| commit | f51d3946be44400b9f4b90fe03b79226522d7369 (patch) | |
| tree | 3887dc8fd08de91aa7eaf7e8587452a5663181a0 /src/pages | |
| parent | 69d7bd767f1b720ea5d1d5124374281e3449a48d (diff) | |
no message
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/shop/product/[slug].js | 80 |
1 files changed, 46 insertions, 34 deletions
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index b76cdee9..16763ab7 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -11,6 +11,7 @@ import { createOrUpdateItemCart } from "../../../helpers/cart"; import toast from "react-hot-toast"; import Footer from "../../../components/Footer"; import Image from "../../../components/Image"; +import LineDivider from "../../../components/LineDivider"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -113,7 +114,8 @@ export default function ProductDetail({ product }) { alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" /> - <div className="p-4 pb-10"> + + <div className="p-4"> <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}> {product.manufacture.name ?? '-'} </Link> @@ -135,8 +137,12 @@ export default function ProductDetail({ product }) { ) : ( <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p> )} + </div> + + <LineDivider /> - <div className="flex gap-x-2 mt-5"> + <div className="p-4"> + <div className="flex gap-x-2"> <div className="w-9/12"> <label className="form-label mb-1">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label> <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} > @@ -168,42 +174,48 @@ export default function ProductDetail({ product }) { + Keranjang </button> </div> + </div> - <div className="mt-10"> - <h2 className="font-bold mb-2">Detail Produk</h2> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Jumlah Varian</h3> - <p className="text-gray-800">{product.variant_total} Varian</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Nomor SKU</h3> - <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Part Number</h3> - <p className="text-gray-800" id="part_number">{activeVariant.code}</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Stok</h3> - <p className="text-gray-800" id="stock"> - {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} - </p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Berat Barang</h3> - <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p> - </div> - </div> + <LineDivider /> - <div className="mt-10"> - <h2 className="font-bold mb-4">Deskripsi Produk</h2> - <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}></div> + <div className="p-4"> + <h2 className="font-bold mb-2">Detail Produk</h2> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Jumlah Varian</h3> + <p className="text-gray-800">{product.variant_total} Varian</p> </div> - - <div className="mt-10"> - <h2 className="font-bold mb-4">Produk Lainnya</h2> - <ProductSlider products={similarProducts}/> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Nomor SKU</h3> + <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p> + </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Part Number</h3> + <p className="text-gray-800" id="part_number">{activeVariant.code}</p> + </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Stok</h3> + <p className="text-gray-800" id="stock"> + {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} + </p> </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Berat Barang</h3> + <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p> + </div> + </div> + + <LineDivider /> + + <div className="p-4"> + <h2 className="font-bold mb-4">Deskripsi Produk</h2> + <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}></div> + </div> + + <LineDivider /> + + <div className="p-4"> + <h2 className="font-bold mb-4">Produk Lainnya</h2> + <ProductSlider products={similarProducts}/> </div> <Footer /> |
