Next.js Discord

Discord Forum

How to make a Button inside Button

Answered
M7ilan posted this in #help-forum
Open in Discord
Avatar
M7ilanOP
I'm trying to to make a product card that can be clicked anywhere to view the full product page plus the add to cart button inside it, I don't know if that's possible tho but I saw some websites like amazon have that exact thing I want, an add to cart button inside a product card.
Image
Answered by Rafael Almeida
nested a tags is invalid HTML, hence the hydration error. if you want to make the whole card clickable a common solution is to add the link to a particular element (like the title) then expand its area to the whole card so you can click anywhere to trigger it
View full answer

5 Replies

Avatar
M7ilanOP
The current problem is that when I click the add to cart button it navigates me to the overview product page
Code:
<Link
      href={`/product/${handle}`}
      className="h-fit w-full overflow-hidden rounded-lg border shadow-md hover:border-foreground"
    >
      <Image
        priority
        className="h-[300px] w-full object-cover"
        src={images.edges[0].node.transformedSrc}
        alt={images.edges[0].node.altText}
        width={400}
        height={400}
      />
      <div dir="ltr" className="flex flex-col gap-4 border-t p-4">
        <h3 className="mt-0 flex justify-between">{title}</h3>
        <h4 dir="rtl">{formatPrice(price)}</h4>
        <Link
          href="/"
          className={cn(`${buttonVariants({ variant: "default" })} flex-1`)}
        >
          add to cart
        </Link>
      </div>
    </Link>
Answer
thanks