浏览代码

首页产品加跳转详情页链接

zhangzf 6 天之前
父节点
当前提交
4c9faf2d84

+ 3 - 1
src/app/(public)/_components/HomeBestSellers.tsx

@@ -18,6 +18,8 @@ const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
   for (let i = 0; i < bestSellers.length; i += chunkSize) {
     productBlocks.push(bestSellers.slice(i, i + chunkSize));
   }
+  console.log('productBlocks------------------',productBlocks);
+  
   return (
     <div className="w-full max-w-[1200px] mx-auto px-4 py-8">
       {/* 标题 */}
@@ -54,7 +56,7 @@ const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
                     className="w-full h-auto object-cover rounded-sm"
                   />
                   {/* 产品标题 */}
-                  <Link href={"/wiggins-ready-go-250-density-popping-curly-hd-lace-front-wigs-medium-length-human-hair-wigs.html"} className="text-sm text-gray-800 truncate">
+                  <Link href={`/${product.urlKey}.html`} className="text-sm text-gray-800 truncate">
                     {product.name}
                   </Link>
                   {/* 评分 + 评论数 */}

+ 3 - 2
src/app/(public)/_components/HomeNewArrival.tsx

@@ -2,6 +2,7 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
+import Link from "next/link";
 // 导入Swiper基础样式
 import "swiper/css";
 import "swiper/css/navigation";
@@ -53,9 +54,9 @@ const HomeNewArrival = ({ newArrival }: NewArrivalProps) => {
                     className="w-full h-auto object-cover rounded-sm"
                   />
                   {/* 产品标题 */}
-                  <p className="text-sm text-gray-800 truncate">
+                   <Link href={`/${product.urlKey}.html`} className="text-sm text-gray-800 truncate">
                     {product.name}
-                  </p>
+                  </Link>
                   {/* 评分 + 评论数 */}
                   <div className="flex items-center gap-1">
                     <div className="flex">

+ 3 - 2
src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -5,6 +5,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 import "./css/swiper-custom.css";
+import Link from "next/link";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
 interface zeroWearProps {
@@ -77,9 +78,9 @@ const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
                   />
 
                   <div className="p-2 flex flex-col gap-2">
-                    <p className="text-sm text-gray-800 truncate">
+                    <Link href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">
                       {item.name}
-                    </p>
+                    </Link>
                     {/* 价格 + 购物车图标 */}
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">

+ 4 - 1
src/app/(public)/_components/RecommendedProducts.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useState, useEffect, useCallback } from "react";
 import Image from "next/image";
+import Link from "next/link";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct} from "@/types/home/type"
 interface recommendedProps {
@@ -138,7 +139,9 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
             </div>
 
             {/* 标题 */}
-            <p className="text-sm text-gray-800 truncate">{item.name}</p>
+            <Link href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">
+              {item.name}
+            </Link>
 
             {/* 星级 + 评论数 */}
             <div className="flex items-center gap-1">

+ 3 - 2
src/app/(public)/_components/Trending.tsx

@@ -5,6 +5,7 @@ import "swiper/css";
 import "swiper/css/scrollbar";
 import "swiper/css/navigation";
 import Image from "next/image";
+import Link from "next/link";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct} from "@/types/home/type"
 interface trendingProps {
@@ -169,9 +170,9 @@ const Trending = ({ trending }: trendingProps) => {
 
                   {/* 底部文字价格区域 */}
                   <div className="p-3 flex flex-col rounded-xl mt-3 bg-[#f0f8f5] gap-3">
-                    <p className="text-base text-gray-900 truncate">
+                     <Link href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">
                       {item.name}
-                    </p>
+                    </Link>
                     {/* 价格 + 购物车图标 */}
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">

+ 1 - 0
src/types/home/type.ts

@@ -19,6 +19,7 @@ export type HomeProduct = {
   is_featured: boolean;
   short_description: string;
   videoUrl: string;
+  urlKey?:string
 };
 type HomeSection = {
   id: number;