Fixed 404 on Category pages

[damianlegawiec]

When category.image_url is null (as it is for the Blenders category in the Spree API), the rendered HTML becomes:

  style="background-image: url(null)"

The browser treats url(null) as a relative URL literally named null, which resolves against the current page URL. So on /us/en/c/kitchen/blenders, the browser fires off GET
/us/en/c/kitchen/null. Next.js routes that through the same [...permalink] catch-all, getCategory("kitchen/null") returns 404 → SpreeError: Category not found. The AbortError is the
browser cancelling the same phantom request when the dev page hot-reloads.

Fix

Only set backgroundImage when category.image_url is truthy

Summary by CodeRabbit

• Bug Fixes
  • Fixed category pages to properly handle cases where no category image is available, preventing invalid background image styling from being applied.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
storefront	Ready	Preview, Comment	Apr 10, 2026 4:05pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5e2b85a0-4954-4292-a3e4-560651946695

📥 Commits

Reviewing files that changed from the base of the PR and between da2dcc0 and f1cfc47.

📒 Files selected for processing (1)

• src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx

---

Walkthrough

The category page component was updated to conditionally apply the background image style. The style prop on the page hero container now only sets a backgroundImage when category.image_url is truthy, preventing invalid styling when the image URL is null or undefined.

Changes

Cohort / File(s)	Summary
Category Page Hero Styling src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx	Made the page hero container's backgroundImage style conditional on category.image_url truthiness. Passes undefined for style when no image URL exists, preventing invalid url(undefined) styling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Improve category page layout #105: Related modification to the same category page file that changed how the category hero banner's background image is handled; this PR refines it further by making the background image styling conditional rather than always applied.

Poem

🐰 A conditional hop, a fix so neat,
When image_url is empty, we retreat—
No undefined URLs in our display,
The hero shines brighter, hip-hop hooray! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fixed 404 on Category pages' directly and clearly summarizes the main change: resolving a 404 error on category pages caused by null image URLs.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/category-page-null-request

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}