Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Data Model
vtex.search-result
Version: 3.147.0
Latest version: 3.147.0

vtex.search-result owns no runtime data. The authoritative model is:

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).

BlockComponentFile
search-resultindexreact/index.js (SearchResult + SearchResultContainer)
galleryGalleryreact/Gallery.tsx
(legacy gallery)GalleryLegacyreact/GalleryLegacy.tsx
filter-navigator / .v1FilterNavigatorLegacyreact/FilterNavigatorLegacy.js
filter-navigator.v2FilterNavigatorreact/FilterNavigator.js
(flexible variant)FilterNavigatorFlexiblereact/FilterNavigatorFlexible.js
gallery-layout-switcherGalleryLayoutSwitcherreact/GalleryLayoutSwitcher.tsx
gallery-layout-optionGalleryLayoutOptionreact/GalleryLayoutOption.tsx
order-byOrderByreact/OrderBy.js
total-productsTotalProductsreact/TotalProducts.js
search-titleSearchTitlereact/SearchTitle.js
not-foundNotFoundSearchreact/NotFoundSearch.js
search-result-layoutSearchResultLayoutreact/SearchResultLayout.js
search-result-layout.customQuerySearchResultLayoutCustomQueryreact/SearchResultLayoutCustomQuery.js
search-contentSearchContentreact/SearchContent.js
search-fetch-moreFetchMorereact/FetchMore.js
search-fetch-previousFetchPreviousreact/FetchPrevious.js
search-layout-switcherLayoutModeSwitcherFlexiblereact/LayoutModeSwitcherFlexible.js

(See store/interfaces.json for the full list — there are several flexible-layout variants per block.)

State and context

  • SearchPageContext (from vtex.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 the search-result block 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:

DepUse
vtex.store-graphqlThe catalog/search GraphQL schema consumed at runtime
vtex.store-resourcesApollo client setup + shared queries
vtex.store-componentsUI building blocks
vtex.product-summaryProduct card renderer used inside gallery
vtex.shelfHorizontal shelf used by not-found
vtex.search-page-contextCross-block search state
vtex.pixel-managerAnalytics event emission
vtex.product-list-contextList-level context
vtex.flex-layoutFlexible-layout primitives
vtex.tab-layoutTabbed layouts
vtex.breadcrumbBreadcrumb block
vtex.styleguideUI primitives
vtex.css-handlesTheme-customization anchors
vtex.native-typesSite Editor input types
vtex.responsive-valuesResponsive prop handling
vtex.format-currencyCurrency formatting

Test surface

  • Tests live in react/__tests__/ and run via yarn testvtex-test-tools test.
  • Notable suites:
    • FilterNavigator.test.js
    • Gallery.test.js
    • OrderBy.test.js
    • SearchFooter.test.js
    • AccordionFilterContainer.test.js
    • useFacetNavigation.test.js
  • Coverage threshold (60%) is declared under the jest key in react/package.json. vtex-test-tools reads this via the standard Jest resolution.
See also
Vtex.search Result
VTEX IO Apps
VTEX App Store
VTEX IO Apps
Was this helpful?