Fix all designJson access in cart page
Parse designJson string to object before accessing front/back properties. Prevents TypeError when rendering custom design items in cart. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
f72e934943
commit
904b0f5838
+13
-7
@@ -62,7 +62,12 @@ export default function CartPage() {
|
||||
<h1 className="font-display text-4xl">Your bag</h1>
|
||||
|
||||
<div className="mt-8 divide-y divide-line border-t border-line">
|
||||
{items.map((item) => (
|
||||
{items.map((item) => {
|
||||
const design = typeof item.designJson === 'string' ? JSON.parse(item.designJson) : item.designJson;
|
||||
const hasFront = (design.front?.length ?? 0) > 0;
|
||||
const hasBack = (design.back?.length ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<div key={item.cartItemId} className="flex flex-wrap items-center gap-4 py-6">
|
||||
<div className="h-24 w-24 shrink-0 border border-line bg-surface p-1">
|
||||
{item.placementPreviewUrl || item.designPreviewUrl ? (
|
||||
@@ -89,18 +94,18 @@ export default function CartPage() {
|
||||
</span>
|
||||
{item.size && <span>Size {item.size}</span>}
|
||||
</div>
|
||||
{(item.designJson.front.length > 0 || item.designJson.back.length > 0) && (
|
||||
{(hasFront || hasBack) && (
|
||||
<div className="mt-1">
|
||||
<p className="text-xs text-muted">
|
||||
Custom design
|
||||
{item.designJson.front.length > 0 && item.designJson.back.length > 0
|
||||
{hasFront && hasBack
|
||||
? ' — front & back'
|
||||
: item.designJson.back.length > 0
|
||||
: hasBack
|
||||
? ' — back'
|
||||
: ' — front'}
|
||||
</p>
|
||||
<div className="mt-1 flex gap-3">
|
||||
{item.designJson.front.length > 0 && item.designPreviewUrl && (
|
||||
{hasFront && item.designPreviewUrl && (
|
||||
<a
|
||||
href={item.designPreviewUrl}
|
||||
download={`${item.slug}-front-print.png`}
|
||||
@@ -109,7 +114,7 @@ export default function CartPage() {
|
||||
Download front PNG
|
||||
</a>
|
||||
)}
|
||||
{item.designJson.back.length > 0 && item.designPreviewUrlBack && (
|
||||
{hasBack && item.designPreviewUrlBack && (
|
||||
<a
|
||||
href={item.designPreviewUrlBack}
|
||||
download={`${item.slug}-back-print.png`}
|
||||
@@ -152,7 +157,8 @@ export default function CartPage() {
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{hasCustomDesign && (
|
||||
|
||||
Reference in New Issue
Block a user