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
Title:
feat(products): add SectionProducts component for server-side section rendering
Description:
Create a
SectionProductscomponent alongside the existingProductscomponent 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:
SectionProductscomponent atsrc/components/Products/SectionProducts.tsxsectionIdand uses product handles from search results/search?section_id=${sectionId}&q=${handles.join(':')}endpointdangerouslySetInnerHTMLor similar approachProductscomponentuseDecoratedSearchResultsto get product handles from current search resultsTechnical Requirements:
fetchAPI or appropriate HTTP client for section rendering requestsProductscomponent behaviorFiles to Create/Modify:
src/components/Products/SectionProducts.tsx- New componentValidation:
npm run lintpasses without errorsnpm run testpasses all component testsnpm run typecheckpasses without TypeScript errorsnpm run storybookshows component rendering correctlyReferences:
@nosto/search-js/preact/hooks