vtex.search-result owns no runtime data. The authoritative model is:
- GraphQL schema:
vtex.search-graphql. - Resolver behavior:
vtex.search-resolver. - Block configuration contract:
store/interfaces.json,store/blocks.json,store/contentSchemas.json.
Block contract
_16// store/blocks.json (selected — see file for the full set)_16{_16 "search-result": {_16 "blocks": [_16 "filter-navigator",_16 "gallery",_16 "not-found",_16 "breadcrumb",_16 "total-products",_16 "order-by"_16 ]_16 },_16 "gallery": {_16 "blocks": ["product-summary"]_16 }_16}
_19// store/interfaces.json (selected)_19{_19 "search-result": {_19 "allowed": [_19 "not-found", "breadcrumb", "filter-navigator", "total-products",_19 "order-by", "search-title", "rich-text", "search-products-progress-bar"_19 ],_19 "required": ["gallery"],_19 "component": "index"_19 },_19 "filter-navigator": { "component": "FilterNavigatorLegacy" },_19 "filter-navigator.v1": { "component": "FilterNavigatorLegacy" },_19 "filter-navigator.v2": { "component": "FilterNavigator", "allowed": ["shop-review-summary", "sidebar-close-button"] },_19 "gallery": { "allowed": ["product-summary"], "component": "Gallery" },_19 "gallery-layout-switcher": { "component": "GalleryLayoutSwitcher", "composition": "children" },_19 "gallery-layout-option": { "component": "GalleryLayoutOption", "composition": "children" },_19 "not-found": { "allowed": ["shelf"], "component": "NotFoundSearch" },_19 // ... many more_19}
React component map
Block component names in store/interfaces.json resolve to exports in react/index.js. The repository mixes .tsx, .ts, and legacy .js files; the build is driven by the react builder (builders.react: 3.x in manifest.json).
| Block | Component | File |
|---|---|---|
search-result | index | react/index.js (SearchResult + SearchResultContainer) |
gallery | Gallery | react/Gallery.tsx |
| (legacy gallery) | GalleryLegacy | react/GalleryLegacy.tsx |
filter-navigator / .v1 | FilterNavigatorLegacy | react/FilterNavigatorLegacy.js |
filter-navigator.v2 | FilterNavigator | react/FilterNavigator.js |
| (flexible variant) | FilterNavigatorFlexible | react/FilterNavigatorFlexible.js |
gallery-layout-switcher | GalleryLayoutSwitcher | react/GalleryLayoutSwitcher.tsx |
gallery-layout-option | GalleryLayoutOption | react/GalleryLayoutOption.tsx |
order-by | OrderBy | react/OrderBy.js |
total-products | TotalProducts | react/TotalProducts.js |
search-title | SearchTitle | react/SearchTitle.js |
not-found | NotFoundSearch | react/NotFoundSearch.js |
search-result-layout | SearchResultLayout | react/SearchResultLayout.js |
search-result-layout.customQuery | SearchResultLayoutCustomQuery | react/SearchResultLayoutCustomQuery.js |
search-content | SearchContent | react/SearchContent.js |
search-fetch-more | FetchMore | react/FetchMore.js |
search-fetch-previous | FetchPrevious | react/FetchPrevious.js |
search-layout-switcher | LayoutModeSwitcherFlexible | react/LayoutModeSwitcherFlexible.js |
(See store/interfaces.json for the full list — there are several flexible-layout variants per block.)
State and context
SearchPageContext(fromvtex.search-page-context) carries the search state (query,totalProducts, results, loading) down to descendant blocks.FilterNavigatorContext(react/FilterNavigatorContext.js) is the local context for filter state used by the v2 navigator family.LocalQuery(react/components/LocalQuery) loads queries via Apollo when thesearch-resultblock is mounted standalone (without a parent layout providing the data).
Runtime dependencies (manifest.json)
The app depends on many storefront apps; the most central are:
| Dep | Use |
|---|---|
vtex.store-graphql | The catalog/search GraphQL schema consumed at runtime |
vtex.store-resources | Apollo client setup + shared queries |
vtex.store-components | UI building blocks |
vtex.product-summary | Product card renderer used inside gallery |
vtex.shelf | Horizontal shelf used by not-found |
vtex.search-page-context | Cross-block search state |
vtex.pixel-manager | Analytics event emission |
vtex.product-list-context | List-level context |
vtex.flex-layout | Flexible-layout primitives |
vtex.tab-layout | Tabbed layouts |
vtex.breadcrumb | Breadcrumb block |
vtex.styleguide | UI primitives |
vtex.css-handles | Theme-customization anchors |
vtex.native-types | Site Editor input types |
vtex.responsive-values | Responsive prop handling |
vtex.format-currency | Currency formatting |
Test surface
- Tests live in
react/__tests__/and run viayarn test→vtex-test-tools test. - Notable suites:
FilterNavigator.test.jsGallery.test.jsOrderBy.test.jsSearchFooter.test.jsAccordionFilterContainer.test.jsuseFacetNavigation.test.js
- Coverage threshold (60%) is declared under the
jestkey inreact/package.json.vtex-test-toolsreads this via the standard Jest resolution.