Marco
8c397c5dcb
Products now come from Payload's new "products" collection instead of a hardcoded catalog, same pattern already used for blog posts: - lib/payload.ts: getProducts()/getProductBySlug() (server-side fetch, 60s ISR) - New /api/products route so client components (CartContent, RelatedProducts) can reach the same data without a server-only import - lib/products.ts: useProducts() hook replacing the old PRODUCTS record - ProductGrid (/shop) fetches server-side directly; now shows all catalog products except notizbuch-klarheit (matches Figma's 4-card page-shop-overview — still cross-sold via RelatedProducts) - ProductSpotlight and /todo-cards' Pricing now pull price/photo from the same CMS product instead of a separately hardcoded "12,90 €", so the two can't silently drift apart - formatPrice moved to a new lib/format.ts (plain, no "use client") — Server Components can't call functions exported from a "use client" module directly, which lib/products.ts now is because of the hook Also fixes two unrelated bugs surfaced along the way: the add-to-cart button visibly resizing when its "Hinzugefügt ✓" success state showed (fixed with a CSS-grid text stack sized to the wider of the two strings), and removes the now-unused local product images from public/.
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { addToCart } from "../lib/cart";
|
|
import { useCartFly } from "./CartFly";
|
|
|
|
// Exported so consumers like RelatedProducts.tsx can delay their own
|
|
// follow-up UI changes (e.g. swapping out this exact card) until after
|
|
// the success state has actually had time to be seen.
|
|
export const FEEDBACK_MS = 2000;
|
|
|
|
/**
|
|
* Add-to-cart button that stays on the page (unlike AddToCartButton, which
|
|
* navigates to /cart) — used wherever a product grid lets you keep browsing,
|
|
* so a click needs its own success confirmation instead of relying on the
|
|
* navigation itself as feedback.
|
|
*/
|
|
export function AddToCartInlineButton({
|
|
id,
|
|
label = "In den Warenkorb",
|
|
className,
|
|
}: {
|
|
id: string;
|
|
label?: string;
|
|
className?: string;
|
|
}) {
|
|
const [added, setAdded] = useState(false);
|
|
const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
const { fly } = useCartFly();
|
|
|
|
useEffect(() => () => clearTimeout(timeoutRef.current), []);
|
|
|
|
function handleClick() {
|
|
addToCart(id);
|
|
if (buttonRef.current) fly(buttonRef.current);
|
|
setAdded(true);
|
|
clearTimeout(timeoutRef.current);
|
|
timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
|
|
}
|
|
|
|
const base =
|
|
className ??
|
|
"flex items-center justify-between px-5 py-3 rounded-sm border w-full transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
|
|
// Branch the border/bg classes instead of appending an "override" on top
|
|
// of the default ones — Tailwind v4 has no leading-`!` important prefix
|
|
// anymore (it's a trailing `!` now), so two conflicting utilities like
|
|
// border-border/border-success both being present would silently race on
|
|
// CSS source order instead of one cleanly winning.
|
|
const stateClasses = added
|
|
? "border-success bg-success-subtle"
|
|
: "border-border hover:border-brand";
|
|
|
|
return (
|
|
<button ref={buttonRef} type="button" onClick={handleClick} className={`${base} ${stateClasses}`}>
|
|
<span
|
|
className={
|
|
"text-body-sm transition-colors " +
|
|
(added ? "font-semibold text-success" : "text-text-primary")
|
|
}
|
|
>
|
|
{added ? "Hinzugefügt ✓" : label}
|
|
</span>
|
|
<img alt="" src="/icon-cart-outline.png" className="h-[1.875rem] w-8 object-contain" />
|
|
</button>
|
|
);
|
|
}
|