Skip to content

feat(products): add SectionProducts component for server-side section rendering #726

Description

@timowestnosto

Title:
feat(products): add SectionProducts component for server-side section rendering

Description:
Create a SectionProducts component alongside the existing Products component that loads product markup via Shopify section rendering. This component should fetch HTML from /search?section_id=<section_id>&q=<handles> where handles are colon-separated product handles, then render the returned markup directly.

Acceptance Criteria:

  • Create SectionProducts component at src/components/Products/SectionProducts.tsx
  • Component accepts props for sectionId and uses product handles from search results
  • Fetches HTML from /search?section_id=${sectionId}&q=${handles.join(':')} endpoint
  • Renders returned HTML markup using dangerouslySetInnerHTML or similar approach
  • Maintains same loading states and styling as existing Products component
  • Uses useDecoratedSearchResults to get product handles from current search results
  • Handles loading, error, and success states appropriately
  • Add TypeScript types for component props and fetch response

Technical Requirements:

  • Follow existing patterns from Products.tsx for state management and styling
  • Use fetch API or appropriate HTTP client for section rendering requests
  • Implement proper error handling for failed section requests
  • Ensure component works with existing search flow and decorators
  • Add loading states that match existing Products component behavior

Files to Create/Modify:

  • src/components/Products/SectionProducts.tsx - New component
  • Add unit tests for the new component
  • Create Storybook story demonstrating section rendering

Validation:

  • npm run lint passes without errors
  • npm run test passes all component tests
  • npm run typecheck passes without TypeScript errors
  • npm run storybook shows component rendering correctly
  • Manual testing confirms section rendering works with valid section IDs

References:

  • Existing component: Products.tsx
  • Search hooks: @nosto/search-js/preact/hooks
  • Shopify section rendering API pattern

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions