andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix all designJson access in cart page

Browse Source 
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:
Andymick
2026-07-18 19:32:02 +01:00
co-authored by Claude Haiku 4.5
parent f72e934943
commit 904b0f5838
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/cart/page.tsx
+13 -7
View File
@@ -62,7 +62,12 @@ export default function CartPage() {
<h1 className="font-display text-4xl">Your bag</h1> <h1 className="font-display text-4xl">Your bag</h1>
<div className="mt-8 divide-y divide-line border-t border-line"> <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 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"> <div className="h-24 w-24 shrink-0 border border-line bg-surface p-1">
{item.placementPreviewUrl || item.designPreviewUrl ? ( {item.placementPreviewUrl || item.designPreviewUrl ? (
@@ -89,18 +94,18 @@ export default function CartPage() {
</span> </span>
{item.size && <span>Size {item.size}</span>} {item.size && <span>Size {item.size}</span>}
</div> </div>
{(item.designJson.front.length > 0 || item.designJson.back.length > 0) && ( {(hasFront || hasBack) && (
<div className="mt-1"> <div className="mt-1">
<p className="text-xs text-muted"> <p className="text-xs text-muted">
Custom design Custom design
{item.designJson.front.length > 0 && item.designJson.back.length > 0 {hasFront && hasBack
? ' — front & back' ? ' — front & back'
: item.designJson.back.length > 0 : hasBack
? ' — back' ? ' — back'
: ' — front'} : ' — front'}
</p> </p>
<div className="mt-1 flex gap-3"> <div className="mt-1 flex gap-3">
{item.designJson.front.length > 0 && item.designPreviewUrl && ( {hasFront && item.designPreviewUrl && (
<a <a
href={item.designPreviewUrl} href={item.designPreviewUrl}
download={`${item.slug}-front-print.png`} download={`${item.slug}-front-print.png`}
@@ -109,7 +114,7 @@ export default function CartPage() {
Download front PNG Download front PNG
</a> </a>
)} )}
{item.designJson.back.length > 0 && item.designPreviewUrlBack && ( {hasBack && item.designPreviewUrlBack && (
<a <a
href={item.designPreviewUrlBack} href={item.designPreviewUrlBack}
download={`${item.slug}-back-print.png`} download={`${item.slug}-back-print.png`}
@@ -152,7 +157,8 @@ export default function CartPage() {
Remove Remove
</button> </button>
</div> </div>
))} );
})}
</div> </div>
{hasCustomDesign && ( {hasCustomDesign && (