From b7a98fbaa9bd2c8d9fafbe3090bc2c0a8a09dde5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 16 Dec 2022 15:39:02 +0700 Subject: no message --- package.json | 1 + src/components/ConfirmAlert.js | 7 +++---- src/components/Header.js | 8 ++++---- src/components/ProductCard.js | 17 ++++++++++++++--- src/icons/chevron-right.svg | 2 +- src/pages/_app.js | 1 + src/pages/shop/brands/[slug].js | 17 +++++++++++++---- src/pages/shop/cart.js | 9 ++++----- src/pages/shop/product/[slug].js | 12 ++++++++++-- src/pages/shop/search.js | 14 ++++++++++++-- src/styles/globals.css | 8 ++++---- 11 files changed, 67 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 9d8e529f..bde091d5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@heroicons/react": "^2.0.13", "axios": "^1.1.3", "cookies-next": "^2.1.1", "framer-motion": "^7.6.7", diff --git a/src/components/ConfirmAlert.js b/src/components/ConfirmAlert.js index 3a8f796d..27155011 100644 --- a/src/components/ConfirmAlert.js +++ b/src/components/ConfirmAlert.js @@ -1,5 +1,3 @@ -import { useState } from "react"; - const ConfirmAlert = ({ title, caption, @@ -13,10 +11,11 @@ const ConfirmAlert = ({
)}
-

{title}

+

{title}

+

{caption}

- +
diff --git a/src/components/Header.js b/src/components/Header.js index 88d4d368..fe76baba 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -84,26 +84,26 @@ export default function Header({ title }) { Profil Saya
- +
) : ''} Semua Brand
- +
Blog Indoteknik
- +
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 604ee9e0..b8967cc8 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -2,6 +2,7 @@ import Link from "./Link"; import currencyFormat from "../helpers/currencyFormat"; import { createSlug } from "../helpers/slug"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import { ChevronRightIcon } from "@heroicons/react/20/solid"; import 'react-lazy-load-image-component/src/effects/blur.css'; @@ -34,17 +35,27 @@ export default function ProductCard({ data }) { {product.lowest_price.discount_percentage}% ) : ''} + {product.lowest_price.price_discount > 0 ? (

{currencyFormat(product.lowest_price.price_discount)}

) : ( - - Tanya Harga + + Tanya Harga )} + {product.stock_total > 0 ? ( -
Ready Stock {product.stock_total > 5 ? '> 5' : '< 5'}
+
+
Ready Stock
+
{product.stock_total > 5 ? '> 5' : '< 5'}
+
) : ''} diff --git a/src/icons/chevron-right.svg b/src/icons/chevron-right.svg index fc5a76aa..eb58f2f2 100644 --- a/src/icons/chevron-right.svg +++ b/src/icons/chevron-right.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index 41d6c2f6..34cdf857 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -13,6 +13,7 @@ function MyApp({ Component, pageProps }) { position="top-center" toastOptions={{ duration: 3000, + className: 'border border-gray_r-8' }} /> diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js index b04d2715..a2f05cfa 100644 --- a/src/pages/shop/brands/[slug].js +++ b/src/pages/shop/brands/[slug].js @@ -1,5 +1,5 @@ import axios from "axios"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Filter from "../../../components/Filter"; import Header from "../../../components/Header"; import Layout from "../../../components/Layout"; @@ -58,6 +58,7 @@ export default function BrandDetail({ const productFound = searchResults.response.numFound; const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); const route = () => { let route = `/shop/brands/${slug}`; @@ -68,6 +69,14 @@ export default function BrandDetail({ return route; } + useEffect(() => { + let calculateFilterCount = 0; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [category, price_from, price_to, order_by]); + return ( <>
@@ -85,9 +94,6 @@ export default function BrandDetail({ />
-

Produk

{productFound > 0 ? ( @@ -106,6 +112,9 @@ export default function BrandDetail({ ) : 'Mungkin yang anda cari'}
+
{searchResults.response.products.map((product) => ( diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 0baaccd1..fe31e7c9 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -80,9 +80,7 @@ export default function Cart() { const updateQuantity = (productId, quantity) => { quantity = quantity == '' ? '' : parseInt(quantity); - if (quantity > 0) { - updateCart(productId, quantity); - } + updateCart(productId, quantity); }; const plusQuantity = (productId) => { @@ -119,7 +117,7 @@ export default function Cart() { setProducts([...productsToUpdate]); deleteItemCart(productId); hideDeleteConfirmation(); - toast.success('Berhasil menghapus 1 item dari keranjang', { duration: 1500 }); + toast.success('Berhasil menghapus 1 barang dari keranjang', { duration: 1500 }); } const toggleProductToProcess = (productId) => { @@ -132,7 +130,8 @@ export default function Cart() { return ( <> { + if (product.variant_total > 1 && !selectedVariant) { + toast.error('Pilih varian terlebih dahulu untuk menambahkan ke keranjang', { duration: 2000 }); + return false; + } + if (quantity > 0) { toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 }); createOrUpdateItemCart(activeVariant.id, parseInt(quantity)); + } else { + toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 }); } + return true; } @@ -101,7 +109,7 @@ export default function ProductDetail({ product }) {

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

- {product.variant_total > 1 && !selectedVariant ? ( + {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? (

Harga mulai dari:

) : ''} @@ -145,7 +153,7 @@ export default function ProductDetail({ product }) { diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 404685d1..a0a916fc 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -4,7 +4,7 @@ import Layout from "../../components/Layout"; import Pagination from "../../components/Pagination"; import ProductCard from "../../components/ProductCard"; import FilterIcon from "../../icons/filter.svg"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Filter from "../../components/Filter"; export async function getServerSideProps(context) { @@ -48,6 +48,7 @@ export default function ShopSearch({ // Variable for props state const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); const route = () => { let route = `/shop/search?q=${q}`; @@ -59,6 +60,15 @@ export default function ShopSearch({ return route; } + useEffect(() => { + let calculateFilterCount = 0; + if (brand) calculateFilterCount++; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [brand, category, price_from, price_to, order_by]); + return ( <>
@@ -94,7 +104,7 @@ export default function ShopSearch({ ) : 'Mungkin yang anda cari'}
{searchResults.response.products.map((product) => ( diff --git a/src/styles/globals.css b/src/styles/globals.css index b10e043a..c3776373 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -66,28 +66,28 @@ html, body { .badge-red { @apply bg-red_r-5 - text-red_r-11 + text-red_r-10 ; } .badge-gray { @apply bg-gray_r-5 - text-gray_r-11 + text-gray_r-10 ; } .badge-yellow { @apply bg-yellow_r-5 - text-yellow_r-11 + text-yellow_r-10 ; } .badge-green { @apply bg-green_r-5 - text-green_r-11 + text-green_r-10 ; } -- cgit v1.2.3