ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 15/01

Browse Source
This commit is contained in:
Dao Duc
2026-01-15 17:30:04 +07:00
parent f5de4a5313
commit b921d73f73
20 changed files with 618 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/home/Product/CategoryIcon.tsx Normal file
View File

@@ -0,0 +1,34 @@
export default function CategoryIcon({item}:any) {
return(
<>
{item == 1 &&
<p className="m-0">
<i className="icons icon-wallet"></i>
<span> Trả góp 0% </span>
</p>
}
{item == 91 || item == 27 &&
<p className="m-0">
<i className="icons icon-truck"></i>
<span> Miễn phí giao hàng </span>
</p>
}
{item == 103 &&
<p className="m-0">
<i className="icons icon-world"></i>
<span> Giao hàng toàn quốc </span>
</p>
}
{item == 92 &&
<p className="m-0">
<i className="icons icon-medal"></i>
<span> Bảo hành tận nơi </span>
</p>
}
</>
)
}

231
src/components/home/Product/index.tsx
View File

File diff suppressed because one or more lines are too long

27
src/components/home/Category/index.tsx → src/components/home/featured-category/index.tsx
View File

@@ -2,20 +2,39 @@ import { categories } from "@/data/categories";
export default function FeaturedProductCategories() {
const {all_category} = categories.product;
const getAllCategoriesFlat = (cats: any[]): any[] => {
const result: any[] = [];
cats.forEach((cat) => {
result.push(cat);
if (cat.children && cat.children.length > 0) {
result.push(...getAllCategoriesFlat(cat.children));
}
});
return result;
};
const allCategoriesFlat = getAllCategoriesFlat(all_category);
// Lọc các danh mục nổi bật
const featuredCategories = allCategoriesFlat.filter(
(item: any) => item.is_featured === 1
);
return (
<>
{all_category &&
{featuredCategories.length &&
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
<div className="grid grid-cols-10 gap-6">
{all_category
.filter( (item:any) => item.is_featured === 1 )
{featuredCategories
.map( (item:any) =>
<a href={item.url} className="item" key={item.id}>
<i className="image lazy"
style={{ backgroundImage: `url(${item.thumnail})` }}
style={{ backgroundImage: `url(${item.thumnail ? item.thumnail : '/images/avatar-admin.png'})` }}
></i>
<span className="block">

2
src/components/home/index.tsx
View File

@@ -1,6 +1,6 @@
import Slider from "./slider";
import Deal from "./deal";
import FeaturedProductCategories from "./category";
import FeaturedProductCategories from "./featured-category";
import ProductCategories from "./product";
import Article from "./article";

70
src/components/other/Header/Cart.tsx
View File

@@ -1,18 +1,47 @@
import Link from "next/link";
import { useCart } from "@/hooks/useCart";
import { getAllProducts, formatPrice } from "@/lib/utils"
import { getAllProducts } from "@/lib/utils"
import CartItem from "@/components/other/header/cart/index"
export default function Cart() {
const {
cartItems,
cartCount,
totalItems,
loading,
} = useCart();
const { cartCount, cartIds, loading } = useCart();
const allProducts = getAllProducts();
const allProducts = getAllProducts();
// Lọc sản phẩm có trong giỏ hàng với quantity
const productsInCart = cartItems
.map(cartItem => {
const product = allProducts.find(p => p.id === cartItem.id);
if (product) {
return {
...product,
cartQuantity: cartItem.cartQuantity,
};
}
return null;
})
.filter(item => item !== null);
// Tính tổng tiền
const totalPrice = productsInCart.reduce((sum, item) => {
if (item && item.price) {
return sum + (item.price * item.quantity);
}
return sum;
}, 0);
const productsInCart = allProducts.filter(p => cartIds.includes(p.id) );
console.log(productsInCart);
const hasProducts = cartCount > 0;
return (
<>
<div className="header-cart-item" id="js-header-cart">
<div className="header-cart-item">
<Link href="/cart" rel="nofollow" className="flex items-center">
<i className="icon-cart relative mr-[10px]">
<b className="js-cart-count cart-count">{cartCount}</b>
@@ -20,39 +49,24 @@ export default function Cart() {
<span className="text"> Giỏ <br />Hàng </span>
</Link>
{productsInCart.length > 0 &&
{!loading && hasProducts &&
<div className="header-cart-hover">
<div className="cart-items-holder">
<p className="text-center underline font-600 red border-b" style={{ margin: '0', padding: "10px" }}>
1 số sp thêm từ DEAL sẽ không có trong DB tĩnh nên không hiển thị
</p>
{productsInCart.map((item:any) =>
<div className="cart-item" key={item.id}>
<Link href={item.productUrl} className="cart-img">
<img src={item.productImage.small} alt="image" width={100} height={100} />
</Link>
<div className="cart-text">
<Link href={item.productUrl} className="d-block font-700" style={{ marginBottom: "5px" }}>
{item.productName}
</Link>
<p className="m-0 d-flex justify-content-between">
<b>x1</b>
<b className="red">
{item.price > 0 ? formatPrice(item.price) +'đ' : 'Liên hệ'}
</b>
</p>
</div>
</div>
<CartItem key={item.id} item={item} />
)}
<p className="text-center underline font-600 red" style={{ margin: '0', padding: "10px" }}> 1 số sp không có trong DB tĩnh </p>
</div>
<div className="cart-price-hover">
<p className="grey m-0 text-right">
Tổng tiền hàng
(<span className="red"><span className="js-cart-count">{cartCount}</span> sản phẩm</span>):
<span className="red text-18 font-600" style={{ verticalAlign: "top" }}> 10.770.000đ </span>
(<span className="red"><span className="js-cart-count">{totalItems}</span> sản phẩm</span>):
<span className="red text-18 font-600" style={{ verticalAlign: "top" }}> {totalPrice}đ </span>
</p>
<Link href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </Link>
</div>

30
src/components/other/Header/cart/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Link from "next/link";
import { formatPrice } from "@/lib/utils";
export default function CartItem({item}:any) {
return(
<div className="cart-item">
<Link href={item.productUrl} className="cart-img">
<img
src={item.productImage.small}
alt={item.productName}
width={100}
height={100}
/>
</Link>
<div className="cart-text">
<Link href={item.productUrl} className="d-block font-700" style={{ marginBottom: "5px" }}>
{item.productName}
</Link>
<p className="m-0 d-flex justify-content-between">
<b>x{item.cartQuantity}</b>
<b className="red">
{item.price > 0 ? formatPrice(item.price) +'đ' : 'Liên hệ'}
</b>
</p>
</div>
</div>
)
}

8
src/components/shared/DealItem.tsx
View File

@@ -26,6 +26,7 @@ export default function DealItem( {item} : any) {
<span className="deal-discount">-{discount}%</span>
</>
) : null;
const checkIncart = isInCart(productInfo.id);
return (
<div className="deal-item">
@@ -51,9 +52,12 @@ export default function DealItem( {item} : any) {
{discountView}
</div>
<button className="deal-btn bx bx-plus" type="button" aria-label="Mua"
<button className={`deal-btn bx ${checkIncart ? 'bx-check' : 'bx-plus' }`}
style={{ background: `${checkIncart ? '#ccc' : ''}` }}
disabled={checkIncart}
type="button" aria-label="Mua"
onClick={() => addToCart(productInfo.id)}
disabled={isInCart(productInfo.id)}
></button>
</div>

109
src/components/shared/ProductItem.tsx Normal file
View File

@@ -0,0 +1,109 @@
'use client';
import Link from "next/link";
import { formatPrice } from "@/lib/utils";
export default function ProductItem({item}:any){
console.log('ProductItem: ', item)
return (
<div className="p-item">
<Link href={item.productUrl} className="p-img">
<img
src={item.productImage.large}
alt={item.productName}
width={250}
height={250}
/>
</Link>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price"> 22.000.000 đ </p>
</div>
<Link href={item.productUrl} className="p-name">
<h3>{item.productName}</h3>
</Link>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
<i className="bx bx-check-circle text-18 w-[18px]"></i>
<span> Sẵn hàng </span>
</p>
{/* <p className="m-0 red flex items-center gap-1">
<i className="bx bxs-phone text-18 w-[18px]"></i>
<span> Liên hệ </span>
</p> */}
<p className="m-0 text-[#E16B10] flex items-center gap-1">
<i className="bx bx-gift text-18 w-[18px]"></i>
<span> Quà tặng </span>
</p>
</div>
<button type="button" className="" aria-label="Mua"></button>
<button className={`p-btn bx bg-btn text-white rounded-full w-9 h-9 text-20 ${checkIncart ? 'bx-check' : 'bx-plus' }`}
style={{ background: `${checkIncart ? '#ccc' : ''}` }}
disabled={checkIncart}
type="button" aria-label="Mua"
onClick={() => addToCart(productInfo.id)}
></button>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600"> Giá bán: </b>
<b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b>
<del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span>
</p>
<p className="m-0">
<b className="font-600"> Bảo hành: </b>
<span> Theo từng linh kiện </span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen"></i>
<span> Thông số sản phẩm </span>
</p>
<div className="tooltip-spec">
<div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div>
<div className="item"> RAM: DDR4 16GB (1x16G) 3200 MHz </div>
<div className="item"> VGA: NVIDIA RTX 3060 12GB GDDR6 </div>
</div>
</div>
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
<i className="icons icon-gift"></i>
<span> Khuyến mại hấp dẫn </span>
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div className="item"> <p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh)</strong></span></p> </div>
<div className="item"><p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h </strong></span></p></div> <div className="item"><p><span style={{ color: '#ff0000', fontSize: '12pt' }}><strong>⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc </strong></span></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}